プロミスチェーンから非同期/待機

JavaScriptを書くとき、私たちはしばしば他のタスクに依存するタスクに対処しなければなりません.したがって、以前のコールバック関数に依存する多くのネストされたコールバック関数が終了します.これはしばしばコールバック地獄と呼ばれます.
幸運にも、我々は現在我々を援助する約束と呼ばれる何かを得ました.

何が約束🤞🤞

約束は、将来のいくつかの時点で解決または拒否することができる値のプレースホルダーです.

JavaScriptでの約束の例を見てみましょう.

const data = (url) => {

  return fetch(url)

    .then(response => {

     if (response.status == 200) {

     return response.json();

     } else {

     throw new Error(response.status);
     }

    });

};

Async / waitとは♾⌛️

最後にasync/waitに移動しましょう!まず最初に:async waitは約束のための完全な交換ではありません.
async/waitは約束の上に構築され、より快適に非同期コードを書くことができます.それは、約束とコールバック以外に、非同期コードを書くただ新しい方法です.それはあまりにも“同期”に見えるようになります.

では、同じコードを再使用してみましょうAsync/Await .

const data = async url => {

    try {

     const response = await fetch(url);

     if (response.status != 200) {

     throw new Error(response.status);

     }

     const responseData = await response.json();

     return responseData;

    } catch (err) {

     // Failed to fetch the data

     throw new Error(err);

    }

};

どちらが好きですか.私の意見では、使用するときにコードで何が起こるかを理解するのはより明確ですasync/await .

何が起こっている

キーワードを使用していることに注意してくださいasync メソッドヘッダーで.これは、関数が常に約束を返すことを意味します.キーワードawait キーワードを指定する場合にのみ動作しますasync メソッドヘッダーで.
キーワードawait 約束が解決/拒否されるまでコードを待ちます、そして、それが解決/拒否されるならば、それは結果/エラーを返します.約束が解決されるまで、エンジンは他のスクリプトを実行するような他のことを実行することができます.
上の例では、const response = await fetch(url); そして、約束が解決されたあとだけ続きます.つまり、URLが“フェッチ”されるということです.定数の応答は、そのURLが何でも戻るように割り当てられます.その後、コードが再開します.

Async / Waitを使用する利点?

エラー処理

同じスタックの同期コードと非同期コードのエラースタックとデバッグを行うことができます.その結果、より良いエラー処理を提供します.見込みを解決する際にエラーがあるならば、コントロールはエラーを扱うためにキャッチ・ブロックにジャンプします.上から2番目のコードスニペットを見てください.
あなたも、同じtryブロックで複数の約束をラップすることができますし、コードはすべての約束からのエラーをキャッチします.また、どこでエラーが発生したかを示します.

クリーンで簡潔

それは私たちが明確かつ良いコードを書くことができます.
これは、いくつかの行のコードを持つとき、それが明白でない利点です.しかし、一度多くのコードを書き始めると、それは簡潔に多くの助けになります.

条件

あなたのコードでより少ない条件演算子を使用すること.古典的な約束を使用して最初のコードのスニペットは簡単です.あなたが4つ以上のif文を持っていると想像してください.それはすぐに手を取得します.

結論

この記事から何を覚えていますか.

追加async メソッドヘッダーには、必ず約束を返します.それに加えて、それを使用することができますawait キーワード.したがって、約束が解決されるまで待つことができます.

コードをより明確に、理解しやすく、より簡潔になります.

使用await キーワードを実行すると、約束が解決されるか拒否されるまでコードをブロックします.

時promise 解決できません.例外を生成します.

お読みありがとうございます👨💻.