如何优雅地取消 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 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
jQuery实现的经典滑动门效果
Sep 22 Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 Javascript
React组件生命周期详解
Jul 03 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 Javascript
JavaScript如何操作css
Oct 24 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
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
ThinkPHP权限认证Auth实例详解
2014/07/22 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
Golang与python线程详解及简单实例
2017/04/27 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
python处理RSTP视频流过程解析
2020/01/11 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
几个SQL的面试题
2014/03/08 面试题
介绍一下JMS编程步骤
2015/09/22 面试题
几个判断型的面试题
2012/07/03 面试题
企业军训感想
2014/02/07 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
师德师风事迹材料
2014/12/20 职场文书
同学聚会通知短信
2015/04/20 职场文书
家长意见书
2015/06/04 职场文书
小学生教师节广播稿
2015/08/19 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
详解JVM系列之内存模型
2021/06/10 Javascript