Javascript — ES8「async / await」関数の紹介

なぜ人々がES8の非同期/待機機能に非常に興奮しているのかについてある程度の見通しを得るには、JSでの非同期動作とソリューションの進化に精通している必要があります。

コールバック

より正確には、コールバック内のコールバック内のコールバック…

コールバック地獄

コールバックにはいくつかの問題があります。構築するだけでなく、追跡することも困難です。それらは形が硬直しています。彼らはくて扱いにくい。これにより、最終的に「コールバック地獄」という用語が主流になりました。

コールバックは目的を果たしますが、複雑なリレーショナルデータを使用して、より複雑なアプリケーションやナビゲーションパターンで作業を開始する場合は、より優れたソリューションが必要です。 PROMISESを入力します。

約束

人々に力を取り戻しましょう。

約束は、JSの非同期の問題に対するより洗練されたソリューションです。 Promiseオブジェクトは、非同期操作の最終的な完了(または失敗)、およびその結果の値を表します。約束は常に3つの状態のいずれかです。

  • 保留中:初期状態。履行も拒否もされません。
  • 満たされた:操作が正常に完了したことを意味します。
  • rejected:操作が失敗したことを意味します。

保留中のプロミスは満たすか拒否することができます。その時点で、成功の場合は.then()を介して、エラーの場合は.catch()を介して適切なハンドラーが呼び出されます。

留意すべき主な点:約束は、非同期操作の最終的な結果を表します。

いくつかのコードを見てみましょう:

基本的な約束の例

実世界の約束の例

34〜36行目は、コールバックの例よりもはるかにきれいであることがわかります。

改善されましたが、まだ問題があります。コールバックを使用する場合と同様に、最終的には約束のピラミッドに陥ることがあります。 promiseのループは微妙で直感的ではありません。catch()やdeferredなどを使用することも忘れないでください。

非同期/待機機能を入力します。

ES8の非同期/待機関数

次に、JSの非同期ソリューションの最新の反復であるasync / await関数を見てみましょう。

非同期関数の宣言は、AsyncFunctionオブジェクトを返す非同期関数を定義します。

非同期関数が呼び出されると、Promiseが返されます。非同期関数が値を返すと、Promiseは返された値で解決されます。非同期関数が例外または何らかの値をスローすると、Promiseはスローされた値で拒否されます。

非同期関数にはawait式を含めることができます。これは、非同期関数の実行を一時停止し、渡されたPromiseの解決を待ってから、非同期関数の実行を再開し、解決された値を返します。

いくつかのコードを見てみましょう:

この例では、STANDARD PROMISEが動作し、その後にASYNC / AWAITで実装された同じコードが表示されます

標準プロミスvs async / await

promiseのチェーン(4–11)ではなく、単一の関数(16–23)に同じコードを書くことができます。

コードにasync / awaitの実装を開始する主な理由は、スレッドをブロックすることなく、非同期に実行および実行されるコードを作成できるためです。

ES6の非同期/待機関数については以上です。あなたの考えや質問を教えてください。ツイッターでフォローしてください。それを守ってください。

この記事が気に入ったら、他の人がそれを見つけられるように、お勧めして共有してください!