Karena jQuery 1.8 .then berperilaku sama seperti .pipe:
Pemberitahuan Penghentian: Mulai jQuery 1.8, deferred.pipe()metode ini tidak digunakan lagi. The deferred.then()metode, yang menggantikan itu, harus digunakan sebagai gantinya.
dan
Mulai jQuery 1.8 , deferred.then()metode ini mengembalikan janji baru yang dapat memfilter status dan nilai ditangguhkan melalui fungsi, menggantikan metode yang sekarang tidak deferred.pipe()digunakan lagi .
Contoh di bawah ini mungkin masih berguna bagi sebagian orang.
Mereka melayani tujuan yang berbeda:
.then()digunakan kapan pun Anda ingin bekerja dengan hasil dari proses tersebut, misalnya seperti yang dikatakan dalam dokumentasi, saat objek yang ditangguhkan diselesaikan atau ditolak. Ini sama dengan menggunakan .done()atau .fail().
Anda akan menggunakan .pipe()untuk (pra) memfilter hasilnya. Nilai kembali dari panggilan balik ke .pipe()akan diteruskan sebagai argumen ke donedan failpanggilan balik. Itu juga dapat mengembalikan objek ditangguhkan lainnya dan panggilan balik berikut akan didaftarkan pada ditangguhkan ini.
Tidak demikian halnya dengan .then() (atau .done(), .fail()), nilai kembalian dari callback terdaftar hanya diabaikan.
Jadi, Anda tidak menggunakan salah satu .then() atau .pipe() . Kamu dapat menggunakan .pipe()untuk tujuan yang sama .then()tetapi sebaliknya tidak berlaku.
Contoh 1
Hasil dari beberapa operasi adalah larik objek:
[{value: 2}, {value: 4}, {value: 6}]
dan Anda ingin menghitung nilai minimum dan maksimum. Mari kita asumsikan kita menggunakan duadone callback:
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" */
});
Dalam kedua kasus, Anda harus mengulang daftar dan mengekstrak nilai dari setiap objek.
Bukankah lebih baik untuk mengekstrak nilai sebelumnya sehingga Anda tidak perlu melakukan ini di kedua callback secara individual? Iya! Dan itulah yang bisa kita gunakan .pipe()untuk:
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" */
});
Jelas ini adalah contoh yang dibuat-buat dan ada banyak cara berbeda (mungkin lebih baik) untuk menyelesaikan masalah ini, tapi saya harap ini menggambarkan maksudnya.
Contoh 2
Pertimbangkan panggilan Ajax. Terkadang Anda ingin memulai satu panggilan Ajax setelah panggilan sebelumnya selesai. Salah satu caranya adalah dengan melakukan panggilan kedua di dalam donecallback:
$.ajax(...).done(function() {
// executed after first Ajax
$.ajax(...).done(function() {
// executed after second call
});
});
Sekarang mari kita asumsikan Anda ingin memisahkan kode Anda dan menempatkan dua panggilan Ajax ini di dalam sebuah fungsi:
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
});
});
}
Anda ingin menggunakan objek deferred untuk mengizinkan kode lain yang memanggil makeCallsuntuk melampirkan callback untuk panggilan Ajax kedua , tapi
makeCalls().done(function() {
// this is executed after the first Ajax call
});
tidak akan memiliki efek yang diinginkan karena panggilan kedua dilakukan di dalam donepanggilan balik dan tidak dapat diakses dari luar.
Solusinya adalah dengan menggunakan .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
});
Dengan menggunakan, .pipe()Anda sekarang dapat memungkinkan untuk menambahkan callback ke panggilan Ajax "dalam" tanpa menunjukkan aliran / urutan panggilan yang sebenarnya.
Secara umum, objek yang ditangguhkan memberikan cara yang menarik untuk memisahkan kode Anda :)