JavaScript非同期プログラミングのコード記述仕様 お約束学習ノート_JavaScriptスキル

最近仕事が少し楽になってきましたが、前にいつも見ていた約束という単語を思い出したので、しばらく根気よく勉強しました。

1: 約束とは何ですか?なぜこんなものがあるんですか？

まず第一に、Promise は JavaScript 非同期プログラミングでのコード記述の問題を解決するために作成されました。
JavaScript の発展に伴い、非同期シナリオがますます増えています。フロントエンドには AJAX、setTimeout などがあり、バックエンド Node はより非同期です。従来のアプローチによれば、さまざまなコールバックがコールバックに埋め込まれます。コードが混乱する可能性があります。
このとき、CommonJS コミュニティは Promise/A と呼ばれる仕様を提案しました。これは、非同期コードを整理するために when/then/resolve などを使用することを含む、非同期コードの記述方法を定義します。
この仕様は非常に洗練されているため、ブラウザーでネイティブにサポートされている Promise() や、jQuery、when.js などで遅延されている Promise() など、多くの人がこの仕様を実装しています。
これらのライブラリはすべてこの仕様に準拠しているため、どれか 1 つを学習すれば十分です。私はjQueryのdeferredを主に学習したので、この記事では主にこの実装について話します。

2: jQuery の遅延

まず、延期されたオブジェクトに関しては、Ruan Yifeng 先生が非常に詳細な記事を書いています。アドレスはここです。まず彼の記事を読んでから読み続けることをお勧めします。
上で述べたように、Promise は非同期問題 (ajax など) を解決するために使用されるため、それらの違いを比較してみましょう。
古典的な jQuery AJAX の記述方法は

です。

コードをコピーします コードは次のとおりです:

$.ajax({
入力: "get",
URL: ""、
成功: function () {},
エラー; 関数 () {}
});

success パラメーターと error パラメーターは、成功/失敗が発生したときのコールバック関数です。

そして、jQuery の AJAX 記述メソッドは

になりました。

コードをコピーします コードは次のとおりです:

$.ajax({
「取得」と入力します。
URL: ""
}).done(function () {}).fail(function () {});

成功すると、done の関数が呼び出され、失敗すると、fail の関数が呼び出されます。

これを見ると、done/fail メソッドはどのオブジェクトにあるのかという疑問が生じるかもしれません。 $.ajax() はどのオブジェクトを返しますか?また、なぜこれら 2 つのメソッドがあるのでしょうか?
答えは、以下で紹介する Deferred オブジェクトにあります。

jQuery は新しいタイプの Deferred を提供します。 $.Deferred() を通じて生成されます。たとえば

コードをコピーします コードは次のとおりです:

var def = $.Deferred();

この def は、done/fail/resolve/reject などの多くのメソッドを継承します。
したがって、ここでは、上記の $.ajax() が実際にこのオブジェクトを返すこともわかります。

遅延オブジェクトには多くのメソッドがあります。詳細については、API
を参照してください。
まず、def オブジェクトを自然に生成します。ここには次のような多くのメソッドがあります:

コードをコピーします コードは次のとおりです:

var def = $.Deferred() // 自分で生成します
$.ajax({}); // ajax メソッドは def オブジェクトも返します
$.when(); // when メソッドは def オブジェクトも返します

ここで、$.when() については個別に説明します。このメソッドは通常、1 つ以上の遅延オブジェクトを受け取り、これらの遅延オブジェクトのステータスに基づいて $.when() によって返されるオブジェクトの状態を決定します。使用シナリオの 1 つは、複数の ajax リクエストの 1 つが失敗した場合、それらはすべて失敗とみなされます。$.when($.ajax()、$ など) で複数の ajax メソッドを渡すことができます。 ajax())。その後、$.when は def オブジェクトを返します (これら 2 つのリクエストの結果に基づいて判断されます)。

次に、def オブジェクトを取得した後、このオブジェクトの状態を変更する一連のメソッドがあります

コードをコピー コードは次のとおりです:

def.resolve(); // def オブジェクトを completed に設定すると、def.done() でバインドされた関数がすぐに実行されます。
def.reject(); // def オブジェクトを失敗に設定すると、def.fail() でバインドされた関数がすぐに実行されます。
def.notify(); // def オブジェクトが実行されるとき、対応するコールバックは def.progress() です。

次のステップは、コールバック メソッドを設定することです。順序は上記に対応します。つまり、どの状態でどのコールバックを呼び出すかです。

コードをコピーします コードは次のとおりです:

def.done(); // def.resolve();
に対応します。 def.fail(); // def.reject();
に対応します。 def.progress(); // def.notify();
に対応します。 // 特別な
def.always(); // 成功または失敗時に呼び出されます
def.then(); // 成功 (完了)、失敗 (失敗)、進行状況 (進捗) の順に複数の関数を受け入れます

実際、この時点では、遅延オブジェクトの使用法はほぼ同じです。ただし、jQuery はいくつかの API も提供します

コードをコピーします コードは次のとおりです:

// 現在のステータスクラスを確認します
def.isRejected();
def.isResolved();
def.state();

これらの API の名前が示すとおり、詳細については説明しません。詳細については、上記の jQuery API ドキュメントを確認してください。

別の方法があります。つまり、外部の def オブジェクトを指定したい場合があります。その場合、このオブジェクトはさまざまな状態のコールバックを設定できますが、その状態を変更することはできません。その場合は、

を使用できます。

コードをコピーします コードは次のとおりです:

def.promise();

遅延オブジェクトのサブセットである Promise オブジェクトを返します。done/fail やその他のメソッドを使用できます。これは主に def オブジェクトの状態を保護するためのものです。外部によって変更されました。

この時点で、約束についての話は終わりました。これで、ご自身のプロジェクトに使用できます。また、新年が明けましておめでとうございます。未年が皆様にとって素晴らしい年になることをお祈りしています。