axios相关配置及其与vue-axios关系

2019-07-14 分类：Vue.js专区作者：管理员阅读（1650）

axios的相关配置还是比较多的，相关的帖子也很多，但很多同学看完了后还是似懂非懂，所以在此提炼下一些常用核心的东西出来，剔除糟粕，吸取精华。

基本用法

默认方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// 发起一个post请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});

// 获取远程图片get请求
axios({
method:'get',
url:'http://bit.ly/2mTM3nY',
responseType:'stream'
})
.then(function(response) {
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

请求方法别名

1
2
3
4
5
6
7
8
9
10

//为了方便我们为所有支持的请求方法均提供了别名。
axios.get(url[, config])
axios.post(url[, data[, config]])
axios.request(config)
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
//注意当使用以上别名方法时，url，method和data等属性不用在config重复声明。

（通过别名）发起一个GET请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

const axios = require('axios')

//发起一个user请求，参数为给定的ID
axios.get('/user?ID=12345')
.then(function(respone){
console.log(response);
})
.catch(function(error){
console.log(error);
});

//可配置的方式实现上面的代码如下
axios.get('/user',{
params:{
ID:12345
}
})
.then(function(response){
console.log(response);
})
.catch(function(error){
console.log(error)
});

（通过别名）发起一个POST请求

1
2
3
4
5
6
7
8
9
10

axios.post('/user',{
firstName:'friend',
lastName:'Flintstone'
})
.then(function(response){
console.log(response);
})
.catch(function(error){
console.log(error);
});

发起一个多重并发请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

配置参数

请求设置

以下列出了一些请求时的设置选项。只有url是必须的，如果没有指明method的话，默认的请求方法是GET.

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
134

{
//`url`是服务器链接，用来请求
url:'/user',

//`method`是发起请求时的方法
method:`get`,

//`baseURL`如果`url`不是绝对地址，那么将会加在其前面。
//可以很方便的对相对地址的axios实例设置`baseUrl`。
baseURL:'http://some-domain.com/api/',

//`transformRequest`允许请求的数据在发送至服务器之前进行转化。
//这个只适用于`PUT`,`POST`,`PATCH`方法。
//数组中的最后一个函数必须返回一个字符串或者一个`ArrayBuffer`,或者`Stream`,`Buffer`实例,`ArrayBuffer`,`FormData`
//此外你也可能需要设置下headers对象
transformRequest:[function(data,headers){
//依自己的需求对请求数据进行处理
return data;
}],

//`transformResponse`允许对返回的数据传入then/catch之前进行处理
transformResponse:[function(data){
//依需要对数据进行处理
return data;
}],

//`headers`是自定义的要被发送的信息头
headers:{'X-Requested-with':'XMLHttpRequest'},

//`params`是请求连接中的请求参数，必须是一个纯对象，或者URLSearchParams对象
params:{
ID:12345
},

//`paramsSerializer`是一个可选的函数，用来控制和序列化参数
//例如：（https://ww.npmjs.com/package/qs,http://api.jquery.com/jquery.param/)
paramsSerializer: function(params){
return Qs.stringify(params,{arrayFormat:'brackets'})
},

//`data`是请求时作为请求体的数据
//只适用于应用的'PUT','POST','PATCH'，请求方法
//当没有设置`transformRequest`时，必须是以下其中之一的类型（不可重复？）：
//-string(字符串),plain object(纯对象),ArrayBuffer,ArrayBufferView,URLSearchParams
//-限浏览器：FormData(表格数据),File(文件数据),Blob
//-限Node：Stream
data:{
firstName:'fred'
},
//`timeout`定义请求的时间，单位是毫秒。
//如果请求的时间超过这个设定时间，请求将会停止。
timeout:1000,

//`withCredentials`表明跨跨域请求书否需要证明。
withCredentials:false //默认值

//`adapter`适配器，允许自定义处理请求，这会使测试更简单。
//返回一个promise，并且提供一个有效的相应。（查看[response docs](#response-api)）
adapter:function(config){
/*...*/
},

//`auth`表明HTTP基础的认证应该被使用，并且提供证书。
//这个会设置一个`authorization` 头（header），并且覆盖你在header设置的Authorization头信息。
auth:{
username:'janedoe',
password:'s00pers3cret'
},

//`responsetype`表明服务器返回的数据类型，这些类型的设置应该是
//'arraybuffer','blob','document','json','text',stream'
responsetype:'json',

//`responseEncoding`表明解析相应的编码方式。
//**注意**会忽视responseType为stream或者客户端的请求。
responseEncoding:'utf8'//默认值

//`xsrfCookieName`时cookie做xsrf会话时的名字。
xsrfCookieName:'XSRF-TOKEN',//默认值

//`xsrfHeaderName` 是http头（header）的名字，并且该头携带xsrf的值
xrsfHeadername:'X-XSRF-TOKEN'，//默认值

//`onUploadProgress`允许处理上传过程的进程事件
onUploadProgress: function(progressEvent){
//本地过程事件发生时想做的事
},

//`onDownloadProgress`允许处理下载过程的进程事件
onDownloadProgress: function(progressEvent){
//下载过程中想做的事
},

//`maxContentLength` 定义http返回内容的最大字节容量
maxContentLength: 2000,

//`validateStatus` 定义promise的resolve和reject。
//http返回状态码，如果`validateStatus`返回true（或者设置成null/undefined），promise将会resolve；其他的promise将reject。
validateStatus: function(status){
return status >= 200 && stauts < 300;//默认
},

//`maxRedirect`定义重导向到node.js中的最大数量。
//如果值为0，那么没有redirect。
maxREdirects:5,//默认值

//`socketPath`定义一个在node.js中使用的 `UNIX Socket`。
//例如 `/var/run/docker.sock`发送请求到docker daemon。
//`socketPath`和`proxy`只可定义其一。
//如果都定义则只会使用`socketPath`。
socketPath:null,//默认值

//`httpAgent` 和 `httpsAgent`当产生一个http或者https请求时分别定义一个自定义的代理，在nodejs中。
//这个允许设置一些选选个，像是`keepAlive`--这个在默认中是没有开启的。
httpAgent: new http.Agent({keepAlive:treu}),
httpsAgent: new https.Agent({keepAlive:true}),

//`proxy`定义服务器的主机名字和端口号。
//`auth`表明HTTP基本认证应该跟`proxy`相连接，并且提供证书。
//这个将设置一个'Proxy-Authorization'头(header)，覆盖原先自定义的。
proxy:{
host:127.0.0.1,
port:9000,
auth:{
username:'cdd',
password:'123456'
}
},

//`cancelTaken` 定义一个取消，能够用来取消请求
//（查看下面的Cancellation 的详细部分）
cancelToken: new CancelToken(function(cancel){
})
}

怎么创建axios实例

你可以使用自定义设置创建一个新的实例，axios.create([config])，实例方法和之前提到的别名下是一样的

1
2
3
4
5

var instance = axios.create({
baseURL:'http://some-domain.com/api/',
timeout:1000,
headers:{'X-Custom-Header':'foobar'}
});

为什么要创建这样一个实例？主要就是在有些时候我们想在不改变全局的axios配置下去弄一个实例出来，通过这个实例，我们就有了单独的一个配置，通过这个实例发出请求，可以带上我们单独一套配置而又不去改变默认配置，却可以在使用这个实例发出请求下覆盖默认配置。如果不明白？没事，看下面：

1、全局修改axios默认配置

1
2
3

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

2、实例配置

1
2
3
4
5
6
7

// 创建实例时修改配置
var instance = axios.create({
baseURL: 'https://api.example.com'
});

// 实例创建之后修改配置
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

3、配置优先级

配置项通过一定的规则合并，request config > instance.defaults > 系统默认，优先级高的覆盖优先级低的。

1
2
3
4
5
6
7
8
9
10

// 创建一个实例，这时的超时时间为系统默认的 0
var instance = axios.create();

// 通过instance.defaults重新设置超时时间为2.5s，因为优先级比系统默认高
instance.defaults.timeout = 2500;

// 通过request config重新设置超时时间为5s，因为优先级比instance.defaults和系统默认都高
instance.get('/longRequest', {
timeout: 5000
});

拦截器interceptors

全局拦截器就不用说了吧，直接通过axios.interceptors就可以，重点我们想某个请求用拦截器，那么我们应该创建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

var HTTP = axios.create({
baseURL:'http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/',
timeout: 1000,
responseType:'json',
headers:{
'custome-header': 'miaov',
'content-type':'application/x-www-form-urlencoded'
}
})

HTTP.interceptors.request.use(function(config){
//在发送请求之前做某事
console.log("拦截")
console.log(config)
return config;
},function(error){
//请求错误时做些事
return Promise.reject(error);
});

HTTP.interceptors.response.use(function(data){
console.log("response")
console.log(data)
return data;
})

如果你需要在稍后移除拦截器,你可以

1 2	var myInterceptor = axios.interceptors.request.use(function(){/.../}); axios.interceptors.request.eject(myInterceptor);

取消请求Cancellation

1、你可以使用CancelToken.source工厂函数创建一个cancel token，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
cancelToken:source.toke
}).catch(function(thrown){
if(axiso.isCancel(thrown)){
console.log('Rquest canceled', thrown.message);
}else{
//handle error
}
});

