1年前にプロミスが導入されて以来、私は非常に興奮しています。 多くの投稿や意見が飛び交っていますが、プロミスはあなたのコードをより高性能にするわけではありません…彼らはコードを読みやすく、理解しやすくします（私の本では、それはしばしばもっと重要です！）
この投稿の最初の部分では、プロミスの基本的な構造を説明します。
Promises explained in plain english
Javascript における Promise の基本構造は次のとおりです：
かなり典型的（かつ、つかみどころのない）コードのスニペットをここに記載します。
手始めに、1～15 行目に注目してください。
- インスタンス化があります。 この行は基本的にプロミスを作成します。 JSのプロミスは、何かをすること、つまりタスクが必要です。 ここで渡される関数 – function (resolve,reject) {…} がそのタスクです
- 次にタスクの本体が表示されます。 ここでいろいろなことができます。 このコードのブロックのどこかで、物事がうまくいったかどうかを判断する必要があります。 たとえば、画像を取得するためにこのスペースを使用していた場合、画像を受信したか (うまくいった)… あるいは受信しなかった (うまくいかなかった) かのいずれかです。
- うまくいった場合、この約束を “resolved” としてマークするいくつかの関数を呼び出します。 計画通りに行かなかった場合は、この約束を「拒否」することになります。 (これについては後で詳しく説明します)
では、コードスニペットの残りの部分、17-27 行に注目してみましょう。
- これまで、1-15 行では Promise オブジェクトを定義しただけでした
- 17 行目の & 22 では、基本的にそれにハンドラを取り付けています
- promise.Promise.Promise というハンドラもあります。XXXX (XXX は “.then” や “.catch” など) は基本的にプロミスで定義された関数を実行します (1～15行目)。 解決したか拒否されたかに基づいて、それぞれ “.then” と “.catch” にある関数を呼び出します。
NOTE:
- “.then(function)” はPromiseを返します。 また、Promise オブジェクトに対してのみ “.then(…)” または “.catch(…)” を呼び出すことができます。
さて、基本をカバーしたので、Promise でできることのもっと興味深い例を見てみましょう。
Chaining Promises to perform multiple requests
Problem.Of .Promiseを使用して、複数のリクエストを実行することができます。 最近、私は大量の URL を次々と取得する必要がある状況に遭遇しました。 しかし、各 URL の応答は URL に基づいて異なる方法で処理する必要がありました。
この記事のために、取得する URL が
- google.com
- apple.com
- amazon.com
だと仮定しましょう。com
これを処理するために使用したスクリプトの簡略版を以下に示します。
さらに明確にするために、プロミスチェーンを見る方法を示します。
この方法で、各 URL を順に取得し、希望どおりに処理し、チェーン内の次の Promise を起動する “resolved()” 関数を実行できます …:
注意: 上記のコード スニペットをブラウザーで実行しようとする場合、CORS を有効にする必要があります。 クリックするだけでこれを実行できる Chrome 拡張機能があります。
この投稿を楽しんでいただけたら幸いです。