axios取消请求CancelToken的用法

这篇具有很好参考价值的文章主要介绍了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.toymoban.com/news/detail-630776.html

到了这里,关于axios取消请求CancelToken的用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • antdesign+vue+ts自定义上传文件customRequest,显示进度条onProgress,axios请求中断axios.CancelToken。

    customRequest里面有一个data参数,data包含了对file文件上传状态的操作:例如:onSuccess、onProgress、onError等 和file文件。 改变文件上传状态:可以通过改变fileList里面file的status和respones。 踩坑: 1、在customRequest文件上传完成以后,会自动重新更新一下fileList文件。上传之前挂载在

    2023年04月25日
    浏览(37)
  • 前端网络请求之JavaScript XHR、Fetch、Axios

    AJAX:一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。在不重新加载整个网页的情况下,对网页的某部分进行更新 Fetch:基于 promise 设计的。Fetch 的代码结构比起 ajax 简单多。fetch 不是 aj

    2024年01月23日
    浏览(48)
  • axios使用axiosSource.cancel取消请求后怎么恢复请求,axios取消请求和恢复请求实现

    在前端做大文件分片上传,或者其它中断请求时,需要暂停或重新请求,比如这里大文件上传时,可能会需要暂停、继续上传,如下GIF演示: 这里不详细说文件上传的处理和切片细节,后续有时间在出一篇,大文件上传,切片上传、断点续传、秒传等😀。 不扯远了,紧接本

    2024年02月12日
    浏览(40)
  • axios中取消请求的使用

    1.全局定义一个axios控制器变量 axiosController 2.配置axios 对象signal 3.创建setAxiosController函数 导出变量、函数 每次调用axiosController.abort()方法后就需要重新调用setAxiosController; axios官网 取消请求 mdn官网 AbortController在fetch中的使用

    2024年02月07日
    浏览(45)
  • axios如何取消请求,其原理是什么?

    原文合集地址如下,有需要的朋友可以关注 本文地址 axios 可以通过创建一个 CancelToken 来取消一个请求,基本原理是: 创建一个 CancelToken 的实例,它有一个 executor 函数,可以通过调用 executor 参数中的 cancel 函数来取消请求。 在 axios 请求配置中指定 cancelToken 属性,将 CancelToken 实例

    2024年02月12日
    浏览(36)
  • 封装axios请求重试和路由切换时请求取消

    请求重试函数:这里注意两个变量__retryCount 和retry分别代表当前次数和重试次数。如果请求中没有配置retry则正常进行不会进行重试。 请求取消我这里的场景是路由切换时,将上次路由全部取消也可以配置部分取消。注意变量noCancel,他来控制那些不需要被取消。 回顾axios请

    2024年02月21日
    浏览(44)
  • 简单易懂:Axios 如何取消请求的两种方法

    在前端开发中,网络请求是非常常见的操作。而有时候,我们可能需要在发送请求后取消它,比如用户在请求还未完成时离开了当前页面或者执行了其他操作,本文将介绍如何在使用 Axios 发送请求时取消这些请求。 在 Axios 中,取消请求的基本思路是创建一个用于取消的标记

    2024年01月19日
    浏览(47)
  • vue2/3 axios 请求重试、取消请求、loading 串行并行等(分享)

    基础版,添加 loading 在请求响应拦截器里面添加 loading,这样就不需要给每一个请求添加 loading 了 这些代码都是 vue2 项目的,vue3 也通用,改一下 loading 和 message 就好了(主要是 element 的区别) 我这里最后没有合并代码,有的配置不适合写在一起,看自己项目的需要 响应状态

    2024年02月10日
    浏览(50)
  • 优化axios封装之配置使用AbortController取消重复请求 防止用户频繁操作调用接口

    当数据量过大请求缓慢时用户点击按钮或者tab标签页快速重复调用同一个请求时,会导致数据错乱,当只需要最新的请求数据,并且中断上一个重复请求时,可以利用axios的CancelToken去中断之前的请求。 ps:由于不是所有请求都需要这个逻辑 所以我封装的时候增加了请求配置项

    2024年02月03日
    浏览(57)
  • Vue3 网络请求——axios 高级用法之 axios 拦截器实战与并发请求

    Axios 是一个流行的基于 Promise 的 HTTP 客户端库,用于在浏览器和 Node.js 中发出 HTTP 请求。 Axios 还支持请求和响应的拦截器。接下来通过这篇文章,我们一起来学习和了解一下 Axios 拦截器和并发请求,通过实际代码来介绍如何使用 Axios 拦截器。 拦截器会在发生响应请求之前和

    2024年02月10日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包