axios的高阶用法
介绍
Axios 是一个基于 promise 的 HTTP 库，可以在浏览器和 node.js 中使用。目前在我们的项目中主要使用axios向服务端发送请求，获取数据，并且可在请求中做很多的可控操作。更多详情可参考axios官方文档
常见使用
1
2
3
4
5
6
7
8
9
| import axios from 'axios'
login(){
axios.post("/info/api/user/loginin",{
username:"admin",
password:123
}).then(res=>{
console.log(res)
})
}
|
以上是一个简单的使用axios的实现登录功能的实例。
抽离
从功能层面来说，这段代码可以完美完成任务，但是为了代码的可维护性和简便性，我们可以对axios相关的代码做进一步抽离。按照之前的编码习惯（小伙伴们也可以自行制定规范），我通常会在项目的src文件夹下新建api文件夹，并新建axios.js文件。
以下为在axios.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
| import Axios from 'axios'
import store from '@/store/index'
import Router from '@/router/index'
import { Message } from 'element-ui'
let http={}
const baseUrl = process.env.NODE_ENV === 'production' ? 'https://yoururl.com/' : '/api'
var instance = Axios.create({
timeout: 20000,
baseUrl,
validateStatus(status){
switch(status){
case 400:
Message.error('请求出错')
break
case 401:
Message.warning({
message: '授权失败，请重新登录'
})
setTimeout(() => {
Router.push({
name: 'Login',
path: '/'
})
}, 1000)
store.dispatch('LOGIN_PAGE',false);
return;
case 403:
Message.warning({
message: '拒绝访问'
})
break
case 404:
Message.warning({
message: '请求错误,未找到该资源'
})
break
case 500:
Message.warning({
message: '服务端错误'
})
break
}
return status >= 200 && status < 300
}
})
instance.interceptors.request.use(
function(config){
if(store.state.userToken) {
store.dispatch('LOGIN_PAGE', true)
config.headers.Authorization = `${store.state.userToken}`;
config.headers['SHTC-TOKEN'] = `${store.state.userToken}`;
}
return config
},
function(error) {
return Promise.reject(error)
}
)
instance.interceptors.response.use(
response => {
return response.data
},
err => {
if(err && err.response) {
console.log(err)
}else {
err.Message = '连接服务器失败'
}
return Promise.reject(err.response)
}
)
http.get = function(url, options) {
return new Promise((resolve, reject) => {
instance
.get(baseUrl + url, options)
.then(response => {
if(response.code === 200) {
resolve(response.data)
}else {
Message.error({
message: response.errorMsg
})
reject(response.errorMsg)
}
})
.catch(e => {
console.log(e)
})
})
}
http.post = function(url, data, options) {
return new Promise((resolve, reject) => {
instance
.post(baseUrl + url, data, options)
.then(response => {
if(response.code === 200) {
store.dispatch('LOGIN_PAGE',false);
resolve(response.data);
}else {
Message.error({
message: response.errorMsg
})
store.dispatch('LOGIN_PAGE', false)
reject(response.errorMsg)
}
})
.catch(e => {
store.dispatch('LOGIN_PAGE',false);
console.log(e)
})
})
}
export default http
|
- 首先我们在该文件中引入
axios并实例化一个对象，可额外添加一些配置（超时时间、公共url、常见状态验证等等）；
- 如果我们使用JWT式的请求交互方式的话，可以在请求拦截器上将token挂在上去；
- 为了安全简便的使用返回数据，我们可以在响应拦截器上验证返回字段并将其中的
data剥离后直接返回；
- 新创建一个对象
http，并将axios实例支持的请求方式按编写习惯封装为函数并挂载到http上
- 导出
http对象
上述代码处于vue环境中，在react中使用时，部分代码须替换
抽离后的使用
在上述axios.js完成后，api文件夹下的剩余文件可按业务模块划分，这里以用户登录为例，在api下新建user.js，创建并暴露login函数
1
2
3
4
5
6
| import http from './index'
export function login(data){
return http.post('/user/login',data);
}
|
在页面组件上导入使用即可。
总结
axios在前端业务上的使用广泛，合理的封装抽离可以使我们的开发事半功倍，同时也能提高项目结构的合理性。以上即为全部内容，如有出入，欢迎指正。
