Żądania sieciowe, odczyty plików i liczniki czasu kończą się później, ale JavaScript nie może po prostu zatrzymać się i poczekać, w przeciwnym razie strona się zawiesi. JavaScript obiecuje umożliwić schludny sposób powiedzenia „kiedy to się skończy, zrób tamto, a jeśli się nie powiedzie, zrób zamiast tego to”.

Nawet jeśli piszesz głównie async i await, pod spodem używasz obietnic, więc ich zrozumienie znacznie ułatwia debugowanie. Uruchomiliśmy te przykłady w Node.js 24 i pokazane dane wyjściowe pochodzą z tego uruchomienia. Zachowują się tak samo w nowoczesnych przeglądarkach.

Co to jest obietnica?

Obietnica jest symbolem zastępczym przyszłej wartości. Pomyśl o brzęczyku, który podaje Ci restauracja, gdy składasz zamówienie. Nie masz jeszcze jedzenia, ale trzymasz coś, co powie Ci, kiedy będzie gotowe lub że jest problem, a tymczasem możesz zająć się innymi rzeczami.

W kodzie funkcja asynchroniczna natychmiast zwraca obietnicę i dołączasz, co powinno się dalej wydarzyć:

fetch("/api/user")
  .then((response) => response.json())
  .then((user) => console.log(user.name))
  .catch((error) => console.log("Failed:", error.message));

Trzy stany obietnicy

Obietnicę, która zostaje spełniona lub odrzucona, nazywa się rozliczoną. Obietnica może zostać spełniona tylko raz. Następnie jego stan i wartość są ustalane, a późniejsze wywołania resolve lub reject są ignorowane.

Stwórz obietnicę

Zwykle korzystasz z obietnic z interfejsów API, takich jak fetch, ale utworzenie jednego pokazuje, jak działają. Konstruktor otrzymuje dwie funkcje resolve i reject:

function fetchUser(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id > 0) {
        resolve({ id, name: "Asha" });
      } else {
        reject(new Error("Invalid id"));
      }
    }, 100);
  });
}

console.log(fetchUser(1));

// Promise { <pending> }

Natychmiastowe zarejestrowanie obietnicy pokazuje, że nadal oczekuje ona na realizację, ponieważ licznik czasu nie został uruchomiony. Wartość można osiągnąć tylko poprzez procedurę obsługi lub await. Zawsze odrzucaj za pomocą obiektu Error, a nie ciągu, ponieważ Error zawiera ślad stosu, który pomaga w debugowaniu.

potem złap i wreszcie

Te trzy metody dołączają procedury obsługi do obietnicy:

fetchUser(1).then((user) => console.log(user.name));
// Asha

fetchUser(-1)
  .then((user) => console.log("never runs", user))
  .catch((error) => console.log("caught:", error.message))
  .finally(() => console.log("finally"));

// caught: Invalid id
// finally

then działa w przypadku powodzenia, catch działa w przypadku niepowodzenia i finally działa w obie strony. To sprawia, że ​​finally jest właściwym miejscem do sprzątania, np. ukrywania spinnera ładującego. Nie przyjmuje żadnych argumentów, bo nie powinien przejmować się wynikiem.

Łańcuch obietnic

Kluczową ideą jest to, że then zawsze zwraca nową obietnicę. Cokolwiek zwróci Twój handler, staje się wartością tej nowej obietnicy:

Promise.resolve(2)
  .then((n) => n * 10)
  .then((n) => n + 1)
  .then((n) => console.log("chain:", n));

// chain: 21

Jeśli przewodnik zwróci kolejną obietnicę, łańcuch czeka, aż się uspokoi, zanim przejdzie dalej. Oto, co zamienia zagnieżdżone wywołania zwrotne w płaską sekwencję kroków:

getUser(id)
  .then((user) => getOrders(user.id))
  .then((orders) => getInvoice(orders[0].id))
  .then((invoice) => console.log(invoice.total))
  .catch(handleError);

Jak błędy przemieszczają się w łańcuchu

Odrzucona obietnica pomija co then, aż osiągnie catch. Wrzucenie do wnętrza przewodnika również liczy się jako odrzucenie. A catch, który powraca normalnie, przywraca łańcuch na właściwe tory:

Promise.resolve("start")
  .then(() => {
    throw new Error("step 2 failed");
  })
  .then(() => console.log("skipped"))
  .catch((error) => {
    console.log("caught:", error.message);
    return "recovered";
  })
  .then((value) => console.log("continues:", value));

// caught: step 2 failed
// continues: recovered

Pomyśl o tym jak o asynchronicznej wersji try i catch. Jeden catch na końcu zwykle obejmuje cały łańcuch. Jeśli chcesz tylko zarejestrować błąd i nadal ci się to nie udaje, wyrzuć go ponownie z wnętrza catch.

Promise.all, allSettled, rasa i dowolne

Te statyczne metody koordynują kilka obietnic jednocześnie. Wszystkie pobierają tablicę i zwracają jedną obietnicę.

Aby je przetestować, użyliśmy dwóch małych pomocników, jednego, który odniósł sukces po opóźnieniu i drugiego, który zakończył się niepowodzeniem po opóźnieniu:

