axios 是基于 promise 封装的异步请求插件，其中包含两套核心，基于浏览器的 XHR 核心，基于服务端 http 模块，可以兼容浏览器与服务端两个业务场景，同时通过了多种传参方式，拦截全局请求，全局数据格式化等功能，方便开发者使用。
一、发送请求
1. 传统用法 类$.Ajax
1
2
3
4
5
6
7
8
9
| // 发送 POST 请求
axios({
method: '',//类型
url: '',// url
data: { // data
}
})
.then(res=>{})
.catch(err=>{})
|
2. get 方法抽离
1
2
3
4
5
6
| // axios.post(url,{params:''})
axios.get('/user', {
params: {
ID: 12345
}
})
|
3. post 方法抽离
1
2
3
4
| // axios.post(url,body)
axios.post('/user', {
ID: 12345
})
|
一定要注意两者参数传递时的区别，否则容易在项目中踩坑
二、创建请求实例
通过创建实例，可以避免在使用时 重复填写相同配置
1. 在 vue 项目中创建一个实例，并挂载到全局
1
2
3
4
5
6
7
8
9
10
| Vue.prototype.$http = axios.create({
baseURL: 'http://www.',//配置一个默认域名
timeout: 5000, // 超时时间
headers:{'Content-Type':'application/json;charset=utf8'} // 配置header
});
// 使用
this.$http()
this.$http.get()
this.$http.post()
|
2. 其它配置项可参考官方文档
三、多接口并发统一处理
由于 axios 基于 promise 开发，所以 promise.all()，Promise.race()同样适用。
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
| var p1 = new Promise((resolve, reject) => {
this.$axios.get(url).then(res=>{
resolve(res)
}).catch(err=>{
reject(err)
})
});
var p2 = new Promise((resolve,reject)=>{
this.$axios.get(url).then(res=>{
resolve(res)
}).catch(err=>{
reject(err)
})
})
// 请求都完成后执行
// 调用Promise.all().then(res=>{})
Promise.all([p1,p2]).then(res=>{
console.log(res);
})
}
// 有一个请求完成即执行
// 调用Promise.race().then(res=>{})
Promise.race([p1,p2]).then(res=>{
console.log(res);
})
}
|
四、全局拦截器
在请求，响应被 then 或 catch 处理前拦截它们，比如添加其它全局请求数据(token,签名)，集中处理 catch 报错，判断请求是否成功，避免分开处理。
1. 向服务器发出请求前拦截处理
1
2
3
4
5
6
7
8
| // 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
|
2. 被服务器响应后拦截处理
1
2
3
4
5
6
7
8
| // 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
|