JavaScript の約束を学びましょう。パート 約束とは何ですか?

JavaScript の約束を学びましょう。パート 1 — 約束とは何ですか?

JavaScript ファンの皆さん、今日は Promise について、そして Promise をより深く学び、理解する方法について説明します。多くの人がこれを複雑なテーマだと考えて混乱していますが、難しいことは何もありません。頻繁に練習すれば必ず専門家になれると私は保証します。今日の私の仕事は、皆さんが基本を理解できるように手助けし、約束の本質とそれが必要な理由を説明することです。

Promise とは何ですか? JavaScript で Promise が必要な理由は何ですか?

あなたが毎朝継続的に運動することを友達に約束し、それを実行したら通知すると想像してください。あなたの約束は、あなたやあなたの友人が自分の人生を歩むことを妨げるものではなく、彼らはあなたからの結論や行動を決めるために、誓約の成否についての通知を待っているだけです。

この小さな例は、イベントとしての Promise の性質と、このイベントによって接続される 2 人のアクターを示しています。この場合、消費者 (友達) とプロデューサー (あなた) です。

少し単純化すると、JavaScript でも Promise クラスと同じ動作が見られると言えます。これにより、JavaScript のメイン スレッドをブロックすることなく非同期タスクを実行し、終了時にサブスクライバーに通知することができます。私たちの約束。

使用方法を理解するために例を見てみましょう:

このコードを順番に見てみましょう:

1. エグゼキュータ関数 を使用して Promise インスタンスを作成します (これは Promise クラスのコンストラクターに渡す関数です)。

エグゼキューター関数は Promise の基礎であり、この関数は Promise が作成されると即座に呼び出されます。

executor 関数は 2 つの位置パラメータを受け取ります。1 つ目は解決メソッド、2 つ目は拒否メソッドです。これらのメソッドは両方とも、ある時間内に約束を完了する責任があります。

たとえば、私たちは毎朝起きて一週間運動することを約束しました。この場合、約束は丸 1 週間続きます。3 日目に約束を守れない場合は、reject メソッドを呼び出すことができます。そうすれば、約束を購読している全員がそのことを知ることができます。逆に、約束を守った場合は、7 日目に、resolve メソッドを呼び出して、友達に約束を守ることができたことを通知します。したがって、消費者 (あなたの友人) は、いつ結果を伝えるかには完全に無関係であることがわかります。消費者は、その結果をいつ伝えられるかということを確認するだけで済みます。

下の図は、考えられる Promise の状態を示しています。「保留中」、「履行済み」、「拒否済み」です。 Promise が開始されたばかりの場合、そのステータスは「保留中」になります。完了後は、完了するためにどのメソッドが呼び出されたかに応じて、「完了」または「拒否」のいずれかになります。

Promise Executor は複数回完了することができず、解決メソッドまたは拒否メソッドへの後続の呼び出しはすべて無視されることにも注意してください。

1. (解決または拒否メソッドを呼び出して) Promise を終了したと言った瞬間に、Promise を購読しているすべての人がペイロード付きの通知を受け取ります。これは Promise インスタンスの 2 つの特別なメソッド内で取得できます。 。それらのメソッドは次のとおりです: Promise.prototype.then および Promise.prototype.catch

Promise.prototype.then メソッドを使用すると、上記のスクリーンショットのように関数が 2 つのコールバックを受け入れるため、ポジティブなシナリオとネガティブなシナリオの両方を一度に処理できます。

Promise.prototype.catch を使用すると、次のような否定的なシナリオのみを処理できます。

そして Promise.prototype をそのままにして、ポジティブなシナリオに備えます。

また、Promise は、結果に関係なく実行されるべきコードを実行するために使用できるメソッドを提供します。このメソッドは Promise.prototype.finally:

です。

このメソッドは、以前の操作を完了またはクリーンアップするように設計されているため、何も取らず、何も返しません。たとえば、ユーザーにメッセージを表示したり、ローダーを非表示にしたりします。

わかりました。この時点で、Promise の基本については説明したので、API からのデータのリクエスト、生の HTTP 応答から JSON への変換、出力などの実際の例に進むことをお勧めします。コンソールへ:

ご覧のとおり、現実の世界でそれを使用した結果は、記事の冒頭で練習したスキルとそれほど変わりません。それでも、いくつかの新しいことに気づいたかもしれません:

• 以前の各 Promise.prototype.then ハンドラーと Promise.prototype.catch ハンドラーの結果は、次の Promise ハンドラーに渡されます。 Response.json メソッドは Promise を返し、実行されると JSON を返し、次のハンドラーを呼び出してその JSON を渡します。

• Promise.prototype.finally の場合、これは「目に見えない」ハンドラーであり、前の応答をそれ自体を介して次の応答に渡すと言えます。

すばらしいですね。この時点で、Promise とは何か、Promise の使用方法、Promise がどのような状態を持つことができるかについて、よりよく理解できたと思います。また、今日検討した重要なポイントを以下にリストします (チートシート):

まとめ：

• JavaScript Promise — 非同期操作を実行し、それが完了したときにコンシューマーに通知できる特別なオブジェクトです

• Promise インスタンスには「保留中」、「履行済み」、「拒否済み」の 3 つの状態があります

• Promise インスタンスには、「then」、「catch」、「finally」という 3 つの主なメソッドがあります。

• Promise.prototype.then — 拒否と成功の両方の結果を処理するように設計されています

• Promise.prototype.catch — 拒否された結果を処理するように設計されています

• Promise.prototype.finally — クリーンアップを機能させるように設計されています

• ハンドラーは任意の順序でチェーンでき、順番に実行されます

• 前の Promise の結果は次の Promise に反映されるため、Promise チェーンを拡張可能にするには、「finally」ハンドラーを除く毎回ハンドラーから Promise を返すことを忘れないようにする必要があります。

このトピックの今後の部分では、より高度な Promise テクニックについて説明し、その機能をさらに詳しく掘り下げていきますので、購読、いいね! をして、ぜひご注目ください!

以上がJavaScript の約束を学びましょう。パート 約束とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。