axios入门
安装到项目中:
1 | npm install axios --save |
在项目中import使用:
1 | import axios from 'axios' |
Axios和其他的ajax库都是很类似的,提供了2种使用的方式一种是直接使用实例方法的如:
下面是实例的所有可用方法,方法中的config会与axios实例中的config合并。(实例可以将一些通用的config先配置好)
1 | axios.get('/user?ID=12345') |
Config 配置:
1 | { |
response 响应:
1 | // 服务器返回的数据 |
统一配置:
1 | axios.defaults.timeout = 5000; |
Interceptors 拦截器
这里我必须重点介绍,在我们发起大量的请求时候,需要对请求做统一的处理那就用到它了。笔者在使用了vue-resource和axios之后亲身比较,axios的配置更加人性化。
官方的API上这样介绍
You can intercept requests or responses before they are handled by then or catch.
您可以拦截请求或响应之前,他们处理的操作或者异常
实例用法:
1 | import axios from 'axios' |
request统一处理操作
如果是POST的请求,配置中可不能用params字段了,需要使用data字段。
这里有个小地方需要注意,POST的传参需要序列化,不然服务端不会正确的接收哦,会报错。所以这里我们要对request的数据进行一次序列化。这里我用了qs,直接import qs from ‘qs’ 即可1
2
3
4
5
6
7
8
9
10
11
12
13import axios from 'axios'
import qs from 'qs'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
//POST传参序列化
axios.interceptors.request.use((config) => {
if(config.method === 'post'){
config.data = qs.stringify(config.data);
}
return config;
},(error) =>{
alert("错误的传参");
return Promise.reject(error);
}
response统一处理操作
也就是说我们可以统一的在发起请求前,或者获得数据,对其进行统一的操作。这点非常的高效,在笔者的项目中,接口会返回一个code,就和微信API一样,code为200代表返回请求数据正确为其它时就自动跳出弹窗打印消息即可。1
2
3
4
5
6
7
8
9
10
11//code状态码200判断
axios.interceptors.response.use((res) =>{
if(res.data.code != '200'){
alert(res.data.msg);
return Promise.reject(res);
}
return res;
}, (error) => {
alert("网络异常");
return Promise.reject(error);
});
如果发生这些错误了我要结束当前的Promise所以返回一个Promise.reject(res),停止Promise队列下面的操作,如果有对于Promise不熟悉的童鞋请自行搜索Promise(这里还遇到了一个小坑最后会介绍)
参考配置
文件名是config/http.js
1 | import axios from 'axios' |
发起的请求
1 | import axios from 'config/http' |
一定要看
因为这里我使用的Promise,所以在安卓4.4.3一下的手机还是不支持Promise的,所以会报错。需要引入npm install babel-polyfill和npm install babel-runtime,在入口文件上加上即可。
import ‘babel-polyfill’
POST请求时,参数需要使用qs.stringify()