概要
いくつかの選択肢があります。コールバックを使用して、これらの関数を使用するコードを次のようにすることができます。
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
の結果が表示されます。)getStuff
ajax
を使用した完全な例を次に示し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
この利点を得るため に を使用する必要はありません。独自のDeferred
andPromise
オブジェクトを使用できます。これにより、次のようなチェーンを記述できます。
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 は使用するのに便利なバージョンを提供します)。