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、在具体界面中引入使用即可