Axios的配置
![此处输入图片的描述](https://i-blog.csdnimg.cn/blog_migrate/a1c7757d81976113746b5b8e6150bbc3.webp?x-image-process=image/format,png)
既然尤大推荐的应该有过人之处,好吧于是在新的项目上开始使用Axios,开启这段学习(踩坑)的历程。
安装
使用
Axios和其他的ajax库都是很类似的,提供了2种使用的方式一种是直接使用实例方法的如:
下面是实例的所有可用方法,方法中的config会与axios实例中的config合并。(实例可以将一些通用的config先配置好)
1
2
3
4
5
6
7
8
9
10
|
axios.get(
'/user?ID=12345')
.
then(
function (response) {
console.log(response);
})
.
catch(
function (error) {
console.log(error);
});
|
Config 配置
Axios的配置参数很多,我们来一一了解
- url —— 用来向服务器发送请求的url
- method —— 请求方法,默认是GET方法
- baseURL —— 基础URL路径,假如url不是绝对路径,如https://some-domain.com/api/v1/login?name=jack,那么向服务器发送请求的URL将会是baseURL + url。
- transformRequest —— transformRequest方法允许在请求发送到服务器之前修改该请求,此方法只适用于PUT、POST和PATCH方法中。而且,此方法最后必须返回一个string、ArrayBuffer或者Stream。
- transformResponse —— transformResponse方法允许在数据传递到then/catch之前修改response数据。此方法最后也要返回数据。
- headers —— 发送自定义Headers头文件,头文件中包含了http请求的各种信息。
- params —— params是发送请求的查询参数对象,对象中的数据会被拼接成url?param1=value1¶m2=value2。
paramsSerializer —— params参数序列化器。 - data —— data是在发送POST、PUT或者PATCH请求的数据对象。
- timeout —— 请求超时设置,单位为毫秒
- withCredentials —— 表明是否有跨域请求需要用到证书
- adapter —— adapter允许用户处理更易于测试的请求。返回一个Promise和一个有效的response
- auth —— auth表明提供凭证用于完成http的身份验证。这将会在headers中设置一个Authorization授权信息。自定义Authorization授权要设置在headers中。
- responseType —— 表示服务器将返回响应的数据类型,有arraybuffer、blob、document、json、text、stream这6个类型,默认是json类似数据。
- xsrfCookieName —— 用作 xsrf token 值的 cookie 名称
- xsrfHeaderName —— 带有 xsrf token 值 http head 名称
- onUploadProgress —— 允许在上传过程中的做一些操作
- onDownloadProgress —— 允许在下载过程中的做一些操作
- maxContentLength —— 定义了接收到的response响应数据的最大长度。
- validateStatus —— validateStatus定义了根据HTTP响应状态码决定是否接收或拒绝获取到的promise。如果 validateStatus 返回 true (或设置为 null 或 undefined ),promise将被接收;否则,promise将被拒绝。
- maxRedirects —— maxRedirects定义了在node.js中redirect的最大值,如果设置为0,则没有redirect。
- httpAgent —— 定义在使用http请求时的代理
- httpsAgent —— 定义在使用https请求时的代理
- proxy —— proxy定义代理服务器的主机名和端口,auth
- cancelToken —— cancelToken定义一个 cancel token 用于取消请求
Response 返回
当我们ajax获取数据成功后会返回一个response对象,它包含了以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
|
{
data: {},
status:
200,
statusText:
'OK',
headers: {},
config: {}
}
|
统一Config配置
在接口测试中,我们经常需要切换线上环境和测试环境,这里我们都可以通过Config来配置,这样我们所有的发起的请求都是通过这个基本的URL走了。
1
2
3
4
|
axios.defaults.timeout =
5000;
axios.defaults.headers.post[
'Content-Type'] =
'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.baseURL =
'http://www.xxxx.xxx/api';
|
Interceptors 拦截器
这里我必须重点介绍,在我们发起大量的请求时候,需要对请求做统一的处理那就用到它了。笔者在使用了vue-resource
和axios
之后亲身比较,axios
的配置更加人性化。
官方的API上这样介绍
You can intercept requests or responses before they are handled by then or catch.
您可以拦截请求或响应之前,他们处理的操作或者异常
request统一处理操作
如果是POST的请求,配置中可不能用params
字段了,需要使用data
字段。
这里有个小地方需要注意,POST的传参需要序列化,不然服务端不会正确的接收哦,会报错。所以这里我们要对request的数据进行一次序列化。这里我用了qs
,大家需要install一下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
import axios
from
'axios'
import qs
from
'qs'
axios.defaults.headers.post[
'Content-Type'] =
'application/x-www-form-urlencoded;charset=UTF-8';
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
|
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
(这里还遇到了一个小坑最后会介绍)
我的配置
好了介绍了这么多介绍下我的axios配置的文件设置吧,这个文件名是config/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
33
34
|
import axios
from
'axios'
import qs
from
'qs'
import *
as _
from
'./whole'
axios.defaults.timeout =
5000;
axios.defaults.headers.post[
'Content-Type'] =
'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.baseURL =
'http://www.guinaben.com:8070';
axios.interceptors.request.use(
(config) => {
if(config.method ===
'post'){
config.data = qs.stringify(config.data);
}
return config;
},
(error) =>{
_.toast(
"错误的传参");
return
Promise.reject(error);
});
axios.interceptors.response.use(
(res) =>{
if(res.data.code !=
'200'){
_.toast(res.data.msg);
return
Promise.reject(res);
}
return res;
},
(error) => {
_.toast(
"网络异常");
return
Promise.reject(error);
});
export
default axios;
|
发起的请求
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
|
import axios
from
'config/http'
axios({
method:
'get',
url:
'xxxx/xxxxx',
params: {
"textbook_id":id,
"token":token
}
})
.
then(
(response) => {
resolve(response);
})
axios({
method:
'post',
url:
'teacher/pwd/resetByMobile',
data: {
"textbook_id":id,
"token":token
}
})
.
then(
(response) => {
resolve(response);
})
|
一定要看
因为这里我使用的Promise
,所以在安卓4.4.3一下的手机还是不支持Promise的,所以会报错。需要引入npm install babel-polyfill
和npm install babel-runtime
,在入口文件上加上即可。
1
|
import
'babel-polyfill'
|