如何优雅地取消 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与WebMethod投票功能实现代码
Jan 19 Javascript
jQuery 常见操作实现方式和常用函数方法总结
May 06 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
js实现中文实时时钟
Jan 15 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 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
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
用jscript实现新建word文档
2007/06/15 Javascript
javascript 写类方式之六
2009/07/05 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
python实现合并两个数组的方法
2015/05/16 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
试用期转正鉴定评语
2014/01/27 职场文书
广播体操比赛口号
2014/06/10 职场文书
房产公证委托书范本
2014/09/20 职场文书
写给医院的感谢信
2015/01/22 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书