Fork me on GitHub

Axios笔记(2)

实例化

上一篇说了基本用法,实际使用中并不会直接调用,而是实例化一个对象
并配置好基本参数,然后所有请求走实例化对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const service = axios.create({
baseURL: '/api1.0/'
timeout: 5000 // request timeout
})

function list(query) {
return service({
url: 'getList',
method: 'post',
data: query
})
}
// 调用示例
list(query).then()

配置参数较多,参照 Axios官网

拦截器

axios支持拦截器,可以在请求和返回时进行拦截处理

1
2
axios.interceptors.request.use(config => config, error => error);
axios.interceptors.response.use(response => response, error => error);

拦截器同样是符合Promise标准
一般用的较多的是在请求时加入 token ,返回数据时进行数据过滤和权限判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
service.interceptors.request.use(config => {
// 让每个请求携带token
config.headers['token'] = 'xxxx'
return config
}, error => {
console.log(error) // for debug
Promise.reject(error)
})

service.interceptors.response.use(
response => response,
error => {
console.log('request.err' + error)// for debug
if (error.response && error.response.status === 401) {
// session失效
// 登录超时,请重新登录
// do something
}
return Promise.reject(error)
})

错误处理

Axios默认把 200 <= status < 300 归为 resolve,其它则为 reject
可以修改参数中 validateStatus 来进行修改

1
2
3
validateStatus: function (status) {
return status >= 200 && status < 300; // default
},

reject 时返回error对象,可以从 error.response 获取http对象
error.response

如果是本地发生的异常,还没到请求阶段,则没有 response 对象

取消请求

调用定时器 setTimeout() 会返回一个整形token,然后用 clearTimeout() 传入返回的token即可清除定时器
axios 的取消也是一样道理,只是不是在请求时返回token,而是把token附加到请求参数

1
2
const source = axios.CancelToken.source()
console.log('cancelToken', source)

初始化一个 CancelToken 对象
axios.CancelToken
里面有个 cancel() 方法和名为 token 的 Promise对象

1
2
3
4
5
6
7
8
9
10
11
// 请求时传入 cancelToken
request({
url: 'list',
method: 'post',
data: query,
cancelToken: source.token
}).catch(e => {
console.log(e.message)
})
// 取消请求
source.cancel('some request is cancel')

此时 catch 会打印 some request is cancel

相关文章推荐

如果觉得我的文章对您有用,可否请我喝杯速溶咖啡