DDR爱好者之家

如何优雅地取消 JavaScript 异步任务
站长资源 2024/11/24 佚名
74 1538
DDR爱好者之家 Design By 杰米

在程序中处理异步任务通常比较麻烦，尤其是那些不支持取消异步任务的编程语言。所幸的是，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"htmlcode">



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，没必要再往下执行了。

到这里我们就实现了一个完整的可取消的异步函数，以后碰到需要处理异步任务的地方就可以派上用场了。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米