jQuery Deferredma dwie funkcje, które można wykorzystać do implementacji asynchronicznego łączenia funkcji w łańcuchy:

then()

deferred.then( doneCallbacks, failCallbacks ) Returns: Deferred

doneCallbacks Funkcja lub tablica funkcji wywoływana po rozwiązaniu funkcji Deferred .
failCallbacks Funkcja lub tablica funkcji wywoływana w przypadku odrzucenia funkcji Deferred .

pipe()

deferred.pipe( [doneFilter] [, failFilter] ) Returns: Promise

doneFilter Opcjonalna funkcja, która jest wywoływana po rozwiązaniu Deferred .
failFilter Opcjonalna funkcja, która jest wywoływana, gdy Deferred zostanie odrzucona.

Wiem, then()że trwało to trochę dłużej, niż pipe()więc ta ostatnia musi przynosić dodatkowe korzyści, ale jaka różnica dokładnie mi umyka. Oba przyjmują prawie te same parametry wywołania zwrotnego, chociaż różnią się nazwą, a różnica między zwróceniem a Deferreda zwróceniem a Promisewydaje się niewielka.

Czytałem oficjalne dokumenty w kółko, ale zawsze uważałem je za zbyt „gęste”, by naprawdę zawinąć głowę, a wyszukiwanie znalazło wiele dyskusji na temat jednej lub drugiej funkcji, ale nie znalazłem niczego, co naprawdę wyjaśniałoby różne wady i zalety każdego z nich.

Kiedy więc lepiej używać, thena kiedy lepiej używać pipe?

Dodanie

Doskonała odpowiedź Felixa naprawdę pomogła wyjaśnić, czym różnią się te dwie funkcje. Ale zastanawiam się, czy są chwile, w których funkcjonalność then()jest lepsza niż pipe().

Widać, że pipe()jest potężniejszy niż then()i wydaje się, że ten pierwszy może zrobić wszystko, co drugi. Jednym z powodów użycia then()może być fakt, że jego nazwa odzwierciedla jego rolę jako zakończenia łańcucha funkcji przetwarzających te same dane.

Ale czy istnieje przypadek użycia, który wymaga then()zwrotu oryginału, z Deferredktórym nie można zrobić, pipe()ponieważ zwraca nowy Promise?

Ponieważ jQuery 1.8 .then zachowuje się tak samo jak .pipe:

Powiadomienie o deferred.pipe()wycofaniu : od wersji jQuery 1.8 ta metoda jest przestarzała. deferred.then()Metoda, która zastępuje go, powinien być stosowany zamiast.

i

Począwszy od jQuery 1.8 , deferred.then()metoda zwraca nową obietnicę, która może filtrować stan i wartości odroczonego za pomocą funkcji, zastępując deferred.pipe()metodę , która jest obecnie przestarzała .

Poniższe przykłady mogą być nadal pomocne dla niektórych.

Służą różnym celom:

• .then()ma być używany zawsze, gdy chcesz pracować z wynikiem procesu, tj. jak mówi dokumentacja, gdy odroczony obiekt zostanie rozwiązany lub odrzucony. To jest to samo, co użycie .done()lub .fail().

• W jakiś sposób użyłbyś .pipe()(wstępnego) przefiltrowania wyniku. Wartość zwracana wywołania zwrotnego do .pipe()zostanie przekazana jako argument do funkcji donei funkcji failzwrotnej. Może również zwrócić inny obiekt odroczony, a następujące wywołania zwrotne zostaną zarejestrowane w tym odroczonym.

  Tak nie jest w przypadku .then()(lub .done(), .fail()), wartości zwracane przez zarejestrowane wywołania zwrotne są po prostu ignorowane.

Więc to nie jest tak, że używasz albo .then() lub .pipe() . Państwo mogli korzystać .pipe()z tych samych celów, co .then()jednak rozmawiać nie trzyma.

Przykład 1

Wynikiem jakiejś operacji jest tablica obiektów:

[{value: 2}, {value: 4}, {value: 6}]

i chcesz obliczyć minimalną i maksymalną wartość. Załóżmy, że używamy dwóch donewywołań zwrotnych:

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" */ 

});

W obu przypadkach musisz powtórzyć listę i wyodrębnić wartość z każdego obiektu.

Czy nie byłoby lepiej wcześniej jakoś wyodrębnić wartości, aby nie trzeba było tego robić osobno w obu wywołaniach zwrotnych? Tak! I to właśnie możemy wykorzystać .pipe()do:

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" */

});

Oczywiście jest to zmyślony przykład i istnieje wiele różnych (być może lepszych) sposobów rozwiązania tego problemu, ale mam nadzieję, że ilustruje to.

Przykład 2

Rozważ połączenia Ajax. Czasami chcesz zainicjować jedno wywołanie Ajax po zakończeniu poprzedniego. Jednym ze sposobów jest wykonanie drugiego połączenia w donewywołaniu zwrotnym:

$.ajax(...).done(function() {
    // executed after first Ajax
    $.ajax(...).done(function() {
        // executed after second call
    });
});

Teraz załóżmy, że chcesz oddzielić kod i umieścić te dwa wywołania Ajax wewnątrz funkcji:

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
        });
    });
}

Chciałbyś użyć obiektu odroczonego, aby zezwolić na inny kod, który wywołuje makeCallsdołączenie wywołań zwrotnych dla drugiego wywołania Ajax, ale

makeCalls().done(function() {
    // this is executed after the first Ajax call
});

nie przyniesie pożądanego efektu, ponieważ drugie wywołanie jest wykonywane wewnątrz donewywołania zwrotnego i nie jest dostępne z zewnątrz.

Rozwiązaniem byłoby użycie .pipe()zamiast tego:

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
});

Używając .pipe()możesz teraz umożliwić dołączanie wywołań zwrotnych do „wewnętrznego” wywołania Ajax bez ujawniania rzeczywistego przepływu / kolejności wywołań.

Ogólnie rzecz biorąc, odroczone obiekty stanowią interesujący sposób na oddzielenie kodu :)

Nie ma przypadku, w którym MUSISZ użyć then()ponad pipe(). Zawsze możesz zignorować wartość, która pipe()zostanie przekazana. Używanie może spowodować niewielki spadek wydajności pipe- ale jest to mało prawdopodobne.

Więc może się wydawać, że możesz po prostu zawsze używać pipe()w obu przypadkach. Jednakże , za pomocą pipe(), komunikujesz się z innymi ludźmi czytania kodu (w tym siebie, sześć miesięcy od teraz), że istnieją pewne znaczenie dla wartości zwracanej. Jeśli go odrzucasz, naruszasz tę semantyczną konstrukcję.

To tak, jakby mieć funkcję, która zwraca wartość, która nigdy nie jest używana: myląca.

Więc używaj then()kiedy powinieneś i pipe()kiedy powinieneś ...

W rzeczywistości okazuje się, że różnica między .then()i .pipe()została uznana za niepotrzebną i zostały one wykonane tak, aby były takie same jak w wersji jQuery 1.8.

Z komentarzajaubourg w zgłoszeniu do śledzenia błędów jQuery # 11010 „MAKE DEFERRED.THEN == DEFERRED.PIPE LIKE PROMISE / A”:

W 1.8 usuniemy wtedy starą i zastąpimy ją obecną rurą. Ale bardzo smutną konsekwencją jest to, że będziemy musieli powiedzieć ludziom, aby korzystali z niestandardowego wykonania, niepowodzenia i postępu, ponieważ propozycja nie zapewnia prostego, WYDAJNEGO, czyli po prostu dodania oddzwonienia.

^{(emphassis mine)}