async/async/awaiting in async/async/asyncを終了する方法は？

async/awaitのコールバック関数を優雅に終了します

不確実な実行時間を使用してコールバック関数を安全に終了する方法は、非同期操作にAsync/awaitを使用する場合の一般的な課題です。この記事では、ASYNC/待望環境でのコールバック関数の出口を効果的に制御する方法を示すシナリオを提供します。

問題：コードは、MutationObserverを使用して、ボタンプロパティの変更を聞きます。プロパティが変更されたら、非同期関数を終了する必要があります。伝統的な約束の執筆は簡単に実装できますが、コードが複雑な場合、ネストされた約束は読みやすさと保守性を低下させます。目標は、コールバック関数の非同期関数を安全に終了する方法の問題を解決しながら、コードを非同期スタイルに書き換えることです。

サンプルコード：

 //約束の伝統的な執筆方法const a =（）：約束<void> => {
  新しい約束を返します（（resolve）=> {
    const callback =（mutations：mutationRecord []）=> {
      //ボタン属性の変更を聞くには、ここで関数Resolve（）を終了します。
    };
    const observer = new MutationObserver（callback）;
    observe.observe（buttonel、{astributes：true}）;

    // Promise関数を呼び出し、成功後にボタンクリックイベントをトリガーし、プロパティの変更p（）を聞きます。
      buttonel.click（）;
    }）;
  }）;
};

// async/async/awaitを使用してconst b = async（）：Promise<void> => {
  const callback =（mutations：mutationRecord []）=> {
    //ボタン属性の変更を聞いてください。ここで機能を終了する方法は？
  };
  const observer = new MutationObserver（callback）;
  observe.observe（buttonel、{astributes：true}）;

  // Promise関数を呼び出し、成功後にボタンクリックイベントをトリガーし、P（）を待っているプロパティの変更を聞きます。
  buttonel.click（）;
};</void></void>

解決：

Async/awaitのa関数と同じ関数を実装するには、 Promise.withResolvers()メソッドを使用できます。このメソッドは、約束と解決機能を含むオブジェクトを返します。

改善されたコード：

 const b = async（）：約束<void> => {
  const {promise、resolve} = promise.withResolvers<void> （）;

  const callback =（mutations：mutationRecord []）=> {
    解決する（）; //コールバック関数でResolve（）を呼び出して約束を解決します
  };
  const observer = new MutationObserver（callback）;
  observe.observe（buttonel、{astributes：true}）;

  待ってp（）;
  buttonel.click（）;
  約束を待っています。 //解決する約束を待ちます};</void></void>

互換性の説明：

Promise.withResolvers()は現在提案段階にあり、すべてのブラウザがネイティブにサポートされているわけではありません。互換性を確保するには、 core-jsなどのポリフィルが必要になる場合があります。同様に、TypeScriptユーザーはバージョン5.4以上に更新し、 tsconfig.jsonにesnextを含めるようにlibを構成する必要があります。

Promise.withResolvers()を使用すると、コールバック関数のresolve()を呼び出して約束を解決し、それにより非Yync/待ち関数の出口プロセスを効果的に制御し、複雑な約束のネストを回避し、コードの読みやすさと保守性を改善できます。

以上がasync/async/awaiting in async/async/asyncを終了する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。