Łączenie i komponowanie obietnic

W tworzeniu aplikacji internetowych często trzeba wykonywać zadania asynchroniczne (takie jak pobieranie danych) w określonej kolejności. Łączenie promise’ów pozwala robić to w przejrzysty sposób.

Zamiast zagnieżdżać callbacki, co może prowadzić do „piekła callbacków”, można łączyć operacje sekwencyjnie, dzięki czemu kod jest znacznie łatwiejszy do odczytania i utrzymania.

Metoda .then() jest podstawą łączenia operacji. Gdy obiekt Deferred (lub Promise) zostanie spełniony, wykonywany jest jego callback .then(). Wartość zwrócona przez ten callback może następnie zostać wykorzystana przez kolejny element .then() w łańcuchu.

Jeśli callback zwróci nowy obiekt Deferred, łańcuch zaczeka na jego spełnienie, zanim będzie kontynuowany.

Przyjrzyjmy się prostemu przykładowi, w którym symulujemy dwa kroki asynchroniczne. Drugi krok jest wykonywany dopiero po zakończeniu pierwszego i korzysta z danych uzyskanych w pierwszym kroku.

Proszę zauważyć, jak wynik step1 ('Data from Step 1') jest przekazywany do step2.

Wartość zwrócona przez callback .then() określa dane wejściowe dla następnego .then().

• Jeśli zostanie zwrócona wartość niebędąca obiektem Deferred, stanie się ona spełnioną wartością dla następnego .then().
• Jeśli zostanie zwrócony obiekt Deferred, łańcuch wstrzyma działanie do czasu jego spełnienia, a spełniona wartość zostanie następnie przekazana do kolejnego .then().

Choć .then() jest obecnie standardem, jQuery's .Deferred() udostępnia również .pipe(). Działa ona podobnie do .then(), ale pierwotnie została zaprojektowana do przekształcania spełnionej lub odrzuconej wartości albo do filtrowania obiektu Deferred, który kontynuuje łańcuch.

.pipe() może służyć do zwracania nowego obiektu Deferred, który zostanie spełniony przekształconą wartością, skutecznie „przekazując” ją do następnego etapu.

W tym przykładzie używamy .pipe(), aby pobrać wynik pierwszej operacji, przekształcić go (np. zamienić na wielkie litery), a następnie przekazać przekształconą wartość do końcowego handlera .done().

Co zrobić, gdy mają Państwo wiele niezależnych zadań asynchronicznych, ale przed przejściem dalej trzeba zaczekać na ukończenie wszystkich? Właśnie do tego służy $.when().

$.when() przyjmuje jako argumenty jeden lub więcej obiektów Deferred (albo Promise) i zwraca nowy obiekt Deferred. Ten nowy obiekt Deferred zostaje spełniony dopiero wtedy, gdy wszystkie przekazane obiekty Deferred zostaną spełnione.

W tym przykładzie symulujemy dwa niezależne żądania AJAX (fetchUser i fetchPosts). Używamy $.when(), aby zaczekać na zakończenie obu żądań przed zapisaniem połączonych wyników w konsoli.

Proszę zauważyć, że są wykonywane równolegle, a nie sekwencyjnie.

Gdy obiekt Deferred zwrócony przez $.when() zostanie spełniony, jego callbacki .done() lub .then() otrzymują spełnione wartości z każdego wejściowego obiektu Deferred jako osobne argumenty, w kolejności, w jakiej obiekty te przekazano do $.when().

Ułatwia to łączenie i przetwarzanie danych z wielu źródeł, gdy wszystkie są już dostępne.

Proszę rozważyć następujący fragment kodu jQuery:

let dfd1 = new $.Deferred();
let dfd2 = new $.Deferred();

dfd1.then(function(val) {
  return val + " World";
}).then(function(newVal) {
  console.log(newVal); // Line A
  return dfd2;
}).then(function() {
  console.log("Finished!"); // Line B
});

dfd1.resolve("Hello");
dfd2.resolve();

JAKI BĘDZIE KOŃCOWY wynik wyświetlony w konsoli i w jakiej kolejności?

Nauczyli się Państwo zarządzać złożonymi przepływami asynchronicznymi:

• Łączenie za pomocą .then(): wykonuje operacje sekwencyjnie, przekazując wyniki z jednego etapu do następnego.
• .pipe(): starsza metoda przekształcania wartości lub mapowania obiektów Deferred w łańcuchu.
• Komponowanie za pomocą $.when(): czeka na równoległe zakończenie wielu niezależnych obiektów Deferred, a następnie udostępnia ich wyniki jako osobne argumenty.

Wzorce te mają kluczowe znaczenie przy tworzeniu niezawodnych i czytelnych aplikacji asynchronicznych.