ホームページ > ウェブフロントエンド > jsチュートリアル > Promise Chaining と Aync/await の違いは何ですか

Promise Chaining と Aync/await の違いは何ですか

Linda Hamilton
リリース: 2024-11-16 15:47:02
オリジナル
344 人が閲覧しました

Qual a diferença de Encadeamento de Promises e Aync/await

今日、私は非同期操作を扱うこれら 2 つの方法の違いについて自分自身が無知であることに直面したので、自分への備忘録として、この記事を書くために本を読んで調べてみることにしました。そして、他の開発者がこの違いをよりよく理解できるようになるかもしれません。

当時、私はどちらも同じことを行い、then() は解決されたデータを取得し、resolve と拒否は成功またはエラーで終了するために使用されることを説明する方法を多かれ少なかれ知っていました。 Async/await では、次のステップに進む前に結果を待つ必要がありました。それは完全に間違っていたわけではありませんが、もっと良い方法で説明できるはずです。

約束

Promise は、その名前が示すように、次の 3 つの主要な状態を経由するデータ戻りの「約束」です。

  1. 保留中: Promise がまだ解決または拒否されていないときの初期状態。
  2. 完了: 操作は正常に完了しました。
  3. 拒否されました: 操作が失敗し、エラーが検出されました。
const minhaPromise = new Promise((resolve, reject) => {
  let sucesso = true; // Apenas um exemplo condicional

  if (sucesso) {
    resolve("Operação concluída com sucesso!");
  } else {
    reject("Ocorreu um erro na operação.");
  }
});
ログイン後にコピー

プロミスチェーン

これは、async/await の前に Promise を処理する最も一般的な方法でした。 then()、catch()、finally() メソッドを使用します。

  • then(): 正常に解決されたデータを受信して​​操作するために使用されます。
  • catch(): Promise が拒否された場合のエラーを処理するために使用されます。
  • finally(): 結果に関係なくコードを実行するために使用されます。
minhaPromise
  .then((mensagem) => {
    console.log(mensagem); // "Operação concluída com sucesso!"
  })
  .catch((erro) => {
    console.error(erro); // Se der erro, isso será executado.
  })
  .finally(() => {
    console.log("Finalizando a execução da Promise"); // Sempre será executado.
  });
ログイン後にコピー

非同期/待機

async とマークされた関数は自動的に Promise を返し、await は Promise が解決されるまで実行を「一時停止」するために使用されます。

async function buscarDados() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const data = await response.json();
    console.log("Dados recebidos:", data);
  } catch (error) {
    console.error("Erro ao buscar dados:", error);
  }
}

buscarDados();
ログイン後にコピー

違い

Promise の連鎖により、特に複数の then() を連続して使用する場合、コードが非常にネストされる可能性があり、読み取りがより困難になります。

Async/await を使用すると、同期コードに似た方法で非同期コードを作成できるため、ロジックが読みやすく理解しやすくなります。特に複数の非同期操作を処理する必要がある場合、コードがよりクリーンになります。

さらに、async/await で try/catch を使用してエラーを処理する方法は、単に Promises で catch を使用するよりも直感的です。

以上がPromise Chaining と Aync/await の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート