以来jQueryの1.8 .then
と同じように動作します.pipe
:
非推奨の通知: jQuery 1.8以降、このdeferred.pipe()
メソッドは非推奨になりました。deferred.then()
代わりに、このメソッドを使用する必要があります。
そして
jQuery 1.8以降、このdeferred.then()
メソッドは、関数を介して遅延オブジェクトのステータスと値をフィルタリングできる新しいpromiseを返し、非推奨となったdeferred.pipe()
メソッドを置き換えます。
以下の例は、まだいくつかの人に役立つかもしれません。
それらは異なる目的を果たします:
.then()
ドキュメントの説明のように、遅延オブジェクトが解決または拒否されたときに、プロセスの結果を操作する場合に常に使用されます。.done()
またはを使用するのと同じ.fail()
です。
何らかの方法で結果.pipe()
を(事前に)フィルタリングするために使用します。へのコールバックの戻り値は.pipe()
、done
およびfail
コールバックに引数として渡されます。また、別の遅延オブジェクトを返すこともでき、次のコールバックがこの遅延オブジェクトに登録されます。
これは.then()
(または.done()
、.fail()
)の場合とは異なり、登録されたコールバックの戻り値は無視されます。
つまり、 .then()
または を使用することではありません.pipe()
。君は可能性が使用し.pipe()
て同じ目的のために.then()
その逆は成り立ちません。
例1
いくつかの操作の結果はオブジェクトの配列です:
[{value: 2}, {value: 4}, {value: 6}]
値の最小値と最大値を計算したいとします。2つ使用すると仮定しましょうdone
コールバックます。
deferred.then(function(result) {
// result = [{value: 2}, {value: 4}, {value: 6}]
var values = [];
for(var i = 0, len = result.length; i < len; i++) {
values.push(result[i].value);
}
var min = Math.min.apply(Math, values);
/* do something with "min" */
}).then(function(result) {
// result = [{value: 2}, {value: 4}, {value: 6}]
var values = [];
for(var i = 0, len = result.length; i < len; i++) {
values.push(result[i].value);
}
var max = Math.max.apply(Math, values);
/* do something with "max" */
});
どちらの場合も、リストを反復処理して、各オブジェクトから値を抽出する必要があります。
両方のコールバックで個別にこれを行う必要がないように、何らかの方法で事前に値を抽出する方がよいのではないでしょうか。はい!そして、それは私たちが使用できるもの.pipe()
です:
deferred.pipe(function(result) {
// result = [{value: 2}, {value: 4}, {value: 6}]
var values = [];
for(var i = 0, len = result.length; i < len; i++) {
values.push(result[i].value);
}
return values; // [2, 4, 6]
}).then(function(result) {
// result = [2, 4, 6]
var min = Math.min.apply(Math, result);
/* do something with "min" */
}).then(function(result) {
// result = [2, 4, 6]
var max = Math.max.apply(Math, result);
/* do something with "max" */
});
明らかにこれは作り上げの例であり、この問題を解決するための多くの異なる(おそらくより良い)方法がありますが、それが要点を示していることを願っています。
例2
Ajax呼び出しを検討してください。前の呼び出しが完了した後で、1つのAjax呼び出しを開始したい場合があります。1つの方法は、done
コールバック内で2番目の呼び出しを行うことです。
$.ajax(...).done(function() {
// executed after first Ajax
$.ajax(...).done(function() {
// executed after second call
});
});
ここで、コードを分離して、これら2つのAjax呼び出しを関数内に配置したいとします。
function makeCalls() {
// here we return the return value of `$.ajax().done()`, which
// is the same deferred object as returned by `$.ajax()` alone
return $.ajax(...).done(function() {
// executed after first call
$.ajax(...).done(function() {
// executed after second call
});
});
}
遅延オブジェクトを使用して、呼び出しmakeCalls
を行う他のコードが2番目の Ajax呼び出しのコールバックをアタッチできるようにしたいが、
makeCalls().done(function() {
// this is executed after the first Ajax call
});
2番目の呼び出しはdone
コールバック内で行われ、外部からアクセスできないため、目的の効果は得られません。
解決策は.pipe()
代わりに使用することです:
function makeCalls() {
// here we return the return value of `$.ajax().pipe()`, which is
// a new deferred/promise object and connected to the one returned
// by the callback passed to `pipe`
return $.ajax(...).pipe(function() {
// executed after first call
return $.ajax(...).done(function() {
// executed after second call
});
});
}
makeCalls().done(function() {
// this is executed after the second Ajax call
});
を使用.pipe()
することで、コールの実際のフロー/順序を公開することなく、「内部」Ajaxコールにコールバックを追加できるようになります。
一般的に、遅延オブジェクトはコードを分離する興味深い方法を提供します:)