概述

封装了Axios请求,可以添加请求拦截器以便在发送请求之前做些什么(例如统一加JWT请求头给后端验证),还可以添加响应拦截器以便对响应数据做点什么

代码实现

安装Axios

1
npm install axios

封装Axios请求

封装了三个方法:get请求、post请求、文件上传

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
/**
* 引入axios
*/
import axios from "axios";

/**
* 请求的IP地址和端口
* @type {string}
*/
const baseUrl = "http://localhost:8080";

/**
* 创建axios实例
* @type {AxiosInstance}
*/
const httpService = axios.create({
//url前缀-'http:xxx.xxx'
//baseURL: process.env.BASE_API, // 需自定义
baseURL: baseUrl,
//请求超时时间
timeout: 3000
});

/**
* 添加请求拦截器
*/
httpService.interceptors.request.use(function (config) {
//在发送请求之前做些什么
//设置请求头token
config.headers.token = window.sessionStorage.getItem('token');
return config;
}, function (error) {
//对请求错误做些什么
return Promise.reject(error);
});

/**
* 添加响应拦截器
*/
httpService.interceptors.response.use(function (response) {
//对响应数据做点什么
return response;
}, function (error) {
//对响应错误做点什么
return Promise.reject(error);
});

/*网络请求部分*/

/**
* get请求
*
* @param url 请求地址
* @param params 参数
* @returns {Promise<unknown>}
*/
export function get(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'get',
params: params
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}

/**
* post请求
*
* @param url 请求地址
* @param params 参数
* @returns {Promise<unknown>}
*/
export function post(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'post',
data: params
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}

/**
* 文件上传
*
* @param url 请求地址
* @param params 参数
* @returns {Promise<unknown>}
*/
export function fileUpload(url, params = {}) {
return new Promise((resolve, reject) => {
httpService({
url: url,
method: 'post',
data: params,
headers: {'Content-Type': 'multipart/form-data'}
}).then(response => {
resolve(response);
}).catch(error => {
reject(error);
});
});
}

export function getServerUrl() {
return baseUrl;
}

export default {
get,
post,
fileUpload,
getServerUrl
}

使用

使用前先在页面引入,关于为什么有个@去参考博客:使用 Vite 创建 Vue3 项目 | LeDao’s Blog (zoutl.cn)

1
2
//@是/src的路径别名
import axiosUtil from '@/util/axios';

使用时需要使用到asyncawait关键字,这两个关键字的用法可以参考博客:JavaScript中的async/await详解 - gaozejie - 博客园 (cnblogs.com)

其它使用了async关键字的方法调用时要在方法前加上await关键字,例如:await handleLogin();,虽然可以不加await关键字,但是会有提示让我们加上

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
//下面一行使用到async关键字
const handleLogin = async () => {
if (form.value.userName === "") {
ElMessage.error("用户名不能为空");
return false;
}
if (form.value.password === "") {
ElMessage.error("密码不能为空");
return false;
}
let params = new URLSearchParams();
params.append("userName", form.value.userName);
params.append("password", form.value.password);
let url = '/administrator/login';
//使用try...catch或.catch对async函数进行异常处理,不处理的话可不加
try {
//下面一行使用到await关键字
const result = await axiosUtil.get(url, params);
if (result.data.code === 0) {
window.sessionStorage.setItem("userName", result.data.userName);
window.sessionStorage.setItem("administratorId", result.data.id);
window.sessionStorage.setItem("token", result.data.token);
router.replace('/main');
} else if (result.data.code === 500) {
ElMessage.error(result.data.msg);
}
} catch (err) {
console.log("error:" + err);
ElMessage.error("服务器出错,请联系管理员!");
}
}