概要
いくつかの選択肢があります。コールバックを使用して、これらの関数を使用するコードを次のようにすることができます。
getStuff(function(results) {
getMoreStuff(results, doSomethingWithStuff);
});
または、jQueryDeferredとPromiseオブジェクトを使用して、次のようにします。
getStuff().then(getMoreStuff).then(doSomethingWithStuff):
コールバックの使用
両方getStuffを持ちgetMoreStuff、完了時に呼び出すコールバックである引数を受け入れます。次に例を示します。
function getStuff(callback) {
// ^------------------------------ callback argument
$.ajax({
...
success: function(results) {
// other functions involving results
callback(results);
// ^------------------------------------ use the callback arg
}
});
}
...同様にgetMoreStuff.
Deferredと_Promise
jQuery のajax機能は、jQuery の機能と統合されていDeferredますPromise。既存の関数に追加returnして、それを機能させることができます。たとえば、次のようになります。
function getStuff(callback) {
return $.ajax({
...
});
}
(注:successコールバックは必要ありません。)
次に、このコード：
getStuff().then(getMoreStuff).then(doSomethingWithStuff);
これを行います：
getStuffその呼び出しを開始し、その呼び出しが作成するajaxを返しPromiseます。
そのajax呼び出しが完了して promise を解決するとgetMoreStuff、呼び出しの結果がajax最初の引数として呼び出されます。呼び出しを開始し ajaxます。
getMoreStuffのajax呼び出しが完了すると、その呼び出しdoSomethingWithStuffの結果( 内のもの) とともに呼び出されます。getMoreStuff
各段階で正しい結果が渡されるようにするにthenは、 ではなくを使用することが重要です。done( を使用すると、 とdoneの両方getMoreStuff で の呼び出しdoSomethingWithStuffの結果が表示されます。)getStuffajax
を使用した完全な例を次に示しajaxます。
フィドル| 呼び出しごとに 1 秒かかる代替 Fiddleajax (何が起こっているかを簡単に確認できます)
function getStuff() {
display("getStuff starting ajax")
return $.ajax({
url: "/echo/json/",
type: "POST",
data: {json: '{"message": "data from first request"}'},
dataType: "json"
});
}
function getMoreStuff(results) {
display("getMoreStuff got " + results.message + ", starting ajax");
return $.ajax({
url: "/echo/json/",
type: "POST",
data: {json: '{"message": "data from second request"}'},
dataType: "json"
});
}
function doSomethingWithStuff(results) {
display("doSomethingWithStuff got " + results.message);
}
getStuff().then(getMoreStuff).then(doSomethingWithStuff);
function display(msg) {
var p = document.createElement('p');
p.innerHTML = String(msg);
document.body.appendChild(p);
}
出力：
getStuff 開始 ajax
getMoreStuff は最初のリクエストからデータを取得し、ajax を開始しました
doSomethingWithStuff は 2 番目のリクエストからデータを取得しました
ajaxこの利点を得るため に を使用する必要はありません。独自のDeferredandPromiseオブジェクトを使用できます。これにより、次のようなチェーンを記述できます。
one().then(two).then(three);
...非同期の完了が発生する可能性があるあらゆる状況に対応します。
これは非ajax例です:
フィドル
function one() {
var d = new $.Deferred();
display("one running");
setTimeout(function() {
display("one resolving");
d.resolve("one");
}, 1000);
return d.promise();
}
function two(arg) {
var d = new $.Deferred();
display("Two: Got '" + arg + "'");
setTimeout(function() {
display("two resolving");
d.resolve("two");
}, 500);
return d.promise();
}
function three(arg) {
var d = new $.Deferred();
display("Three: Got '" + arg + "'");
setTimeout(function() {
display("three resolving");
d.resolve("three");
}, 500);
return d.promise();
}
one().then(two).then(three);
function display(msg) {
var p = document.createElement('p');
p.innerHTML = String(msg);
document.body.appendChild(p);
}
出力：
ランニング
解決する
2: 「1」を取得
解決する
3: 「2」を取得
解決する
これら 2 つ (ajax例と非例ajax) は、必要に応じて組み合わせることができます。たとえば、getStuffこのajax例を参考にして、データを に渡す前に何らかの処理を行う必要があると判断した場合、次のgetMoreStuffように変更します。
function getStuff() {
// Create our own Deferred
var d = new $.Deferred();
display("getStuff starting ajax")
$.ajax({
url: "/echo/json/",
type: "POST",
data: {json: '{"message": "data from first request"}', delay: 1},
dataType: "json",
success: function(data) {
// Modify the data
data.message = "MODIFIED " + data.message;
// Resolve with the modified data
d.resolve(data);
}
});
return d;
}
変更されていない使用方法に注意してください。
getStuff().then(getMoreStuff).then(doSomethingWithStuff);
変更されたのは 内だけgetStuffでした。
これは、「プロミス」の概念全体に関する優れた点の 1 つです (これは jQuery に固有のものではありませんが、jQuery は使用するのに便利なバージョンを提供します)。