axios取消请求CancelToken的用法

axios中取消请讨环境分为1：取消该请求之后的雷同请求；2：取消该请求之前的雷同请求
##取消该请求之后的雷同请求：
在使用 axios 发送请求时，如果在短时间内连续发送同一个请求，可能会出现请求效果混乱或重复相应的问题。为了制止这种环境，我们可以使用 axios 的取消请求功能，每次发送请求前先取消之前的请求。下面是使用 axios 取消请求的示例代码：

1. import axios from 'axios';
2. // 创建一个 CancelToken 对象
3. const source = axios.CancelToken.source();
4. // 发送请求
5. axios.get('/api/data', {
6.   // 将 cancelToken 属性设置为上面创建的 CancelToken 实例
7.   cancelToken: source.token
8. }).then(response => {
9.   console.log(response.data);
10. }).catch(error => {
11.   console.error(error);
12. });
13. // 取消之前的请求
14. source.cancel('Duplicate request');

复制代码

在上面的代码中，我们先创建一个 CancelToken 对象 source ，并将其通报给发送请求的 cancelToken 属性中。然后在必要取消之前请求的时间，调用 source.cancel() 方法即可。此时，后续的请求将不会被发送，以制止重复相应。
必要留意的是，如果在请求被取消之前，请求已经被发送并成功相应，那么该已经成功相应的请求效果无法被取消，因此也必要对已经成功相应的请求效果做利益置惩罚。另外，也必要处理惩罚请求被取消的非常环境，以制止出现错误。
##取消该请求之前的雷同请求：
在 axios 中，取消上一次请求与取消前面的全部请求是有差别的。取消上一次请求，我们可以纪录当前请求的 cancelToken ，然后在下一次请求之前发送一个取消请求的操纵。而取消前面的全部请求，我们必要维护一份请求队列，然后在新的请求发起之前，将之前的全部请求都取消掉。
下面是一个实现取消前面的全部请求的例子：

1. import axios from 'axios';
2. // 创建一个请求队列
3. let pending = [];
4. const CancelToken = axios.CancelToken;
5. const removePending = (config) => {
6.   for (let p in pending) {
7.     if (pending[p].url === config.url + '&' + config.method) {
8.       pending[p].cancel("request canceled");
9.       pending.splice(p, 1);
10.     }
11.   }
12. }
13. // 添加请求拦截器
14. axios.interceptors.request.use(
15.   (config) => {
16.     removePending(config);
17.     config.cancelToken = new CancelToken((c) => {
18.       pending.push({ cancel: c, url: config.url + '&' + config.method });
19.     });
20.     return config;
21.   },
22.   (error) => {
23.     return Promise.reject(error);
24.   }
25. );
26. // 响应拦截器
27. axios.interceptors.response.use(
28.   (response) => {
29.     removePending(response.config);
30.     return response;
31.   },
32.   (error) => {
33.     return Promise.reject(error);
34.   }
35. );

复制代码

在上面的代码中，我们创建了一个请求队列 pending ，然后为请求配置添加了一个 cancelToken ，并将其推入请求队列中。在发送新的请求之前，我们遍历请求队列，将之前的全部请求都取消掉，并从请求队列中移除。同时，我们还必要在相应拦截器中将已经完成的请求从请求队列中移除。
必要留意的是，如果发送的请求是无法取消的，例如使用 jsonp 发送的请求，那么上面的代码将无法取消这类请求。因此，我们必要根据实际环境选择合适的方式来取消请求。
###取消之后再次发送请求提示被cancel怎么办？
如果在 axios 中取消了一个请求，那么再次发送同样的请求会提示 Cancellation 已经被取消的错误。这是由于 axios 同样的请求已经被 cancel ，因此无法再次发送。如果必要再次发送同样的请求，必要重新创建一个新的 cancelToken ，否则会不停提示被取消。
下面是一个重新创建 cancelToken 的示例代码：

1. import axios from 'axios';
2. let cancelToken = axios.CancelToken;
3. let cancel;
4. let config = {
5.   method: 'get',
6.   url: '/api/data',
7.   cancelToken: new cancelToken(function executor(c) {
8.     // executor 函数接收一个 cancel 函数作为参数
9.     cancel = c;
10.   })
11. };
12. // 添加请求拦截器
13. axios.interceptors.request.use(
14.   (config) => {
15.     // 如果 cancel 存在说明上次请求被取消了，重新创建一个
16.     if (typeof cancel === 'function') {
17.       config.cancelToken = new cancelToken(function executor(c) {
18.         cancel = c;
19.       });
20.     }
21.     return config;
22.   },
23.   (error) => {
24.     return Promise.reject(error);
25.   }
26. );
27. // 发送请求
28. axios(config)
29.   .then((response) => {
30.     console.log(response);
31.   })
32.   .catch((error) => {
33.     if (axios.isCancel(error)) {
34.       console.log('Request canceled', error.message);
35.     } else {
36.       console.log(error);
37.     }
38.   });
39. // 取消请求
40. cancel();

复制代码

在上面的代码中，我们在发送请求前先创建了一个 cancelToken ，并将 cancel 函数生存下来。当发送请求时，我们查抄 cancel 函数是否存在，如果存在分析上次请求被取消了，那么我们必要重新创建一个 cancelToken 并将其通报给新的请求中。如许就可以在取消请求后重新发送同样的请求了。
由于axios是对XHR对象的封装，如果请求已经被发送而且服务器已经接收到请求，那么cancelToken 在调用 abort() 方法取消请求可能会导致一部分数据已经被传输。因此，使用 时必要审慎。
fetch请求才可以做到真正意义上的取消！！！

来源：https://blog.csdn.net/sinat_37739766/article/details/130432530
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！