Struktura Promise (JavaScript) i jak z tym pracować

18 lut 14:33

3 min. czytania

meme code

@memecode

Treść sponsorowana

Okładka posta: Struktura Promise (JavaScript) i jak z tym pracować

Spis treściKliknij link, aby przejść do wybranego miejsca

Jak wygląda struktura Promise Praca z Promise Łańcuchy Promise Promise.all, Promise.race i Promise.any

Ta treść została automatycznie przetłumaczona z ukraińskiego.

Zobacz oryginał

Promise — to obiekt, który reprezentuje wynik operacji asynchronicznej. Umożliwiają one pracę z opóźnionymi wynikami bez zagnieżdżonych callbacków, co sprawia, że kod jest bardziej czytelny. Wcześniej napisałem już mały wpis na temat czym jest Promise. Ale teraz przyjrzymy się strukturze i niektórym metodom.

Jak wygląda struktura Promise

Promise tworzy się za pomocą konstruktora new Promise(), któremu przekazywana jest funkcja z dwoma argumentami: resolve i reject. To właśnie tę strukturę należy zapamiętać. Przyjrzyjmy się przykładzie:

const promise = new Promise((resolve, reject) => {
  const success = Math.random() > 0.5;
  
  setTimeout(() => {
    if (success) {
      resolve("Operacja zakończona pomyślnie");
    } else {
      reject("Wystąpił błąd");
    }
  }, 1000);
});

Ten kod tworzy obietnicę, która po sekundzie (timeout 1000) albo zostaje rozwiązana (resolve) z ciągiem "Operacja zakończona pomyślnie", albo odrzucana (reject) z komunikatem o błędzie. Oznacza to, że stworzyliśmy emulację odpowiedzi success, poczekaliśmy sekundę i otrzymaliśmy wynik, który zależał od naszej losowej wartości w success.

Praca z Promise

Promise ma metody .then(), .catch() i .finally() do obsługi wyników.

promise
  .then(result => {
    console.log("Sukces:", result);
  })
  .catch(error => {
    console.log("Błąd:", error);
  })
  .finally(() => {
    console.log("Operacja zakończona");
  });

Tutaj .then() otrzymuje wartość z resolve, .catch() obsługuje błąd z reject, a .finally() wykonuje się zawsze, niezależnie od wyniku. Te metody również warto zapamiętać.

Łańcuchy Promise

Metoda .then() zwraca nowy Promise, co pozwala na sekwencyjne (łańcuchowe) wykonanie.

new Promise(resolve => resolve(10))
  .then(num => num * 2)
  .then(num => num + 5)
  .then(result => console.log("Wynik:", result));

Tutaj początkowa wartość 10 jest mnożona przez 2, dodawane jest 5, a w rezultacie wyświetlane jest 25.

Promise.all, Promise.race i Promise.any

Metoda Promise.all() czeka na wykonanie wszystkich przekazanych obietnic.

Promise.all([
  new Promise(resolve => setTimeout(() => resolve("Pierwsze"), 1000)),
  new Promise(resolve => setTimeout(() => resolve("Drugie"), 2000))
]).then(results => console.log("Wszystkie wykonane:", results));

A Promise.race() zwraca pierwszą wykonaną obietnicę. Tę metodę łatwo zapamiętać po nazwie race - kto pierwszy, ten wygrywa.

Promise.race([
  new Promise(resolve => setTimeout(() => resolve("Pierwsze"), 1000)),
  new Promise(resolve => setTimeout(() => resolve("Drugie"), 500))
]).then(result => console.log("Pierwsze wykonane:", result));

Promise.any() — to metoda, która przyjmuje tablicę obietnic i zwraca pierwszą pomyślnie wykonaną obietnicę. Jeśli wszystkie obietnice zostaną odrzucone, zwraca błąd AggregateError.

const p1 = new Promise((_, reject) => setTimeout(() => reject("Błąd 1"), 1000));
const p2 = new Promise(resolve => setTimeout(() => resolve("Sukces 2"), 2000));
const p3 = new Promise(resolve => setTimeout(() => resolve("Sukces 3"), 3000));

Promise.any([p1, p2, p3])
  .then(result => console.log("Pierwszy pomyślny wynik:", result))
  .catch(error => console.log("Wszystkie obietnice odrzucone:", error));

Co się dzieje w przykładzie:

p1 jest odrzucana po 1 sekundzie.
p2 jest pomyślnie wykonywana po 2 sekundach.
Promise.any() zwraca p2, ponieważ była pierwsza pomyślna.
Jeśli wszystkie obietnice zostaną odrzucone, zwróci AggregateError, który będzie zawierał wszystkie błędy.

Ta metoda jest przydatna, gdy trzeba uzyskać pierwszy udany wynik, ignorując nieudane