工作总结(3)

发表于 | 分类于 ， ，

上一篇整理了一些关于vuejs的内容，这篇来整理一些axios的内容。

axios请求状态拦截

axios是平时用的比较多的用于http请求的库，平时用的比较多的相信是axios.get()，axios.post()，拦截器axios.interceptors.request.use及axios.interceptors.response.use。其实axios还可以自定义很多配置(具体可以参考这里：http://www.axios-js.com/zh-cn/docs/#%E8%AF%B7%E6%B1%82%E9%85%8D%E7%BD%AE ）。

我这里主要想说的是，axios在自定义配置上，可以自定义拦截的范围。下面是文档中给出的配置项validateStatus：

1
2
3
4
5
6
7
8
{
    ...
    // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 reject
    validateStatus: function (status) {
        return status >= 200 && status < 300; // default
    },
    ...
}

通过这项配置，可以让axios判断请求返回的内容根据状态码应该返回resolve还是reject。这个配置可以搭配axios拦截器使用比较好。

axios请求取消

实际开发中会有这样的需求：用户在快速操作中会发出很多请求，但其实有些请求已经不需要了或者因为用户的来回切换出现不必要的重新请求。这种情况下就要考虑能否取消掉已经发出的请求。

在axios中就可以通过方法CancelToken.source创建cancel token进行请求取消。在vue开发中，你可以先声明一个canceltoken的状态，然后在不需要请求的地方执行source.cancel()。

演示代码来源：http://www.axios-js.com/zh-cn/docs/#%E5%8F%96%E6%B6%88

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
    cancelToken: source.token
}).catch(function(thrown) {
    if (axios.isCancel(thrown)) {
        console.log('Request canceled', thrown.message);
    } else {
        // 处理错误
    }
});

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

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');