JS Promise Chain_JavaScript テクニックの深い理解

新しい標準にはネイティブ Promise が追加されています。

ここではチェーンの使用についてのみ説明し、詳細について考えます。

1. then() と catch() の復習

コールバック関数を then() と catch() のパラメーターに配置して、Promise の最終結果を受け取ることができます。

then() はパラメータを受け取ることができ、このコールバックは Promisesolve() のときにのみ呼び出されます。

then() は 2 番目のパラメータを受け取ることもでき、2 番目のコールバックは Promise拒否() 状況を処理するために使用されます。

catch() は、特に Promise request() の状況を処理します。

言い換えると、then() は両方の方法で使用でき、catch() は、reject() の状況のみを処理できます。ただし、resolve() を処理するには then() を使用し、reject() を処理するには catch() を使用することをお勧めします。

2 番目に、私が話したいのは上記のことではありません。上記は基本的な使い方を復習するだけです。ここからは、then() と catch() の戻り値とチェーンの使用法の詳細について説明します。

公式ドキュメントには、then() と catch() の両方が Promise を返すと記載されており、これは非常に興味深いものです。 (私は JS を初めて使用しており、これまで実際の Promise にさらされたことがありません)。

まず、この新しく返された Promise は元の Promise ではありません。

第二に、この新しく返された Promise のステータスの変化 (resolve() か、reject() か) は、以前の Promise のステータスと then() の使用方法に関連しています。

まず then() の状況を説明します: (catch と同様)

var p1 = Promise.resolve("Success");
var p2 = p1.then(task1);
var p3 = p2.then(task2);

注: 上記の task1 と task2 は両方ともコールバックです。

ここで、p1 は作成された Promise であり、直接solved() されます。

p2はthen()で得られたPromise、p3もthen()で得られたPromiseです。

それでは、p2 のステータスはどう変化するのでしょうか? p3 はどうなるでしょうか?

この概念を説明するために次の図を使用します:

その中で、

1. 八角形は Promise オブジェクトを表します。

2. 円は Promise の内部状態を表し、黒い矢印は状態の変化を表します。

3. 右矢印は then 関数の呼び出しを表します。

4. つまり、then 関数が呼び出されている限り、新しい Promise オブジェクトが生成されます。

5. then 関数を呼び出すとき、前の Promise オブジェクトのステータスがわかりません。保留中か解決済みですか?これは想定できませんし、外の世界からは見えません。

6. then 関数の呼び出しはブロックされません。つまり、p1 が自身の状態をゆっくりと移行している場合でも、p2 と p3 はほぼ即座に生成されます。

p1 のステータスが解決されたことがわかります (上記のコードを参照)。ただし、p2 と p3 のステータスがどのように変化するかについては、ここでは説明されていません。解決されたのか拒否されたのか。以下の新しい画像をご覧ください。

さらに多くのダイヤモンドの形状を確認できます。

ひし形は、呼び出し時に渡されるコールバック関数を表します。上向きのひし形は [解決された前の Promise オブジェクトに対する] 受信処理を表し、下向きのひし形は [拒否された前の Promise オブジェクトに対する] 受信処理を表します。

注: この例では、拒否処理はありません。つまり、上向きの菱形と下向きの菱形が描かれているだけです。 then または catch の使い方は私たち特有のものです。サンプル コードをもう一度見てください:

<span>var</span> p1 = Promise.resolve("Success"<span>);</span><span>var</span> p2 =<span> p1.then(task1);//产生了向上的菱形</span><span>var</span> p3 = p2.then(task2);//产生了向上的菱形

ご覧のとおり、then の 2 番目のパラメータを指定しませんでした。これは、拒否状況を処理できなかったことを意味します。

さらに、reject を処理したい場合は then を使用することも、reject を処理するために特別に catch を使用することもできます。それ以外の場合は then と違いはありません。

1. p1 の最終状態 (解決または拒否) が正しく処理されると (呼び出し時に、対応するコールバックが渡されます。つまり、対応するダイヤモンドが存在します)、p2 の状態は解決に変わります。 。

2. p1 の最終状態 (解決または拒否) が正しく処理されない場合 (呼び出し時に、対応するコールバックが欠落している、つまり、対応するダイヤモンドがない)、p1 の状態は次のようにルーティングされます。 p2 (p1 ステータスを受信中).

3. このように渡します。

4. この記事では、コールバックで前の Promise の最終データを取得する方法、つまりデータを転送する方法については説明しません。

3 つ目は、この記事を要約するためにいくつかの例を以下に示します。

画像内のP1のステータスは、解決または拒否がすべて自分で与えられます。目標は、P2 と P3 の最終状態を推定することです。

上記は 4 つの独立した例であり、それらの間には関連性がありません。

X は、P3 が then または catch 関数を使用しないことを意味するため、解決または拒否を処理する方法はありません。

最後に、間違いがある場合は、時間内に修正してください。ありがとうございます! ～！ ！ @~~~

上記の JS プロミス チェーンの詳細な理解は、エディターによって共有されたすべての内容です。参考にしていただければ幸いです。また、Script Home をサポートしていただければ幸いです。