axios取消请求CancelToken的用法

阅读本书更多章节>>>>

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

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

在上面的代码中，我们先创建一个 CancelToken 对象 source ，并将其传递给发送请求的 cancelToken 属性中。然后在需要取消之前请求的时候，调用 source.cancel() 方法即可。此时，后续的请求将不会被发送，以避免重复响应。

需要注意的是，如果在请求被取消之前，请求已经被发送并成功响应，那么该已经成功响应的请求结果无法被取消，因此也需要对已经成功响应的请求结果做好处理。另外，也需要处理请求被取消的异常情况，以避免出现错误。

##取消该请求之前的相同请求：
在 axios 中，取消上一次请求与取消前面的所有请求是有差别的。取消上一次请求，我们可以记录当前请求的 cancelToken ，然后在下一次请求之前发送一个取消请求的操作。而取消前面的所有请求，我们需要维护一份请求队列，然后在新的请求发起之前，将之前的所有请求都取消掉。

下面是一个实现取消前面的所有请求的例子：

import axios from 'axios'; // 创建一个请求队列let pending = [];const CancelToken = axios.CancelToken;const removePending = (config) => {  for (let p in pending) {    if (pending[p].url === config.url + '&' + config.method) {      pending[p].cancel("request canceled");      pending.splice(p, 1);    }  }} // 添加请求拦截器axios.interceptors.request.use(  (config) => {    removePending(config);    config.cancelToken = new CancelToken((c) => {      pending.push({ cancel: c, url: config.url + '&' + config.method });    });    return config;  },  (error) => {    return Promise.reject(error);  }); // 响应拦截器axios.interceptors.response.use(  (response) => {    removePending(response.config);    return response;  },  (error) => {    return Promise.reject(error);  });

在上面的代码中，我们创建了一个请求队列 pending ，然后为请求配置添加了一个 cancelToken ，并将其推入请求队列中。在发送新的请求之前，我们遍历请求队列，将之前的所有请求都取消掉，并从请求队列中移除。同时，我们还需要在响应拦截器中将已经完成的请求从请求队列中移除。

需要注意的是，如果发送的请求是无法取消的，例如使用 jsonp 发送的请求，那么上面的代码将无法取消这类请求。因此，我们需要根据实际情况选择合适的方式来取消请求。

###取消之后再次发送请求提示被cancel怎么办？
如果在 axios 中取消了一个请求，那么再次发送同样的请求会提示 Cancellation 已经被取消的错误。这是因为 axios 同样的请求已经被 cancel ，因此无法再次发送。如果需要再次发送同样的请求，需要重新创建一个新的 cancelToken ，否则会一直提示被取消。
下面是一个重新创建 cancelToken 的示例代码：

import axios from 'axios';let cancelToken = axios.CancelToken;let cancel;let config = {  method: 'get',  url: '/api/data',  cancelToken: new cancelToken(function executor(c) {    // executor 函数接收一个 cancel 函数作为参数    cancel = c;  })};// 添加请求拦截器axios.interceptors.request.use(  (config) => {    // 如果 cancel 存在说明上次请求被取消了，重新创建一个    if (typeof cancel === 'function') {      config.cancelToken = new cancelToken(function executor(c) {        cancel = c;      });    }    return config;  },  (error) => {    return Promise.reject(error);  });// 发送请求axios(config)  .then((response) => {    console.log(response);  })  .catch((error) => {    if (axios.isCancel(error)) {      console.log('Request canceled', error.message);    } else {      console.log(error);    }  });// 取消请求cancel();

在上面的代码中，我们在发送请求前先创建了一个 cancelToken ，并将 cancel 函数保存下来。当发送请求时，我们检查 cancel 函数是否存在，如果存在说明上次请求被取消了，那么我们需要重新创建一个 cancelToken 并将其传递给新的请求中。这样就可以在取消请求后重新发送同样的请求了。
由于axios是对XHR对象的封装，如果请求已经被发送并且服务器已经接收到请求，那么cancelToken 在调用 abort() 方法取消请求可能会导致一部分数据已经被传输。因此，使用 时需要谨慎。

fetch请求才可以做到真正意义上的取消！！！

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-03-26/149058.html，文章来源：网络cs，作者：言安琪，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！