在平常开发中，经常会遇到重复请求的情况，也许是因为网络问题，也许是因为接口问题等等，传统做法是客户端采用防抖来限制用户发送接口的频率，一般出个loading转圈圈的形式，

但是很少使用取消请求的做法，现在我来记录一下，如何采用闭包来封装一个可取消请求的函数，首先需要了解的是

1. 闭包

2. AbortController()

这里对上述不做赘述，直接上代码：

需要注意的是，AbortController构造函数返回的实例，所包含的abort函数是一次性的，也就是说一个abort实例只能对应一个xhr请求，只能使用一次abort.abort()

理解了这一点，那么我们就可以很容易的借助闭包来实现这样一个装饰器函数：

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  </head>

  <body>

    <button id="send">send request</button>

    <script>

      document.getElementById("send").addEventListener("click", () => {

        getListAbortable()

          .then((res) => {

            console.log("数据:", res);

          })

          .catch((e) => {

            console.log("请求错误:", e);

          });

      });

      function AbortRequest(callback) {

        let abortable = null;

        return function () {

          if (abortable) {

            abortable.abort();

          }

          abortable = new AbortController();

          return callback(abortable.signal);

        };

      }

      const getListAbortable = AbortRequest((signal) => {

        return axios.get("/slow", { signal });

      });

    </script>

  </body>

</html>

当我快速点击按钮的时候，会自动取消上一次xhr请求，并发送下一次xhr请求，直到请求完成。

这样就实现啦！

使用js闭包实现可取消的axios请求的更多相关文章

  1. vue axios 请求本地接口端口不一致出现跨域设置代理

    首先在config下面的index.js,设置跨域代理 在axios请求的时候     用'/api/' 替代baseURL 最重要的就是设置完必须重新 npm run dev 否则不生效

  2. js闭包的作用域以及闭包案列的介绍：

    转载▼ 标签: it   js闭包的作用域以及闭包案列的介绍:   首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...

  3. 大部分人都会做错的经典JS闭包面试题

    由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) ...

  4. Js闭包常见三种用法

        Js闭包特性源于内部函数可以将外部函数的活动对象保存在自己的作用域链上,所以使内部函数的可以将外部函数的活动对象占为己有,可以在外部函数销毁时依然存有外部函数内的活动对象内容,这样做的好处是可 ...

  5. js闭包之初步理解（ JavaScript closure）

    闭包一直是js中一个比较难于理解的东西,而平时用途又非常多,因此不得不对闭包进行必要的理解,现在来说说我对js闭包的理解. 要理解闭包,肯定是要先了解js的一个重要特性, 回想一下,那就是函数作用域, ...

  6. (原创)JS闭包看代码理解

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  7. js闭包理解

    js闭包的作用是使函数外可以访问函数内部的变量,是通过 在函数内部 定义 访问函数内变量 的函数实现的,内部的一个函数产生一个闭包 function a() { var i=0; return fun ...

  8. js闭包理解实例小结

    Js闭包 闭包前要了解的知识  1. 函数作用域 (1).Js语言特殊之处在于函数内部可以直接读取全局变量 <script type="text/javascript"> ...

  9. Js闭包的用途

    本来想总结一点JavaScript中的闭包的一些用法,在查资料的时候发现了一篇很好的文章,就转过来收藏了,下面附上传送门: js闭包的用途 ---------sunlylorn 我们来看看闭包的用途. ...

  10. js闭包和ie内存泄露原理

    也议 js闭包和ie内存泄露原理 可以, 但小心使用. 闭包也许是 JS 中最有用的特性了. 有一份比较好的介绍闭包原理的文档. 有一点需要牢记, 闭包保留了一个指向它封闭作用域的指针, 所以, 在给 ...

随机推荐

  1. IDEA之NexChatGPT插件【工欲善其事必先利其器】

    国内有热心的程序员开发了一款NexChatGPT插件,安装后开箱即用十分方便,打字机展示的效果也很流畅,另外插件内还外链了国内能直接访问的ChatGPT,非常推荐试一下,IDEA插件NexChatGP ...

  2. Nginx使用upstream实现动静分离

    一.为什么要进行动静分离 分离资源,减少不必要到的请求消耗,减少请求延时. 注:我这里,是nginx处理静态资源,apache处理动态资源. 场景分析: 1.未分离之前的场景步骤 (1)客户端请求ur ...

  3. vue --version 显示的却是vue cli的版本号，为什么？

    vue --version 显示的却是vue cli的版本号,为什么? 如果您在运行 vue --version 命令时显示的是 Vue CLI 的版本号,而不是 Vue.js 的版本号,那可能是因为 ...

  4. ctfshow sql-labs(笔记)

    这是当时做题的时候记得笔记有些乱看不懂的可以私我 判断闭合方式: id=1' and 1=1–+ *正常回显* id=1' and 1=2–+ *异常回显* id=1 and 1=1 *正常回显* i ...

  5. ICPC游记

    \[\Large\color{#FCAEBD}『2024ICPC河南站 游记』 \] Day 0 晚上打了场 \(ABC\),快成屎了,最后竟然还加分了. 晚上回家洗了个澡,收拾收拾东西,凌晨2点就睡 ...

  6. Flink 内存配置学习总结

    设置进程内存(Process Memory) Apache Flink通过严格控制其各种组件的内存使用,在JVM之上提供高效的工作负载. 配置总内存(Total Memory) Flink JVM进程 ...

  7. c++代码实现 RSA的简易demo【偏向实践】

    写在前面 [如果你还没搞明白算法具体步骤建议先去看视频了解,本demo旨在简单实践该算法] 本实践在理论上是成立的,但由于计算x的时候很容易溢出,所以观者可以理解该简易demo后对数据进行处理[以字符 ...

  8. 【vue3】详解单向数据流，大家千万不用为了某某而某某了。

    总览 Vue3 的单向数据流 尽信官网,不如那啥. vue的版本一直在不断更新,内部实现方式也是不断的优化,官网也在不断更新. 既然一切皆在不停地发展,那么我们呢?等着官网更新还是有自己的思考? 我觉 ...

  9. 【Java】利用反射更改String的字符

    问题: 在不改变s变量引用的String对象的情况下,输出打印"abcd" /*** * * @param args * @return void * @author cloud9 ...

  10. 【SpringMVC】03 使用注解

    第一步还是配置web.xml,使用分发器统一处理请求和加载容器文件 <?xml version="1.0" encoding="UTF-8"?> & ...