在程序中處理異步任務(wù)通常比較麻煩，尤其是那些不支持取消異步任務(wù)的編程語言。所幸的是，JavaScript 提供了一種非常方便的機(jī)制來取消異步任務(wù)。

中斷信號

自從 ES2015 引入了  Promise ，開發(fā)者有了取消異步任務(wù)的需求，隨后推出的一些 Web API 也開始支持異步方案，比如 Fetch API。TC39 委員會（就是制定 ECMAScript 標(biāo)準(zhǔn)的組織）最初嘗試定義一套通用的解決方案，以便后續(xù)作為 ECMAScript 標(biāo)準(zhǔn)。但是后來討論不出什么結(jié)果來，這個問題也就擱置了。鑒于此，WHATWG （HTML 標(biāo)準(zhǔn)制定組織）另起爐灶，自己搞出一套解決方案，直接在 DOM 標(biāo)準(zhǔn)上引入了 AbortController。這種做法的壞處顯而易見，因?yàn)樗皇钦Z言層面的 ECMAScript 標(biāo)準(zhǔn)，因此 Node.js 平臺也就不支持  AbortController 。

在 DOM  規(guī)范里， AbortController 設(shè)計(jì)得非常通用，因此事實(shí)上你可以用在任何異步 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

上面的代碼很簡單，首先創(chuàng)建了AbortController的一個實(shí)例（1），并將它的 signal 屬性賦值給一個變量（2）。然后調(diào)用fetch()并傳入 signal 參數(shù)（3）。取消請求時調(diào)用 abortController.abort()（4）。這樣就會自動執(zhí)行fetch() 的 reject ，也就是進(jìn)入catch()部分（5）。

它的signal屬性是核心所在。該屬性是 AbortSignal DOM 接口的實(shí)例，它有一個 aborted屬性，帶有是否調(diào)用了 abortController.abort()的相關(guān)信息。還可以在上面監(jiān)聽abort事件，該事件在abortController.abort()調(diào)用時觸發(fā)。簡單來說，AbortController 就是AbortSignal的一個公開接口。

可取消的函數(shù)

假設(shè)有一個執(zhí)行復(fù)雜計(jì)算的異步函數(shù)，為簡單起見，我們就用定時器模擬：

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

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

可能的情況是，用戶想取消這種耗時的任務(wù)。我們用一個按鈕來開始和停止：

<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），并在里面調(diào)用了 calculate() 函數(shù)（2）。5 秒后會彈出對話框顯示結(jié)果（3）。順便提一下，script[type=module]可以讓 JavaScript 代碼進(jìn)入嚴(yán)格模式，跟 'use strict' 的效果一樣。

增加中斷異步任務(wù)的功能：

{ // 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）相當(dāng)于一個 IIFE（立即執(zhí)行的函數(shù)表達(dá)式），這樣變量 abortController（2）就不會污染全局了。

首先把它的值設(shè)為null，并且它的值隨著按鈕點(diǎn)擊而改變。隨后給它賦值為AbortController的一個實(shí)例（3），再把實(shí)例的signal屬性直接傳給 calculate()函數(shù)（4）。

如果用戶在 5 秒之內(nèi)再次點(diǎn)擊按鈕，就會執(zhí)行abortController.abort()函數(shù)（5）。這樣就會在剛才傳給 calculate()的AbortSignal實(shí)例上觸發(fā) abort 事件（6）。

在 abort 事件處理器里面清除定時器（7），然后用一個適當(dāng)?shù)漠惓ο缶芙^ Promise（8）。

根據(jù) DOM 規(guī)范，這個異常對象必須是一個'AbortError' 類型的DOMException。

這個異常對象最終傳給了catch (9) 和finally （10）。

但是還要考慮這樣一種情況：

const abortController = new AbortController();

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

這種情況下 abort 事件不會觸發(fā)，因?yàn)樗趕ignal傳給calculate() 函數(shù)前就執(zhí)行了。為此我們需要改造下代碼：

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()函數(shù)應(yīng)該立即拒絕 Promise，沒必要再往下執(zhí)行了。
到這里我們就實(shí)現(xiàn)了一個完整的可取消的異步函數(shù)，以后碰到需要處理異步任務(wù)的地方就可以派上用場了。

到此這篇關(guān)于如何優(yōu)雅地取消 JavaScript 異步任務(wù)的文章就介紹到這了,更多相關(guān)JavaScript 取消異步任務(wù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論