vue项目中axios的基本配置

1、导入axios包

npm install axios -S

2、根据项目情况，设置代理（我这里是vite工具，webpack工具大同小异）

server:{
    proxy:{
      '/api':{//开发环境所需
        target:'https://nei.netease.com/api/apimock-v2/b231c267a9cdd8901d13358cee6c6629/ceshi/',
        changeOrigin:true,
        rewrite:(path) => path.replace(/^\/api/,'')
      },
      '/url':{//生产环境所需
        target:'https://nei.netease.com/api/apimock-v2/1c17e6cd694d90cbc4b1f347b680f346/production/',
        changeOrigin:true,
        rewrite:path => path.replace(/^\/url/,'')
      }
    }
  }

3、新增.env.development（开发环境）与.env.production文件，并写入以下信息，注意内容必须全部大写，前缀必须是VITE

//.env.production文件内容
VITE_BASE_URL=/url

//.env.development文件内容
VITE_BASE_URL=/api

4、下载qs与@types/qs包(没有使用ts的，不需要导入@types/qs，只需要导入qs即可)

npm i -S qs
npm i -S @types/qs

5、在项目中新建axios.ts文件，根据以下信息设置拦截信息

import axios,{AxiosInstance, AxiosRequestConfig, AxiosResponse} from 'axios';
import qs from 'qs';

const baseURL = import.meta.env.VITE_BASE_URL as string;//根据环境获得不同的代理模式
const instance:AxiosInstance = axios.create({
    baseURL,
    timeout:10 * 1000//十秒超时
});

//设置请求拦截器
instance.interceptors.request.use((config:AxiosRequestConfig) => {
    //增加token
    const token:string | null = localStorage.getItem('token');//获取token方式因情况决定
    token && (config.headers.common['Authorization'] = token);
    if(config.method === 'post' || config.method === 'put'){
        config.data = qs.stringify(config.data);
    }else if(config.method === 'get' || config.method === 'delete'){
        config.params = qs.parse(config.data);
        config.data = undefined;
    }
    return config;
},(error:any) => {
    console.log(error);
});

//响应拦截器
instance.interceptors.response.use((config:AxiosResponse) => {
    return Promise.resolve(config.data);//这里不再扩展，可根据自己情况增加code判断等等
},(error:any) => {
    console.log(error);
})

export default instance;

6、在具体界面中引入使用即可