在平常开发中，经常会遇到重复请求的情况，也许是因为网络问题，也许是因为接口问题等等，传统做法是客户端采用防抖来限制用户发送接口的频率，一般出个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. 拥抱未来：GPT-4将如何改变我们的世界

    随着人工智能技术的迅猛发展,我们正迎来一个全新的智能时代.在这个时代的前沿,GPT-4作为开拓者和领航者,正在重新定义人机交互.创意创新和个性化服务的标准.无论是在商业领域.教育场景还是科研领域,GP ...

  2. [oeasy]python0109_tty_打字头_电传打字机_字模_点阵字库

    点阵字库 回忆上次内容 上次回顾了 字符字型 的 进化过程 从 谷腾堡 活字 到 罗马正字 和 意大利斜体   罗马帝国战斗力的征服 和 基督教文化传播 使得 拉丁字符 在日耳曼语地区广泛传播 种葡萄 ...

  3. 如何在 Vue 和 JavaScript 中截取视频任意帧图片

    如何在 Vue 和 JavaScript 中截取视频任意帧图片 大家好!今天我们来聊聊如何在 Vue 和 JavaScript 中截取视频的任意一帧图片.这个功能在很多场景下都非常有用,比如视频编辑. ...

  4. WCF异常System.ServiceModel.ProtocolException问题处理

    现象: 最近遇到了WCF 服务无法调用的错误,异常如下. System.ServiceModel.ProtocolException, System.ServiceModel, Version=4.0 ...

  5. Django 处理http请求之中间件

    Django处理http请求之中间件 by:授客 QQ:1033553122 欢迎加入全国软件测试交流QQ群:7156436 测试环境 Win7 Django 1.11 自定义中间件 中间件" ...

  6. java8interface的新特性：default，static，funcation

    default:默认方法 在类接口中可以直接定义的方法,实现接口的类可以直接使用 使用案例: public interface MyInterface { default void display() ...

  7. docker 网络互通

    自定义网络 查看所有的docker网络 网络模式 [root@docker ~]# docker network ls NETWORK ID NAME DRIVER SCOPE a4d70d5796e ...

  8. 对比python学julia（第三章：游戏编程）--（第四节）捕鱼达人（5）

    4.3.    编程实现 (续上) 3. 实现射击捕鱼 在第 3 个阶段,将按照"编程思路"中介绍的射击捕鱼的算法进行编程,实现让玩家操控大炮射击捕鱼.在"bydr&qu ...

  9. 【Java / JavaScript】AES加密解密

    Java封装的AES加密解密工具类: 几个重要的参数信息 - 需要指定一个密钥串sKey 密钥内容自定义 数字 + 字母 + 特殊符号 - 加密方式为 AES - AES下面的模式ECB - ECB下 ...

  10. blender建模渲染Tips

    blender渲染 灯光的三种方式 1,常规灯光:shift+A选择灯光. 2,世界环境光:右侧地球图标调整. 3,物体自发光:把渲染物体变成一个发光体来进行调节灯光. 渲染视窗的调节 ctrl+b裁 ...