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

 更新时间:2020年03月22日 16:27:07   转载 作者:KaysonLi  
这篇文章主要介绍了如何优雅地取消 JavaScript 异步任务,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

在程序中处理异步任务通常比较麻烦,尤其是那些不支持取消异步任务的编程语言。所幸的是,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 取消异步任务内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • firefox事件处理之自动查找event的函数(用于onclick=foo())

    firefox事件处理之自动查找event的函数(用于onclick=foo())

    在ie中,事件对象是作为一个全局变量来保存和维护的。 所有的浏览器事件,不管是用户触发的,还是其他事件, 都会更新window.event 对象。
    2010-08-08
  • JavaScript 对象深入学习总结(经典)

    JavaScript 对象深入学习总结(经典)

    JavaScript中,除了五种原始类型(即数字,字符串,布尔值,null,undefined)之外的都是对象了,所以,不把对象学明白怎么继续往下学习呢?本篇文章给大家分享javascript对象深入学习总结,小伙伴们跟着小编一起深入学习吧
    2015-09-09
  • 用Javascript轻松制作一套简单的抽奖系统

    用Javascript轻松制作一套简单的抽奖系统

    用Javascript轻松制作一套简单的抽奖系统...
    2006-12-12
  • JavaScript中0和

    JavaScript中0和""比较引发的问题

    这篇文章主要介绍了JavaScript中0和""比较引发的问题,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-05-05
  • JS设置时间无效问题的解决办法

    JS设置时间无效问题的解决办法

    在发送短信息验证码的时候要用到js设置时间倒序问题,有时候会导致js失效问题,怎么办呢?今天小编给大家分享JS设置时间无效问题的解决办法,需要的朋友参考下吧
    2017-02-02
  • Bootstrap每天必学之导航

    Bootstrap每天必学之导航

    Bootstrap每天必学之导航,本文讲解的就是大家在做项目时一定会接触到的导航,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 详解如何使用babel进行es6文件的编译

    详解如何使用babel进行es6文件的编译

    这篇文章主要介绍了详解如何使用babel进行es6文件的编译,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 利用CDN加速react webpack打包后的文件详解

    利用CDN加速react webpack打包后的文件详解

    下面小编就为大家分享一篇利用CDN加速react webpack打包后的文件详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • js实现上传图片并显示图片名称

    js实现上传图片并显示图片名称

    这篇文章主要为大家详细介绍了js实现上传图片并显示图片名称,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • JS常用正则表达式总结【经典】

    JS常用正则表达式总结【经典】

    这篇文章主要介绍了JS常用正则表达式,总结分析了常见的数字、字符、邮箱、身份证、电话等的正则验证技巧,需要的朋友可以参考下
    2017-05-05

最新评论