FRONT-END

PROMISES

Promises w JavaScript

Promise w JavaScript to obiekt reprezentujący wynik operacji asynchronicznej, który będzie dostępny teraz, w przyszłości lub nigdy (w przypadku błędu).

Promises zostały wprowadzone, aby uporządkować kod asynchroniczny i wyeliminować problem tzw. callback hell.

Dlaczego używamy Promises?

  • czytelniejszy kod asynchroniczny
  • łatwiejsza obsługa błędów
  • lepsze zarządzanie sekwencją operacji

Stany Promise

Każdy Promise może znajdować się w jednym z trzech stanów:

  • pending – oczekiwanie na wynik
  • fulfilled – zakończony sukcesem
  • rejected – zakończony błędem

Tworzenie Promise

const myPromise = new Promise((resolve, reject) => {
  const success = true;

  if (success) {
    resolve("Operacja zakończona sukcesem");
  } else {
    reject("Wystąpił błąd");
  }
});

Obsługa Promise – then / catch

myPromise
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error);
  });

Metoda then() obsługuje sukces, a catch() przechwytuje błędy.

Łańcuchowanie Promise

Promises umożliwiają wykonywanie operacji jedna po drugiej:

fetch(url)
  .then(response => response.json())
  .then(data => processData(data))
  .then(result => console.log(result))
  .catch(error => console.error(error));

Promise a async / await

Składnia async / await jest oparta na Promise i stanowi wygodniejszy sposób ich używania.

async function loadData() {
  try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

Metody statyczne Promise

  • Promise.all() – wszystkie Promise muszą się powieść
  • Promise.race() – zwraca pierwszy zakończony Promise
  • Promise.any() – pierwszy spełniony Promise
  • Promise.allSettled() – wszystkie zakończone (sukces/błąd)

Zastosowania Promises

  • zapytania HTTP
  • operacje na plikach
  • timery
  • asynchroniczne przetwarzanie danych

Podsumowanie

Promises są kluczowym elementem nowoczesnego JavaScript. Umożliwiają tworzenie czytelnego, przewidywalnego i łatwego w utrzymaniu kodu asynchronicznego.

1
HOME | CSS | HTML | CONTACT
RED | LIME | ORG |copy(Ⓒ)2023:xyh