const wait = (ms, value) =>
  new Promise((resolve) => setTimeout(() => resolve(value), ms));
const fail = (ms, message) =>
  new Promise((_, reject) => setTimeout(() => reject(new Error(message)), ms));

Promise.all

await Promise.all([wait(300, "a"), wait(100, "b"), wait(200, "c")]);

// [ 'a', 'b', 'c' ]   took about 300 ms

Warto zwrócić uwagę na dwa szczegóły. Wyniki zachowują kolejność wprowadzania, mimo że b zakończył pracę jako pierwszy. A całkowity czas wyniósł około 300 ms, czas najwolniejszego zadania, a nie suma 600 ms, ponieważ wszystkie trzy były już uruchomione na raz. Jeśli któryś z nich odrzuci, cała rzecz od razu się odrzuci:

await Promise.all([wait(100, "a"), fail(50, "b failed")]);

// rejected: b failed

Promise.allSettled

To czeka na wszystko i raportuje każdy wynik, więc jedna awaria nie powoduje utraty pozostałych. Pasuje do dashboardu, w którym każdy widget ładuje się niezależnie:

const results = await Promise.allSettled([wait(50, "a"), fail(50, "b failed")]);
results.map((r) => r.status);

// [ 'fulfilled', 'rejected' ]

Promise.race i Promise.any

await Promise.race([wait(300, "slow"), wait(100, "fast")]);   // fast
await Promise.any([fail(50, "x"), wait(100, "ok")]);          // ok

Różnica polega na tym, że race musi rozstrzygnąć pierwszy, nawet jeśli się nie powiedzie, podczas gdy any ignoruje niepowodzenia, o ile coś się powiedzie. Klasycznym zastosowaniem race jest dodanie limitu czasu do powolnego żądania, chociaż wolniejsze zadanie będzie nadal działać w tle, chyba że je anulujesz.

Obietnice i asynchronizacja/czekanie

async i await to bardziej czytelny sposób pracy z tymi samymi obietnicami. Funkcja async zawsze zwraca obietnicę, a await wstrzymuje tę funkcję do czasu spełnienia obietnicy:

async function showInvoice(id) {
  try {
    const user = await getUser(id);
    const orders = await getOrders(user.id);
    console.log(orders.length);
  } catch (error) {
    console.log("Failed:", error.message);
  }
}

Odrzucenia stają się błędami zgłaszanymi, więc zwykłe try i catch działają. Nadal potrzebujesz Promise.all do pracy równoległej, ponieważ oczekiwanie na jedno wywołanie po drugim uruchamia je po kolei. Nasz przewodnik po asynchronizacji/oczekiwaniu JavaScript omawia tę kwestię głębiej.

Obietnice i pętla zdarzeń

Osoby zajmujące się obsługą obietnic nigdy nie są wywoływane natychmiast, nawet jeśli obietnica została już rozliczona. Uruchamiają się po zakończeniu bieżącego kodu i przed jakimkolwiek licznikiem czasu. Oto dowód:

setTimeout(() => console.log("timeout"), 0);
Promise.resolve().then(() => console.log("microtask"));
console.log("sync");

// sync
// microtask
// timeout

Kod synchroniczny działa jako pierwszy. Następna jest kolejka mikrozadań, w której znajdują się procedury obsługi obietnic. Dopiero wtedy pętla zdarzeń przejmuje następne zadanie, np. licznik czasu. To popularne pytanie podczas rozmów kwalifikacyjnych, które wyjaśnia, dlaczego setTimeout zero nie jest tak naprawdę natychmiastowe.

Obietnice a wywołania zwrotne

Typowe błędy

• Zapominając wrócić do środka then. Bez return następny krok otrzymuje undefined i nie czeka na Twoją wewnętrzną obietnicę.
• W ogóle nie catch. Powoduje to nieobsłużone odrzucenie, a w Node.js domyślnie zatrzymuje proces.
• Zagnieżdżanie zamiast łączenia. Umieszczenie then wewnątrz then odtwarza piekło wywołań zwrotnych. Zwróć obietnicę i kontynuuj łańcuch.
• Zawijanie obietnicy w new Promise. Jeśli funkcja już zwraca obietnicę, po prostu jej użyj.
• Używanie forEach z asynchronicznymi wywołaniami zwrotnymi. To nie czeka. Użyj for...of lub Promise.all z map, jak pokazano w naszym przewodniku po metodach tablicowych JavaScript.
• Myślenie, że obietnicę można anulować. Sama nie jest w stanie tego zrobić. W przypadku żądań użyj AbortController.

Podsumowanie

Obietnice sprowadzają się do kilku zasad: obietnica zostaje spełniona raz, then zwraca nową obietnicę, a błędy przechodzą w dół łańcucha, aż coś je złapie. Kiedy te zasady staną się naturalne, async i await przestaną być magią. Aby poćwiczyć, przepisz jedną funkcję opartą na wywołaniu zwrotnym, używając obietnic, a następnie pobierz dwa punkty końcowe za pomocą Promise.all i poprawnie obsłuż błąd.

Najczęstsze pytania

Ucz się dalej