vite vue3配置axios

准备

参考

安装axios

yarn add axios
1

中文官网

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

使用

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);
 });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16