ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript で async/await と .then() を組み合わせる必要があるのはなぜですか?

JavaScript で async/await と .then() を組み合わせる必要があるのはなぜですか?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-11-03 11:45:291034ブラウズ

When and Why Should We Combine async/await with .then() in JavaScript?

Async/Await と .then() を Promise 変換と組み合わせる

JavaScript では、async/await は非同期操作を処理するための強力なメカニズムです。ただし、特に Promise を非同期関数に変換する場合、async/await と .then() を組み合わせると便利な状況もあります。

次の例を考えてみましょう:

<code class="javascript">async apiCall(params) {
    var results = await this.anotherCall()
      .then(results => {
        //do any results transformations
        return results;
      })
      .catch(error => {
        //handle any errors here
      });
    return results;
  }</code>

ここの場合、anotherCall() メソッドは Promise を返し、これは .then().catch() を使用して非同期関数に変換されます。これにより、結果を返す前に必要な変換やエラー処理を実行できるようになります。

一部の開発者は、コンパクトさのために try/catch の代わりに .catch() で async/await を使用することを好みます。例:

<code class="javascript">async function asyncTask() {
  throw new Error('network')
}
async function main() {
  const result = await asyncTask().catch(error => console.error(error));
  console.log('result:', result)
}

main();</code>

この例では、asyncTask() 関数がエラーをスローし、このエラーは await 呼び出し内の .catch() メソッドによってキャッチされます。これにより、エラーの伝播が防止され、main() 関数内でエラーを適切に処理できるようになります。

元の Promise が返された場合でも、.then() メソッドは新しい Promise を作成して返すことに注意することが重要です。 anotherCall() によってすでに解決されています。この動作は、特に .then() を使用して複数の Promise が連鎖している場合に、予期しない副作用を引き起こす可能性があります。

以上がJavaScript で async/await と .then() を組み合わせる必要があるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。