JavaScript 非同期呼び出しフレームワーク (パート 6 - 例とパターン)_JavaScript スキル

Ajax のカプセル化
Async.Operation を設計する本来の目的は、Ajax 呼び出しがコールバック パラメーターを渡す必要があるという問題を解決することです。このため、最初に Ajax リクエストを Async.Operation にカプセル化します。もちろん、ここでは jQuery を使用しています。どのような基本ライブラリを使用しても、Async.Operation を使用するとこの単純なカプセル化を実行できます。

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

var Ajax = {};
Ajax.get = function(url, data) {
varoperation = new Async.Operation();
$.get(url, data, function(result) {operation.yield(result); }, " json");
戻り操作;

Ajax.post = function(url, data) {
var 操作 = new Async.Operation(); >$.post(url, data, function(result); }, "json");


の内容私が呼び出しているサーバー側 API では、GET と POST のみが必要で、データはすべて JSON であるため、jQuery によって提供される他の A​​jax オプションを直接ブロックし、データ型を JSON に設定しました。プロジェクトでは、同様のメソッドを使用して、Ajax を Async.Operation のみを返すいくつかのメソッドにカプセル化し、jQuery によって提供されるすべてのオプションを Ajax レイヤーでカプセル化し、これらのオプションを上位レイヤーに公開しないようにすることもできます。


Ajax の呼び出し

Ajax をカプセル化したら、ビジネス ロジックの作成に集中できます。

Friend オブジェクトがあり、その get メソッドを使用して 1 つの Friend オブジェクトを返し、getAll メソッドを使用してすべての Friend オブジェクトを返すとします。これに対応するのは 2 つのサーバー側 API です。フレンド インターフェイスは 1 つのフレンド JSON を返し、フレンドリスト インターフェイスはすべてのフレンド名で構成される JSON を返します。
まず、より基本的な get メソッドの書き方を見てみましょう。



コードをコピーします

コードは次のとおりです。 function get(name) { return Ajax.get("/friend", "name=" encodeURIComponent(name)); }

それだけ簡単ですか?はい、サーバー側 API によって返される JSON 構造が、必要なフレンド オブジェクト構造とまったく同じである場合には可能です。 JSON 構造とフレンド オブジェクト構造が異種の場合は、JSON をオブジェクトにマップするコードを追加する必要がある場合があります:

Copy code

コードは次のとおりです: function get(name) { var Operation = new Async.Operation() Ajax.get("/friend", "name=" encodeURIComponent(name ))

.addCallback(function(json) {

operation.yield(createFriendFromJson(json));
});
return オペレーション; >

Ajax Queue

次に書かなければならないのは getAll メソッドです。 friendslist インターフェイスは友人名のリストのみを返すため、このリストを取得した後、get メソッドを 1 つずつ呼び出して特定の友人オブジェクトを取得する必要があります。複数のフレンド インターフェイスを同時に呼び出すと、サーバーの攻撃対策戦略がトリガーされ、一定期間暗い部屋に閉じ込められる可能性があることを考慮して、フレンド インターフェイスへの呼び出しをキューに入れる必要があります。

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

function getAll(){ var操作 = new Async.Operation(); var friends = []; var chain = Async.chain(); Ajax.get("/friendlist", "") (function( json) {

for (var i = 0; i chain.next(function() {
return get(json.shift())
.addCallback(function(friend) { friends.push(friend); });
}
chain
.next(function() {operation.yield(friends) ; })
.go();
})
戻り操作;
ここでは、friendlist インターフェイスによって返される JSON が配列であると仮定します。この配列を取得した後、同じ長さの非同期呼び出しキューを構築します。各呼び出しのロジックは同じで、最初のフレンドを取り出します。配列名を取得するには、get メソッドを使用して対応するフレンド オブジェクトを取得し、そのフレンド オブジェクトを別の配列に配置します。呼び出しキューの最後に別の呼び出しを追加して、フレンド オブジェクトを保持する配列を返します。

この例では、前の関数の結果を次の関数に渡すために呼び出しキューの機能を使用しませんでしたが、複数の最下層を許可する呼び出しキューの使用法を示すには十分です。 Ajax リクエストを実行する 非同期操作は、固定された順序でブロック的に実行されます。

基になる非同期関数は Async.Operation を返すため、それを次のメソッドに直接渡すことも、匿名関数でラップして次のメソッドに渡すこともでき、内部で必要な戻りは 1 つだけです匿名関数。

遅延関数
上記の例では、サーバーの攻撃対策戦略のトリガーを回避するためにキューが使用されていますが、これでは十分でない場合があります。たとえば、サーバーは 2 つのリクエストの間に少なくとも 500 ミリ秒の間隔を必要とします。そうでない場合、攻撃とみなされ、この間隔がキューに挿入されます。

元々 next メソッドで呼び出された匿名関数に setTimeout を手動で追加するのも 1 つの方法ですが、この種の問題を解決する補助関数を作成してみてはいかがでしょうか?ヘルパー メソッドを作成し、それを Async.Operation とシームレスに統合しましょう。

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

Async.wait = function(delay, context ) {
var 操作 = new Async.Operation();
setTimeout(function() {operation.yield(context); }, 遅延);
Async.Operation.prototype.wait = function(遅延, コンテキスト) {
this.next(function(context) { return Async.wait(遅延, コンテキスト); });

このヘルパー メソッドを使用すると、上記の getAll メソッドでの各 Ajax リクエスト間に 500 ミリ秒の間隔を簡単に実装できます。 for ループ内に待機する呼び出しを追加するだけです。

コードをコピー

コードは次のとおりです。 for (var i = 0; i < ; json.長さ; ) { chain .wait(500)

.next(function() {

return get(json.shift())
.addCallback(function( friends) { friends.push(friend) });
})



概要

非同期: Operation の一般的な使用方法と、必要に応じてその機能を拡張する方法。 Async.Operation が、誰もが Ajax アプリケーションのコードの可読性を向上させるのに効果的に役立つことを願っています。