1.安装axios
2.封装axios
在src下新建文件夹：axios，添加http.js，内容如下：
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
| import axios from "axios"
export default axios
/* post 请求方法 */
export function post(url, data = {}) {
return new Promise((resolve, reject) => {
axios.post(url, data)
.then(res => {
resolve(res)
})
.catch(err => {
reject(err)
})
})
}
/* get 请求方法 */
export function get(url, params = {}) {
return new Promise((resolve, reject) => {
axios
.get(url, {
params: params
})
.then(res => {
resolve(res)
})
.catch(err => {
reject(err)
})
})
}
|
/* patch 请求方法 */
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
| export function patch(url, data = {}) {
return new Promise((resolve, reject) => {
axios.patch(url, data).then(
res => {
resolve(res)
},
err => {
reject(err)
}
)
})
}
/* put 请求方法 */
export function put(url, data = {}) {
return new Promise((resolve, reject) => {
axios.put(url, data).then(
res => {
resolve(res)
},
err => {
reject(err)
}
)
})
}
|
3.从main.js引入，并加入拦截器
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
124
125
126
127
128
129
130
131
132
133
|
import http from "./axios/http"//封装axios方法:post,get,patch,put
Vue.prototype.$post = http.post
Vue.prototype.$get = http.get
Vue.prototype.$patch = http.patch
Vue.prototype.$put = http.put
/***********配置axios--begin***********/
//基础参数
Axios.create({
timeout: 1000 * 30,
withCredentials: true,
});
// 添加请求拦截器
Axios.interceptors.request.use(function (config) {
config.headers = { "Content-Type": "application/json" }
return config;
}, function (error) {
return Promise.reject(error);
});
// 添加响应拦截器
Axios.interceptors.response.use(function (res) {
if (res.status === 200) {
if (res.data.code == "5002") {
Message(res.data.msg);
setTimeout(() => {
router.push({
path: `/`,
});
}, 2000);
return;
}
else
return res;
}
else {
return Message.error(res.statusText);
}
}, function (error) {
const status =
(error.response &&
error.response.status &&
error.response.status) ||
'';
var msg = '未知错误';
if (
error.code == 'ECONNABORTED' &&
error.message.indexOf('timeout') != -1
)
msg = '请求超时...';
if (status === 404)
msg = error.response.data.path + ' 接口404报错。';
if (status === 500)
msg = '网络已断开或服务器错误...';
if (status === 504)
msg = '数据响应超时，请重新登录操作...';
Message(msg);
/*
//控制台打印错误
return Promise.reject(msg);
*/
});
/***********配置axios--end***********/
|
4.调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| selectinfo() {
this.$post(
apiUrl,
JSON.stringify(this.selectParameters)
).then((res) => {
this.selectParameters.totalElements = res.data.data.totalElements;
this.listinfo =res.data.data.list;
}).catch(err=>{console.log(err)});
},
|