vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3+ts封装axios及解决跨域

vue3+ts封装axios实例以及解决跨域问题

作者:韭菜盖饭

在前端开发中,使用axios进行数据请求是常见的做法,封装axios可以统一请求头处理、方便接口管理、配置多拦截器等,提高代码的可维护性和重用性,本文详细记录了axios的封装过程,包括安装、配置跨域处理、接口管理文件的创建等

一、前言

前端请求后端数据时,会用到axios,但是如果不将axios封装好,会导致代码冗余

二次封装的好处如下:

因此,在这里记录一下axios的封装过程。

二、封装axios

安装axios

npm install axios

在目录/src/utils下创建一个http的文件夹

request.ts文件内容如下:

import axios from 'axios';

// 创建 axios 实例
const instance = axios.create({
  baseURL: 'http://127.0.0.1:4008/api/', // API 基础路径
  timeout: 100000, // 请求超时时间
  headers:{
	'Content-Type': 'application/json;charset=UTF-8',
  }
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么,例如添加token
    // config.headers['Authorization'] = 'Bearer your-token';
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response;
  },
  error => {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default instance;

api.ts文件如下:

import http from './request'

export const generateVoice = (params:any) => {
  return http.request({
    method: 'POST',
    url: '/generate_voice',
    headers: {
        'Content-Type': 'application/json'
      },
    data:JSON.stringify(params)
  })
}

api.ts文件的目的是为了方便管理接口,你可以把所有接口卸载这里,这样就会在后面调用时更加简洁

三、 解决跨域

vite.config.ts文件中添加如下配置

  server: {
    port: 4008,
    host: '0.0.0.0',
    proxy: {
      "/api": {
        target: "http://64.176.215.21:8000/",
        changeOrigin: false,
        ws: true,
        rewrite:(path) => path.replace(/^\/api/, "")
      }
    },
  },

注意 配置以上文件,你的接口就需要每次带上/api前缀

在request.ts文件中,我们已经做好了每次带上/api前缀的代码

 baseURL: 'http://127.0.0.1:4008/api/', // API 基础路径
 //or
 baseURL: '/api/', // API 基础路径

四、调用接口

没有使用api.ts的接口

axios.post('/generate_voice',param)
      .then(response => {
        console.log(response);
      })
      .catch(error => {
        console.error(error);
      });

使用api.ts封装好的接口

import {generateVoice} from '@/utils/http/api';

generateVoice(param)
  .then(response => {
    console.log("Voice generated successfully:", response.data);
  })
  .catch(error => {
    console.error("Error generating voice:", error);
  });

五、运行结果

可以看到控制台返回的乱码数据,表示我们请求后台成功了

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文