如何优雅地取消 JavaScript 异步任务


Posted in Javascript onMarch 22, 2020

在程序中处理异步任务通常比较麻烦,尤其是那些不支持取消异步任务的编程语言。所幸的是,JavaScript 提供了一种非常方便的机制来取消异步任务。

中断信号

自从 ES2015 引入了  Promise ,开发者有了取消异步任务的需求,随后推出的一些 Web API 也开始支持异步方案,比如 Fetch API。TC39 委员会(就是制定 ECMAScript 标准的组织)最初尝试定义一套通用的解决方案,以便后续作为 ECMAScript 标准。但是后来讨论不出什么结果来,这个问题也就搁置了。鉴于此,WHATWG (HTML 标准制定组织)另起炉灶,自己搞出一套解决方案,直接在 DOM 标准上引入了 AbortController。这种做法的坏处显而易见,因为它不是语言层面的 ECMAScript 标准,因此 Node.js 平台也就不支持  AbortController 

在 DOM  规范里, AbortController 设计得非常通用,因此事实上你可以用在任何异步 API 中。目前只得到 Fetch API 的官方支持,但你完全可以用在自己的异步代码里。

在开始介绍之前,我们先看下 AbortController 的工作原理:

const abortController = new AbortController(); // 1
const abortSignal = abortController.signal; // 2

fetch( 'http://kaysonli.com', {
 signal: abortSignal // 3
} ).catch( ( { message } ) => { // 5
 console.log( message );
} );

abortController.abort(); // 4

上面的代码很简单,首先创建了AbortController的一个实例(1),并将它的 signal 属性赋值给一个变量(2)。然后调用fetch()并传入 signal 参数(3)。取消请求时调用 abortController.abort()(4)。这样就会自动执行fetch() 的 reject ,也就是进入catch()部分(5)。

它的signal属性是核心所在。该属性是 AbortSignal DOM 接口的实例,它有一个 aborted属性,带有是否调用了 abortController.abort()的相关信息。还可以在上面监听abort事件,该事件在abortController.abort()调用时触发。简单来说,AbortController 就是AbortSignal的一个公开接口。

可取消的函数

假设有一个执行复杂计算的异步函数,为简单起见,我们就用定时器模拟:

function calculate() {
 return new Promise( ( resolve, reject ) => {
  setTimeout( ()=> {
   resolve( 1 );
  }, 5000 );
 } );
}

calculate().then( ( result ) => {
 console.log( result );
} );

可能的情况是,用户想取消这种耗时的任务。我们用一个按钮来开始和停止:

<button id="calculate">Calculate</button>

<script type="module">
 document.querySelector( '#calculate' ).addEventListener( 'click', async ( { target } ) => { // 1
  target.innerText = 'Stop calculation';

  const result = await calculate(); // 2

  alert( result ); // 3

  target.innerText = 'Calculate';
 } );

 function calculate() {
  return new Promise( ( resolve, reject ) => {
   setTimeout( ()=> {
    resolve( 1 );
   }, 5000 );
  } );
 }
</script>

上面的代码给按钮绑定了一个异步的 click 事件处理器(1),并在里面调用了 calculate() 函数(2)。5 秒后会弹出对话框显示结果(3)。顺便提一下,script[type=module]可以让 JavaScript 代码进入严格模式,跟 'use strict' 的效果一样。

增加中断异步任务的功能:

{ // 1
 let abortController = null; // 2

 document.querySelector( '#calculate' ).addEventListener( 'click', async ( { target } ) => {
  if ( abortController ) {
   abortController.abort(); // 5

   abortController = null;
   target.innerText = 'Calculate';

   return;
  }

  abortController = new AbortController(); // 3
  target.innerText = 'Stop calculation';

  try {
   const result = await calculate( abortController.signal ); // 4

   alert( result );
  } catch {
   alert( 'WHY DID YOU DO THAT?!' ); // 9
  } finally { // 10
   abortController = null;
   target.innerText = 'Calculate';
  }
 } );

 function calculate( abortSignal ) {
  return new Promise( ( resolve, reject ) => {
   const timeout = setTimeout( ()=> {
    resolve( 1 );
   }, 5000 );

   abortSignal.addEventListener( 'abort', () => { // 6
    const error = new DOMException( 'Calculation aborted by the user', 'AbortError' );

    clearTimeout( timeout ); // 7
    reject( error ); // 8
   } );
  } );
 }
}

代码变长了很多,但是别慌,理解起来也不是很难。

最外层的代码块(1)相当于一个 IIFE(立即执行的函数表达式),这样变量 abortController(2)就不会污染全局了。

首先把它的值设为null,并且它的值随着按钮点击而改变。随后给它赋值为AbortController的一个实例(3),再把实例的signal属性直接传给 calculate()函数(4)。

如果用户在 5 秒之内再次点击按钮,就会执行abortController.abort()函数(5)。这样就会在刚才传给 calculate()的AbortSignal实例上触发 abort 事件(6)。

在 abort 事件处理器里面清除定时器(7),然后用一个适当的异常对象拒绝 Promise(8)。

根据 DOM 规范,这个异常对象必须是一个'AbortError' 类型的DOMException

这个异常对象最终传给了catch (9) 和finally (10)。

但是还要考虑这样一种情况:

const abortController = new AbortController();

abortController.abort();
calculate( abortController.signal );

这种情况下 abort 事件不会触发,因为它在signal传给calculate() 函数前就执行了。为此我们需要改造下代码:

function calculate( abortSignal ) {
 return new Promise( ( resolve, reject ) => {
  const error = new DOMException( 'Calculation aborted by the user', 'AbortError' ); // 1

  if ( abortSignal.aborted ) { // 2
   return reject( error );
  }

  const timeout = setTimeout( ()=> {
   resolve( 1 );
  }, 5000 );

  abortSignal.addEventListener( 'abort', () => {
   clearTimeout( timeout );
   reject( error );
  } );
 } );
}

异常对象的定义移到了顶部(1),这样就可以在两个地方重用了。另外,多了个条件判断abortSignal.aborted(2)。如果它的值是true,calculate()函数应该立即拒绝 Promise,没必要再往下执行了。
到这里我们就实现了一个完整的可取消的异步函数,以后碰到需要处理异步任务的地方就可以派上用场了。

到此这篇关于如何优雅地取消 JavaScript 异步任务的文章就介绍到这了,更多相关JavaScript 取消异步任务内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery创建div 实现代码
Apr 27 Javascript
js 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
基于jQuery的左右滚动实现代码
Dec 03 Javascript
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
JavaScript单元测试ABC
Apr 12 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
Vue.js组件间通信方式总结【推荐】
Nov 23 Javascript
如何手写一个简易的 Vuex
Oct 10 Javascript
Vue-cli3多页面配置详解
Mar 22 #Javascript
redux处理异步action解决方案
Mar 22 #Javascript
JS+CSS实现3D切割轮播图
Mar 21 #Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 #Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 #jQuery
微信小程序保持session会话的方法
Mar 20 #Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 #Javascript
You might like
实现“上一页”和“下一页按钮
2006/10/09 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
js获取图片长和宽度的代码
2009/11/24 Javascript
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
理解Python垃圾回收机制
2016/02/12 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
pytorch masked_fill报错的解决
2020/02/18 Python
Python错误的处理方法
2020/06/23 Python
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
2015年网络管理员工作总结
2015/05/21 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
小学生大队委竞选稿
2015/11/20 职场文书
Django与数据库交互的实现
2021/06/03 Python