JavaScript Promise and Promise Chaining

W tym samouczku za pomocą przykładów dowiesz się o obietnicach JavaScript i łączeniu obietnic.

W JavaScript obietnica jest dobrym sposobem obsługi operacji asynchronicznych . Służy do sprawdzenia, czy operacja asynchroniczna została pomyślnie zakończona, czy nie.

Obietnica może mieć jeden z trzech stanów.

  • W oczekiwaniu
  • Spełniony
  • Odrzucony

Obietnica zaczyna się w stanie oczekującym. Oznacza to, że proces nie został zakończony. Jeśli operacja się powiedzie, proces zakończy się w stanie spełnionym. A jeśli wystąpi błąd, proces kończy się odrzuceniem.

Na przykład, gdy żądasz danych z serwera za pomocą obietnicy, będzie ona w stanie oczekiwania. Gdy dane dotrą pomyślnie, będą w stanie spełnionym. Jeśli wystąpi błąd, będzie w stanie odrzuconym.

Utwórz obietnicę

Aby utworzyć obiekt obietnicy, używamy Promise()konstruktora.

 let promise = new Promise(function(resolve, reject)( //do something ));

Promise()Konstruktor przyjmuje jako argument funkcji. Funkcja przyjmuje również dwie funkcje resolve()i reject().

Jeśli obietnica powróci, resolve()funkcja jest wywoływana. A jeśli wystąpi błąd, reject()wywoływana jest funkcja.

Załóżmy, że poniższy program jest programem asynchronicznym. Następnie program można obsługiwać za pomocą obietnicy.

Przykład 1: Program z obietnicą

 const count = true; let countValue = new Promise(function (resolve, reject) ( if (count) ( resolve("There is a count value."); ) else ( reject("There is no count value"); ) )); console.log(countValue);

Wynik

 Obietnica (: "Istnieje wartość licznika")

W powyższym programie Promisetworzony jest obiekt, który ma dwie funkcje: resolve()i reject(). resolve()jest używany, jeśli proces się powiedzie i reject()jest używany, gdy wystąpi błąd w obietnicy.

Obietnica zostaje spełniona, jeśli wartość count jest prawdziwa.

Działanie obietnicy JavaScript

Łączenie obietnic JavaScript

Obietnice są przydatne, gdy musisz obsłużyć więcej niż jedno zadanie asynchroniczne, jedno po drugim. W tym celu używamy łańcuchów obietnic.

Można wykonać operację po obietnica zostanie rozwiązany przy użyciu metod then(), catch()i finally().

JavaScript then () metoda

then()Metoda jest stosowana z zwrotnego kiedy obietnica jest z powodzeniem spełniony lub rozwiązane.

Składnia then()metody to:

 promiseObject.then(onFulfilled, onRejected);

Przykład 2: Chaining the Promise with then ()

 // returns a promise let countValue = new Promise(function (resolve, reject) ( resolve('Promise resolved'); )); // executes when promise is resolved successfully countValue.then( function successValue(result) ( console.log(result); ), ) .then( function successValue1() ( console.log('You can call multiple functions this way.'); ), );

Wynik

 Obietnica rozwiązana W ten sposób można wywołać wiele funkcji.

W powyższym programie then()metoda jest używana do łączenia funkcji z obietnicą. then()Metoda jest wywoływana, gdy obietnica zostanie rozwiązany pomyślnie.

Możesz łączyć wiele then()metod z obietnicą.

Metoda catch () JavaScript

catch()Metoda jest stosowana z zwrotnego, gdy obietnica zostaje odrzucony lub gdy wystąpi błąd. Na przykład,

 // returns a promise let countValue = new Promise(function (resolve, reject) ( reject('Promise rejected'); )); // executes when promise is resolved successfully countValue.then( function successValue(result) ( console.log(result); ), ) // executes if there is an error .catch( function errorValue(result) ( console.log(result); ) );

Wynik

 Obietnica odrzucona

W powyższym programie obietnica zostaje odrzucona. A catch()metoda jest używana z obietnicą obsługi błędu.

Działanie łańcucha obietnic JavaScript

Obietnica JavaScript a wywołanie zwrotne

Obietnice są podobne do funkcji wywołania zwrotnego w tym sensie, że obie mogą być używane do obsługi zadań asynchronicznych.

Funkcje zwrotne JavaScript mogą być również używane do wykonywania zadań synchronicznych.

Różnice między nimi można podsumować w następujących punktach:

Obietnica JavaScript

  1. Składnia jest przyjazna dla użytkownika i łatwa do odczytania.
  2. Obsługa błędów jest łatwiejsza do zarządzania.
  3. Przykład: 
     api (). then (function (result) (return api2 ();)). then (function (result2) (return api3 ();)). then (function (result3) (// do work)). catch ( function (error) (// obsłuż każdy błąd, który może wystąpić przed tym punktem));

JavaScript Callback

  1. Składnia jest trudna do zrozumienia.
  2. Obsługa błędów może być trudna do opanowania.
  3. Przykład: 
     api (function (result) (api2 (function (result2) (api3 (function (result3) (// do work if (error) (// zrób coś) else (// zrób coś)));));)) ;

JavaScript last () metoda

You can also use the finally() method with promises. The finally() method gets executed when the promise is either resolved successfully or rejected. For example,

 // returns a promise let countValue = new Promise(function (resolve, reject) ( // could be resolved or rejected resolve('Promise resolved'); )); // add other blocks of code countValue.finally( function greet() ( console.log('This code is executed.'); ) );

Output

 This code is executed.

JavaScript Promise Methods

There are various methods available to the Promise object.

Method Description
all(iterable) Waits for all promises to be resolved or any one to be rejected
allSettled(iterable) Waits until all promises are either resolved or rejected
any(iterable) Returns the promise value as soon as any one of the promises is fulfilled
race(iterable) Wait until any of the promises is resolved or rejected
reject(reason) Returns a new Promise object that is rejected for the given reason
resolve(value) Returns a new Promise object that is resolved with the given value
catch() Appends the rejection handler callback
then() Appends the resolved handler callback
finally() Appends a handler to the promise

To learn more about promises in detail, visit JavaScript Promises.

Interesujące artykuły...