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}]
そして、値の最小値と最大値を計算したいとします。done
2つのコールバックを使用すると仮定しましょう。
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
});
});
}
遅延オブジェクトを使用して、 2番目のAjax呼び出しmakeCalls
のコールバックをアタッチするために呼び出す他のコードを許可したいが、
makeCalls().done(function() {
// this is executed after the first Ajax call
});
done
2番目の呼び出しはコールバック内で行われ、外部からアクセスできないため、望ましい効果は得られません。
.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呼び出しにコールバックを追加できるようになりました。
一般に、遅延オブジェクトは、コードを分離するための興味深い方法を提供します:)