首頁 >web前端 >js教程 >如何取消 JavaScript 中的預輸入搜尋承諾?

如何取消 JavaScript 中的預輸入搜尋承諾?

Patricia Arquette
Patricia Arquette原創
2024-10-29 18:58:02869瀏覽

 How Can I Cancel Promises in JavaScript for Type-Ahead Search?

Promise - 是否可以強制取消Promise

在這種情況下,用戶正在執行預先輸入搜索,每次擊鍵都會觸發一個新的後端呼叫。隨著用戶輸入速度加快,較舊的請求變得無關緊要,需要取消。

ES6 中的 Promise,就目前而言,不支援開箱即用的取消。然而,我們正在進行透過 AbortController 引入取消功能的工作,AbortController 是一種跨平台原語,可以取消網路請求等非同步操作。

使用 AbortController

作為一種現代方法,AbortController 提供了一個訊號可用於取消傳回 Promise 的函數的物件。語法如下所示:

<code class="javascript">async function somethingIWantToCancel({ signal } = {}) {
  // Use the signal object to manually adapt code for cancellation support
  const onAbort = (e) => {
    // Handle cancellation logic here
  };
  signal.addEventListener('abort', onAbort, { once: true });
  try {
    const response = await fetch('...', { signal });
  } catch (e) {
    if (e.name === 'AbortError') {
      // Deal with cancellation in caller
    } else {
      throw e;
    }
  } finally {
    signal.removeEventListener('abort', onAbort);
  }
}</code>

在此範例中,somethingIWantToCancel 函數會採用訊號參數,該參數是 AbortController 的實例。 signal.addEventListener 偵聽器為 abort 事件註冊事件處理程序,該事件在操作取消時觸發。 finally 區塊可確保操作完成時刪除事件偵聽器。

替代方案

如果 AbortController 不是一個選項,另一種方法是使用第三方函式庫,例如 Bluebird,它提供取消功能。

另一個選擇是使用取消令牌。這涉及到將一個函數傳遞給可以呼叫以取消請求的方法。

結論

雖然 ES6 Promise 沒有原生取消支持,但 AbortController 和其他替代方案提供了取消非同步操作的方法在現代 JavaScript 中。對於較舊的場景,使用取消令牌或第三方程式庫仍然可以提供解決方案。

以上是如何取消 JavaScript 中的預輸入搜尋承諾?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn