JavaScript 非同期呼び出しフレームワーク (パート 4 - 連鎖呼び出し)_JavaScript スキル

実際の開発では、一連の同期操作と非同期操作を順番に実行することが非常に一般的です。 Baidu Hi Web バージョンの例を使用すると、まず連絡先リストを非同期的に取得し、次に各連絡先の特定の情報を非同期的に取得する必要があります。後者は各リクエストで 10 件の連絡先の名前を送信し、取得します。対応する特定の情報。これは、連続して実行する必要がある複数の非同期リクエストです。
この目的を達成するには、シーケンシャル非同期オペレーション コードが従来のシーケンシャル同期オペレーション コードと同じくらいエレガントに見えるように、コードの可読性を最適化する新しいオペレーション メソッドを設計する必要があります。
従来のアプローチ
ほとんどのプログラマは、次のような逐次実行コードをよく理解できます。

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

var firstResult = firstOperation(firstResult); >alert(finalResult);


最初に実行される関数は、後で実行される関数に必要なデータを提供します。ただし、非同期呼び出しフレームワークを使用した後は、同じロジックが次のようになります。

コードをコピー コードは次のとおりです。 🎜> firstAsyncOperation(initialArgument).addCallback(function(firstResult) { secondAsyncOperation(firstResult).addCallback(function(secondResult) {

thirdAsyncOperation(secondResult).addCallback(function(finalResult) {

alert(finalResult);
});



上記のように思いますコード 非常に見苦しいので、jQuery 風のチェーンライティングに変換できることを願っています。これを行うには、まずユースケースを構築します:

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

Async.go (initialArgument) .next(firstAsyncOperation) .next(firstAsyncOperation) .next(thirdAsyncOperation) .next(function(finalResult) {alert(finalResult); } )

この使用例では、初期化データを go に渡し、次の各処理関数の後にデータ処理関数を渡します。

同期共存

上記のユースケースはすべて非同期関数を呼び出しますが、ユーザーが特定の実装を気にせずにこの関数を使用できるように、同期関数と互換性があることが最善です。機能。この目的のために、次のような別のユースケースを作成します:

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

Async.go(0) .next(function(i) {alert(i); return i 1; }) .next(function(i) { alert(i); var オペレーション = new Async.Operation(); setTimeout(function() {operation.yield(i 1); }, 1000);

return オペレーション; (function(i ) {alert(i); return i 1; })

.next(function(i) {alert(i); return i; });


上記の使用例では、1 と 2 の間が 1000 ミリ秒の間隔で、0、1、2、3 のプロンプト情報シーケンスが表示されることが予想されます。

非同期の性質

チェーン呼び出しは本質的に非同期呼び出しであるため、Operation インスタンスも返します。このインスタンスには当然、result、state、completed というフィールドもあり、呼び出しのチェーン全体が完了すると、result は最後の呼び出しによって返された結果と等しく、completed は当然 true と等しくなります。
前のユースケースを拡張して、次のユースケースコードを取得できます:

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


varchainOperation = Async.go(0)

.next(function(i) {alert(i); return i 1; }) .next(function(i) ) { alert (i); var オペレーション = new Async.Operation(); setTimeout(function() {operation.yield(i 1); }, return オペレーション; })

.next(function(i) {alert(i); return i 1; })

.next(function(i) {alert(i); return i; });
setTiemout(function () {alert(chainOperation.result; }, 2000);


チェーン呼び出しの戻り値を保存します。チェーン呼び出しが完了すると、その結果は最後の操作の戻り値と一致するはずです。上記の使用例では、それは 3 です。
呼び出しタイミング
連鎖的な呼び出し方法を提供していますが、ユーザーは必ずしもこの固定された方法で呼び出しを行うとは限らないため、ユーザーとの互換性についてはさまざまな可能性を考慮する必要があります。次に、呼び出しチェーンに操作を非同期で追加します:

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

varchainOperation = Async.go(0);
chainOperation.next(function(i) {alert(i); return i 1; });
setTimeout(function() {
chainOperation. next(function(i) {
alert(i);
varoperation = new Async.Operation();
setTimeout(function() {operation.yield(i 1); }, 2000);
リターン操作;
})
}, 1000);
setTimeout(function() {
chainOperation.next(function(i) {alert(i); return i 1; } );
}, 2000);

この使用例では、ユーザーは 1000 ミリ秒ごとに操作を追加し、2 番目の操作には 2000 ミリ秒かかります。つまり、3 番目の操作が追加された時点では、2 番目の操作はまだ戻っていません。堅牢なフレームワークとして、このような用途にも対応できる必要があります。
さらに、ユーザーが最初に呼び出しチェーンを構築してから、その呼び出しチェーンを実行したい可能性があることも考慮する必要があります。このとき、ユーザーはまず next メソッドを使用して操作を追加し、次に go メソッドを使用して実行します。

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

varchainOperation = Async
.chain (function(i) {alert(i); return i 1; })
.next(function(i) {
alert(i);
varoperation = new Async.Operation();
setTimeout (function() {operation.yield(i 1); }, 2000);
return 操作;
})
.go(0)
setTimeout(function() {
chainOperation .next(function(i) {alert(i); return i 1; })
}, 1000);

上記の使用例では、ユーザーはヘッダー同期を追加しましたviachain と next 1 つの操作と 1 つの非同期操作。その後、go を使用して呼び出しチェーンを実行し、next を使用して呼び出しチェーンが完了する前に操作を非同期的に追加します。堅牢なフレームワークでは、このような使用例でユーザーが期待するとおりに 0、1、2 を要求できる必要があります。
概要
チェーン呼び出しの需要に応えて、私たちはさまざまな奇妙な非同期呼び出しメソッドを含む非常に多くのユースケースを設計してきました。最終的にそのような機能を実現するにはどうすればよいでしょうか?