Async/Await中回調函數如何優雅退出？

在Async/Await中優雅地終止回調函數

使用async/await進行異步操作時，如何安全地從一個執行時間不確定的回調函數中退出，是一個常見挑戰。本文將針對一個場景，演示如何在async/await環境下有效控制回調函數的退出。

問題：代碼使用MutationObserver監聽按鈕屬性變化，屬性變化時需要退出異步函數。 Promise的傳統寫法易於實現，但代碼複雜時，嵌套的Promise會降低可讀性和可維護性。目標是將代碼改寫為async/await風格，同時解決如何在回調函數中安全退出異步函數的問題。

示例代碼：

 // 使用Promise的傳統寫法const a = (): Promise<void> => {
  return new Promise((resolve) => {
    const callback = (mutations: MutationRecord[]) => {
      // 監聽按鈕屬性變化，在此處退出函數resolve();
    };
    const observer = new MutationObserver(callback);
    observer.observe(buttonEl, { attributes: true });

    // 調用Promise函數，成功後觸發按鈕點擊事件，然後監聽屬性變化p().then(() => {
      buttonEl.click();
    });
  });
};

// 使用async/await的寫法const b = async (): Promise<void> => {
  const callback = (mutations: MutationRecord[]) => {
    // 監聽按鈕屬性變化，如何在此處退出函數？
  };
  const observer = new MutationObserver(callback);
  observer.observe(buttonEl, { attributes: true });

  // 調用Promise函數，成功後觸發按鈕點擊事件，然後監聽屬性變化await p();
  buttonEl.click();
};</void></void>

解決方案：

為了在async/await中實現與a函數相同的功能，可以使用Promise.withResolvers()方法。此方法返回一個包含Promise和resolve函數的對象。

改進後的代碼：

 const b = async (): Promise<void> => {
  const { promise, resolve } = Promise.withResolvers<void> ();

  const callback = (mutations: MutationRecord[]) => {
    resolve(); // 在回調函數中調用resolve()來解決Promise
  };
  const observer = new MutationObserver(callback);
  observer.observe(buttonEl, { attributes: true });

  await p();
  buttonEl.click();
  await promise; // 等待Promise解決};</void></void>

兼容性說明：

Promise.withResolvers()目前處於提案階段，並非所有瀏覽器都原生支持。為了保證兼容性，可能需要使用polyfill，例如core-js 。 同樣，TypeScript用戶需要更新到5.4或更高版本，並在tsconfig.json中配置lib包含esnext 。

通過Promise.withResolvers() ，可以在回調函數中調用resolve()來解決Promise，從而有效地控制async/await函數的退出流程，避免複雜的Promise嵌套，提高代碼的可讀性和可維護性。

以上是Async/Await中回調函數如何優雅退出？的詳細內容。更多資訊請關注PHP中文網其他相關文章！