オブジェクトのリストを表示するページがあります。これらのリストはそれぞれ ajax 呼び出しから取得されます。それらが順番にレンダリングされるようにするにはどうすればよいですか?
ここに示す手法を使用してみましたが、リクエストの 1 つが失敗した場合、残りのリクエストは拒否されます。私のデータは以前のものに依存していません。では、例を変更してエラーを処理するにはどうすればよいですか?
オブジェクトのリストを表示するページがあります。これらのリストはそれぞれ ajax 呼び出しから取得されます。それらが順番にレンダリングされるようにするにはどうすればよいですか?
ここに示す手法を使用してみましたが、リクエストの 1 つが失敗した場合、残りのリクエストは拒否されます。私のデータは以前のものに依存していません。では、例を変更してエラーを処理するにはどうすればよいですか?
ご存知のように、別の投稿で、この小さな Resolver クラスを書きましたが、このパイピングのアイデアが気に入っています。この例が好きかどうかはわかりませんが、少し調整すればうまくいくと思います。認めますが、これはまだテストしていません。
var urls = ["path1","path2","path3"]; // Output from string.split()
var chain = $.Deferred(); // Create the root of the chain.
var promise = chain; // Placeholder for the promise
// Build the chain
jQuery.each(urls,function(index,elem){
// Pipe the response to the "next" function
promise = promise.pipe(function(response)
{
var myurl = elem; // Get the current part
var newPromise = $.Deferred();
$.ajax
({
type: "GET",
url: myurl
}).done(function(data){
//these are your normal ajax success function params, IIRC
//do stuff with response
}).fail(function(){
//oops, it failed, oh well
//do stuff on failure
}).always(function() {
//but always resolve the sequencing promise
newPromise.resolve();
});
return newPromise;
})
});
chain.resolve();
編集: これはシミュレートされた ajax リクエストを含む JSFiddle ですhttp://jsfiddle.net/jfcox/gFLhK/。ご覧のとおり、すべてが順番に並んでいます。
編集 II: コメントの微調整。解決呼び出しに何でも渡すことで、次の約束に情報を渡すことができるはずです...
編集 III: Dave の提案に従って変更。always
懸念事項をさらに分離するには、ajax リクエストで使用できます。
応答のリストを配列に保存できます
function response () {
responseArray[i] = response; // Where i is the sequence number of request and response;
responseHandler(); // Ping some function which can take the response in the order and process it.
}
jQuery.when を使ってみましたか?
http://api.jquery.com/jQuery.when/
例
http://jsfiddle.net/94PGy/4/
Deferred の 1 つが拒否される複数の Deferred の場合、jQuery.when はすぐにそのマスター Deferred の failCallback を起動します。Deferred の一部は、その時点でまだ解決されていない可能性があることに注意してください。この場合、未完了の ajax リクエストをキャンセルするなど、追加の処理を実行する必要がある場合は、基礎となる jqXHR オブジェクトへの参照をクロージャーに保持し、failCallback でそれらを検査/キャンセルできます。