axios 请求取消及其实现过程

最新推荐文章于 2024-07-07 10:10:45 发布
最新推荐文章于 2024-07-07 10:10:45 发布
阅读量577 收藏 1
点赞数 1
分类专栏： Javascript 文章标签： js axios 请求取消、实现过程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42614080/article/details/119081376
版权
一、axios 请求取消
  1. axios 请求取消，代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>axios 请求取消</title>
  <link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="./node_modules/axios/dist/mine-axios.js"></script>
</head>
<body>
  <div class="container">
    <h2 class="page-header">axios取消请求</h2>
    <button class="btn btn-primary">发送请求</button>
    <button class="btn btn-warning">取消请求</button>
  </div>
  <script>
    // 获取按钮 
    const btns = document.querySelectorAll('button');
    // 声明全局变量
    let cancel = null;
    btns[0].onclick = function () {
      // 检测上一次的请求是否已经完成
      if (cancel !== null) {
        // 取消上一次的请求
        cancel();
      }

      // 创建 cancelToken 的值
      let cancelToken = new axios.CancelToken(
        function (c) {
          // 3. 将 c 的值赋值给 cancel
          cancel = c;
        });
      
      axios({
        method: 'GET',
        url: 'http://localhost:3000/posts',
        // 添加配置对象的属性
        cancelToken: cancelToken
      }).then(response => {
        console.log(response);
        // 将 cancel 的值初始化
        cancel = null;
      });
    }

    // 绑定第二个事件取消请求
    btns[1].onclick = function () {
      cancel();
    }
  </script>
</body>
</html>
二、axios 请求取消的实现过程
  1. axios 请求取消的实现过程，代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>axios 请求取消的实现</title>
  <link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <!-- <script src="./node_modules/axios/dist/mine-axios.js"></script> -->
</head>
<body>
  <div class="container">
    <h2 class="page-header">axios取消请求</h2>
    <button class="btn btn-primary">发送请求</button>
    <button class="btn btn-warning">取消请求</button>
  </div>
  <script>
    // 构造函数
    function Axios (config) {
      this.config = config;
    }

    // 原型 request 方法
    Axios.prototype.request = function (config) {
      return dispatchRequest(config);
    }

    // dispatchRequest 函数 
    function dispatchRequest (config) {
      return xhrAdapter(config);
    }

    // xhrAdapter 函数
    function xhrAdapter (config) {
      // 发送 AJAX 请求
      return new Promise((resolve, reject) => {
        // 实例化对象
        const xhr = new XMLHttpRequest();
        // 初始化
        xhr.open(config.method, config.url);
        // 发送
        xhr.send();
        // 处理结果
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            // 判断结果
            if (xhr.status >= 200 && xhr.status < 300) {
              // 设置成功的状态
              resolve({
                status: xhr.status,
                statusText: xhr.statusText
              });
            } else {
              reject(new Error('请求失败'));
            }
          }
        }

        // 关于取消请求的处理
        if (config.cancelToken) {
          // 对 cancelToken 对象身上的 promise 对象指定成功的回调
          config.cancelToken.promise.then(value => {
            xhr.abort();
            // 将整体结果设置为失败
            reject(new Error('请求已经被取消'));
          });
        }
      })
    }

    // 创建 axios 函数
    const context = new Axios({});
    const axios = Axios.prototype.request.bind(context);
    
    // CancelToken 构造函数
    function CancelToken (executor) {
      // 声明一个变量
      var resolvePromise;
      // 为实例对象添加属性
      this.promise = new Promise((resolve) => {
        // 将 resolve 赋值给 resolvePromise 
        resolvePromise = resolve;
      });
      // 调用 executor 函数
      executor(function () {
        // 执行 resolvePromise 函数
        resolvePromise();
      });
    }


    // 获取按钮 验证取消请求实现
    const btns = document.querySelectorAll('button');
    // 声明全局变量
    let cancel = null;
    btns[0].onclick = function () {
      // 检测上一次的请求是否已经完成
      if (cancel !== null) {
        // 取消上一次的请求
        cancel();
      }

      // 创建 cancelToken 的值
      let cancelToken = new axios.CancelToken(
        function (c) {
          // 3. 将 c 的值赋值给 cancel
          cancel = c;
        });
      
      axios({
        method: 'GET',
        url: 'http://localhost:3000/posts',
        // 添加配置对象的属性
        cancelToken: cancelToken
      }).then(response => {
        console.log(response);
        // 将 cancel 的值初始化
        cancel = null;
      });
    }

    // 绑定第二个事件取消请求
    btns[1].onclick = function () {
      cancel();
    }
  </script> 
