vite vue3配置axios

准备

参考

安装axios

yarn add axios

中文官网

src下新建request文件夹，该文件下新建index.ts

import axios from 'axios';
import { ElMessage } from 'element-plus';// const errorCodeType = function (code: number): string {
// 	let errMessage: string = '未知错误';
// 	switch (code) {
// 		case 400:
// 			errMessage = '错误的请求';
// 			break;
// 		case 401:
// 			errMessage = '未授权，请重新登录';
// 			break;
// 		case 403:
// 			errMessage = '拒绝访问';
// 			break;
// 		case 404:
// 			errMessage = '请求错误,未找到该资源';
// 			break;
// 		case 405:
// 			errMessage = '请求方法未允许';
// 			break;
// 		case 408:
// 			errMessage = '请求超时';
// 			break;
// 		case 500:
// 			errMessage = '服务器端出错';
// 			break;
// 		case 501:
// 			errMessage = '网络未实现';
// 			break;
// 		case 502:
// 			errMessage = '网络错误';
// 			break;
// 		case 503:
// 			errMessage = '服务不可用';
// 			break;
// 		case 504:
// 			errMessage = '网络超时';
// 			break;
// 		case 505:
// 			errMessage = 'http版本不支持该请求';
// 			break;
// 		default:
// 			errMessage = `其他连接错误 --${code}`;
// 	}
// 	return errMessage;
// };// 配置新建一个 axios 实例
const service = axios.create({baseURL: import.meta.env.VITE_API_URL,timeout: 50000,headers: { 'Content-Type': 'application/json' }
});// 添加请求拦截器
service.interceptors.request.use((config) => {// 在发送请求之前做些什么 token// if (Session.get('token')) {// 	config.headers!['Authorization'] = `${Session.get('token')}`;// }return config;},(error) => {// 对请求错误做些什么return Promise.reject(error);}
);// 添加响应拦截器
service.interceptors.response.use((response) => {// 对响应数据做点什么const res = response.data;return res;// if (res.code && res.code !== 0) {// 	// `token` 过期或者账号已在别处登录// 	if (res.code === 401 || res.code === 4001) {// 		Session.clear(); // 清除浏览器全部临时缓存// 		window.location.href = '/'; // 去登录页// 		ElMessageBox.alert('你已被登出，请重新登录', '提示', {})// 			.then(() => {})// 			.catch(() => {});// 	}// 	return Promise.reject(service.interceptors.response);// } else {// 	return res;// }},(error) => {// 对响应错误做点什么if (error.message.indexOf('timeout') != -1) {ElMessage.error('网络超时');} else if (error.message == 'Network Error') {ElMessage.error('网络连接错误');} else {if (error.response.data) ElMessage.error(error.response.statusText);else ElMessage.error('接口路径找不到');}return Promise.reject(error);}
);// 导出 axios 实例
export default service;

使用

api.get('/users').then((response: AxiosResponse) => {console.log(response.data);}).catch((error: any) => {console.error(error);});// 发送POST请求
api.post('/users', { name: 'John Doe' }).then((response: AxiosResponse) => {console.log(response.data);}).catch((error: any) => {console.error(error);});