//取消请求(信息参数设可设置的)
source.cancel("操作被用户取消");

2、你可以给CancelToken构造函数传递一个executor function来创建一个cancel token:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var CancelToken = axios.CancelToken;
var source = CancelToken.source()

axios.get('/user/12345',{
cancelToke:source.token
}).catch(function(thrown){
if(axios.isCancel(throw)){
console.log('请求已取消',throw.message)
}else{
//处理错误
}
})

axios.post('/user/2345',{
name:'new name'
},{
cancelToken:source.toke
})

source.cancel('操作已被用户取消！')

3、你也可以给CancelToke的构造函数传递一个处理函数来生成一个cancel token

1
2
3
4
5
6
7
8
9
10
11
12

const CancelToken = axios.CancelToken
let cancel;

acios.get('/user/12345',{
cancelToken:new CancelToken(function excutor(c){
//一个处理函数接受一个cancel函数作为参数
cancel = c
})
})

// 取消请求
cancel()

注意：你可以使用同一个cancel token取消多个请求。

aios和vue-axios关系

你完全不用担心，这东西学习？无成本，源码一共48行，vue-axios只是帮你在axios上面再封装了一层，让axios可以直接和Vue组装起来。原本你需要将axios挂在原型上去使用方式（Vue.prototype.$http = axios），这家伙自动帮你做了这么个事，而且给你提供了三种（如下）调用axios对象的方法，仅此而已，它并没有去过多做其他事情，vue-axios官网

main.js中

1
2
3
4
5
6
7
8
9
10

import Vue from 'vue'
import App from './App'
import router from './router'

import Axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,Axios)

Vue.config.productionTip = false

组件中直接使用

1
2
3
4
5
6
7
8
9
10
11

Vue.axios.get(api).then((response) => {
console.log(response.data)
})

this.axios.get(api).then((response) => {
console.log(response.data)
})

this.$http.get(api).then((response) => {
console.log(response.data)
})