</body>
</html>
城南花开ze
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue3中刷新浏览器页面的axios请求状态变为canceled
蜗牛~~
03-21 1067
为什么会想到fetch呢，是因为最近在开发中要加一个悲观锁的功能，具体需求是：用户1和用户2不能同时打开一个模型进行编辑，用户1优先进入模型后，要对该模型进行上锁，关闭该模型或刷新页面时要进行解锁，此时在刷新页面时出现了问题。由此可得出原因：页面刷新后，页面已经被销毁，但放在mounted中的解锁异步请求还没完成，页面就会主动把未完成的请求取消掉，这时的请求是还没到服务器的。在后台使用 Fetch API，因此它同样具有 64 KB 的载荷限制，以及它还可以确保请求在页面卸载后继续发出。
详解Axios 如何取消已发送的请求
10-17
主要介绍了详解Axios 如何取消已发送的请求，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
axios取消请求
qq_38836435的博客
05-09 193
axios取消请求 应用场景：防止用户频繁发送请求，实现发送请求的防抖 官网上描述的使用方法有两种，如下： 利用CancelToken.source const CancelToken = axios.CancelToken const source = CancelToken.source() // get请求cancelToken定义在第二个参数中 axios.get('/requrl', { cancelToken: source.token }).catch(function (throw
axios取消请求功能CancelToken原理解析
最新发布
qq_38229938的博客
07-07 933
取消请求的需求平时出现的场景不是很多，估计有一部分小伙伴并没有使用过，这里就简单的介绍一下用法} else {// 处理错误});}, {})// 取消请求（message 参数是可选的）
简单易懂：Axios 如何取消请求的两种方法
LiamHong_的博客
12-06 8718
通过使用Axios提供的取消标记，我们可以在发送请求后随时取消请求，以避免不必要的网络流量和资源浪费。这为我们在前端开发中处理用户操作的中断提供了便利。Axios 的响应拦截器如何使用？响应拦截器的用法以及实践案例。
axios如何取消请求，其原理是什么？
study_way的博客
08-10 2088
axios如何取消请求
axios 标记请求 取消重复请求
好巧的博客
06-29 840
当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。当按钮点击过快时，会重复发送多个请求，当请求被再次被发送时，前一个请求并没有返回请求结果，那么就取消前一个请求，不再进行响应。如果本篇文章对你有帮助的话，很高兴能够帮助上你。
axios的请求与取消
ymlvtimi的博客
04-10 1059
var vm=new Vue({ el:"#div_id", data:{ cancelTag:[], //装所有的想要准备移除的请求，用处：当你离开这个页面时，将取消这个页面发出 的未完成的所有请求 cancelCurrentTag:null, //放置的是前一个单独的请求，用处：有时只想对某一个可能未完成的请求，让它取消 }, methods:{ post:f...
axios 取消请求
Luckyzhoufangbing的博客
11-17 540
（一）基本流程 1. 配置 cancelToken 对象 2. 缓存用于取消请求的 cancel 函数 3. 在后面特定的时机调用 cancel 函数取消请求 4. 在后面的回调中判断 如果 error 是cancel 做出相应处理 (二) 代码实现 客户端 vue: <template> <div> <button @click="sendAjax">send</button> <button @click="can
axios 中如何取消请求_从不会使用到精通原理_番茄出品
lazy_tomato的博客
02-24 7185
github-axios 点击跳转我去年阅读 源码的时候，默认版本还是 ，今年变成了 了，这个需要注意下。我对 版本号比较在意的原因是，看到过这句话： 整体源码不过千行，可模仿和学习的地方还是有很多的，互勉。由上述的截图可得，目前最新的 的取消请求api，推荐使用 。旧版本的 在 后弃用。官方示例 1.3.2 AbortController 2. CancelToken 使用案例 官方文档中的演示案例不太直观，我们搭建一个服务，本地调试一下。 2.2 后端服务代码 2.3 启
Axios取消请求
qq_35260673的博客
04-13 1504
使用Axios取消请求来优化tab跳转的体验
Axios中的取消请求源码解析
tjx11111的博客
03-02 826
前言 在开发中，为了活动动态数据，因此我们需要与后台通过请求进行交互，获取动态数据来展现给用户看。有些一些网站对实时信息要求还更高，比如股票类、聊天类、直播类等。本章内容涉及思想层面东西比较多，如果出现知识盲点无所谓，主要就是体会Promise的运用思想！思想！思想！（小白也可以试试） 当下流行的http库 http库在当下作为请求交互来说，是比较主流的，今天就给大家介绍一个比较受欢迎的库：Ax...
Axios之取消请求源码分析
11-04 5978
文章目录1.前言2.源码分析 1.前言 之前看到Axios的取消请求，不像其他的API那么直观好理解，有两种取消请求的方式，感觉很奇怪，所以决定去研究下源码，研究完之后才发现原来如此！ 2.源码分析 首先第一种写法的代码： let Http = this.$http, CancelToken = Http.CancelToken, that = this; Http.post( "https://www.fastmock.site/mock/257d9fdebd0b1dd887acd
掌握请求控制权：Axios 如何取消请求的两种方法
YLF123456789000的博客
03-18 1922
通过使用Axios提供的取消标记，我们可以在发送请求后随时取消请求，以避免不必要的网络流量和资源浪费。这为我们在前端开发中处理用户操作的中断提供了便利。这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你！
Axios取消请求以及其原理（v0.26.1）
刘瓜皮Alison的博客
04-18 1264
Axios取消请求以及其原理
取消axios请求的正确姿势
CSU_Zipple的博客
01-16 1413
bug 直接使用source的token来cancel请求，会导致这样的问题：所有的请求都被cancel掉了！这很明显不符合我们的要求：跳转路由的时候清除掉上一个页面的请求，当前页面的请求应保留。 解决办法 在拦截器中为每一个请求new一个token，然后存在store里面。在路由钩子中调用相应的cancel方法就好了。 interceptors (instance) { instan...
axios 源码分析-取消请求
vison101的博客
12-04 389
使用取消请求 有的时候我们会进行一些耗时比较长的请求，如果中途我们不想再继续了，如何能够取消请求呢，先看看axios官方文档关于取消请求的用法 const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.get('/user/12345', { cancelToken: source.to...
Axios请求成功和失败时分别执行哪个函数?
dxn16638400024的博客
11-03 1463
原理是当发起一个请求时，Axios 会返回一个 Promise 对象。这两个函数适用于处理异步请求的结果，并根据请求的成功或失败状态进行相应的处理。方法，用于注册请求成功和失败的回调函数。当请求成功时，会调用。在 Axios 中，请求成功和失败时分别执行的函数是。方法用于发起一个 GET 请求，请求的 URL 是。方法注册的回调函数；当请求失败时，会调用。方法注册的回调函数会被调用，并且可以通过。方法注册的回调函数会被调用，并且可以通过。获取到服务器返回的数据。方法注册的回调函数。参数获取到错误信息。
vue统一封装axios请求 取消重复请求
04-05
在Vue项目中，我们通常会使用axios来发送请求。为了方便管理和维护代码，我们可以将axios请求进行统一封装。 首先，我们需要在项目中安装axios： ``` npm install axios --save ``` 然后，我们可以在src目录下新建一个api目录，用来存放所有的接口请求。在api目录下，我们可以新建一个request.js文件，用来封装axios请求： ``` import axios from 'axios'; // 创建axios实例 const service = axios.create({ baseURL: process.env.BASE_API, // api的base_url timeout: 5000 // 请求超时时间 }); // request拦截器 service.interceptors.request.use(config => { // 在请求发送之前做一些处理 return config; }, error => { // 处理请求错误 console.log(error); Promise.reject(error); }) // respone拦截器 service.interceptors.response.use( response => { // 在接收响应做一些处理，例如统一的错误处理 return response.data; }, error => { console.log('err' + error);// for debug return Promise.reject(error); } ) export default service; ``` 这里我们创建了一个axios实例，并进行了一些配置，例如设置请求超时时间、拦截请求和响应等。并且将其导出，其他地方可以直接引用该实例进行请求。 接下来，我们可以在api目录下新建一个模块，例如user.js，用来存放用户相关的接口请求。在user.js中，我们可以这样写： ``` import request from '@/api/request'; export function login(username, password) { return request({ url: '/user/login', method: 'post', data: { username, password } }) } export function getInfo(token) { return request({ url: '/user/info', method: 'get', params: { token } }) } ``` 这里我们引入了之前封装的axios实例，然后对外导出两个方法login和getInfo，分别用来请求登录和获取用户信息的接口。 最后，我们可以在Vue组件中使用这些接口，例如： ``` import { login, getInfo } from '@/api/user'; export default { name: 'Login', methods: { handleLogin() { login(this.username, this.password).then(response => { // 处理登录成功的逻辑 getInfo(response.token).then(info => { // 处理获取用户信息成功的逻辑 }) }) } } } ``` 这里我们引入了之前定义的login和getInfo方法，并在handleLogin方法中调用它们。需要注意的是，我们在处理登录成功后，还调用了getInfo方法来获取用户信息。这里我们可以看到，我们可以将多个请求串联起来进行处理。 在实际开发中，我们经常会遇到重复请求的问题，例如多次点击提交按钮或者页面切换时进行数据加载等。为了避免重复请求，我们可以对axios进行进一步封装，例如： ``` import axios from 'axios'; // 定义一个空的数组，用来存储每个请求的取消函数和标识 const pending = []; const CancelToken = axios.CancelToken; const removePending = (config) => { for (let i = 0; i < pending.length; i++) { if (pending[i].url === config.url + '&' + config.method) { pending[i].cancel(); // 取消重复请求 pending.splice(i, 1); // 删除已经取消的请求记录 } } } // 创建axios实例 const service = axios.create({ baseURL: process.env.BASE_API, // api的base_url timeout: 5000 // 请求超时时间 }); // request拦截器 service.interceptors.request.use(config => { // 在请求发送之前做一些处理 removePending(config); config.cancelToken = new CancelToken((c) => { pending.push({ url: config.url + '&' + config.method, cancel: c }); }); return config; }, error => { // 处理请求错误 console.log(error); Promise.reject(error); }) // respone拦截器 service.interceptors.response.use( response => { // 在接收响应做一些处理，例如统一的错误处理 removePending(response.config); return response.data; }, error => { console.log('err' + error);// for debug return Promise.reject(error); } ) export default service; ``` 这里我们定义了一个pending数组，用来存储每个请求的取消函数和标识。在每次请求发送之前，我们会先调用removePending函数，用来取消重复请求。在每次请求完成之后，我们会再次调用removePending函数，用来删除已经取消的请求记录。这样就可以避免重复请求的问题了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值