Promisy

Frontend SELF PL
Poziom 43 , Lekcja 1
Dostępny

2.1 Tworzenie promisów

Promisy (Promises) to obiekt reprezentujący zakończenie (lub niepowodzenie) operacji asynchronicznej i jej wynik. Zostały wprowadzone w ES6 (ECMAScript 2015) i stały się standardowym sposobem pracy z kodem asynchronicznym w JavaScript.

Podstawowe koncepcje

Promis może być w jednym z trzech stanów:

  1. Pending (oczekujące): stan początkowy, nie zakończone ani odrzucone.
  2. Fulfilled (zrealizowane): operacja zakończyła się pomyślnie.
  3. Rejected (odrzucone): operacja zakończyła się błędem.

Tworzenie promisa

Promis tworzy się za pomocą konstruktora Promise, który przyjmuje funkcję wykonawczą (executor function). Ta funkcja przyjmuje dwa argumenty: resolve i reject. W tej funkcji wykonywany jest kod asynchroniczny i w przypadku sukcesu wywoływane jest resolve, a w przypadku błędu — reject.

Składnia:

    
      const promise = new Promise((resolve, reject) => {
        // Operacja asynchroniczna
        if (/* zakończona sukcesem */) {
          resolve(value); // Sukces
        } else {
          reject(error); // Błąd
        }
      });
    
  

Przykład tworzenia promisa:

JavaScript
    
      const myPromise = new Promise((resolve, reject) => {
        const success = true; // Warunek sukcesu wykonania

        if (success) {
          resolve('Operacja zakończona sukcesem');
        } else {
          reject('Operacja nie powiodła się');
        }
      });
    
  

2.2 Korzystanie z promisów

Metoda then

Metoda then jest używana do przetwarzania pomyślnego wykonania promisa. Przyjmuje dwie funkcje: pierwszą do przetwarzania sukcesu i drugą do obsługi błędów. Jednakże zazwyczaj do obsługi błędów używa się metody catch.

Przykład użycia then:

JavaScript
    
      myPromise.then(
        (successMessage) => {
          console.log(successMessage); // Wyświetli: Operacja zakończona sukcesem
        },
        (errorMessage) => {
          console.error(errorMessage); // Wywołane w przypadku błędu
        }
      );
    
  

Metoda catch

Metoda catch jest używana do obsługi błędów promisa. Przyjmuje jedną funkcję, która zostanie wywołana w przypadku odrzucenia promisa.

Przykład użycia catch:

JavaScript
    
      myPromise
        .then((successMessage) => {
          console.log(successMessage);
        })
        .catch((errorMessage) => {
          console.error(errorMessage); // Wywołane: Operacja nie powiodła się
        });
    
  

Metoda finally

Metoda finally jest używana do wykonania kodu niezależnie od wyniku promisa (sukces lub błąd). Nie przyjmuje argumentów i jest wykonywana w każdym przypadku po zakończeniu lub odrzuceniu promisa.

Przykład użycia finally:

JavaScript
    
      myPromise
        .then((successMessage) => {
          console.log(successMessage);
        })
        .catch((errorMessage) => {
          console.error(errorMessage);
        })
        .finally(() => {
          console.log('Operacja zakończona'); // Wywołane w każdym przypadku
        });
    
  

2.3 Przykłady użycia promisów

Przykład 1: Operacja asynchroniczna z użyciem promisa

Symulacja operacji asynchronicznej z timerem.

JavaScript
    
      function asyncOperation() {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            const success = Math.random() > 0.5;

            if (success) {
              resolve('Operacja asynchroniczna zakończona sukcesem');
            } else {
              reject('Operacja asynchroniczna nie powiodła się');
            }
          }, 2000);
        });
      }

      asyncOperation()
        .then((message) => {
          console.log(message);
        })
        .catch((error) => {
          console.error(error);
        })
        .finally(() => {
          console.log('Operacja asynchroniczna zakończona');
        });
    
  

Przykład 2: Wykonanie sekwencyjne promisów

Symulacja sekwencyjnych operacji asynchronicznych.

JavaScript
    
      function firstOperation() {
        return new Promise((resolve) => {
          setTimeout(() => {
            console.log('Pierwsza operacja zakończona');
            resolve('Pierwszy wynik');
          }, 1000);
        });
      }

      function secondOperation(result) {
        return new Promise((resolve) => {
          setTimeout(() => {
            console.log('Druga operacja zakończona');
            resolve(`Drugi wynik, otrzymano: ${result}`);
          }, 1000);
        });
      }

      firstOperation()
        .then((result) => {
          return secondOperation(result);
        })
        .then((finalResult) => {
          console.log(finalResult);
        })
        .catch((error) => {
          console.error(error);
        })
        .finally(() => {
          console.log('Obie operacje zakończone');
        });
    
  

Przykład 3: Wykonanie równoległe promisów z Promise.all

Symulacja równoległych operacji asynchronicznych.

JavaScript
    
      function operationOne() {
        return new Promise((resolve) => {
          setTimeout(() => {
            console.log('Operacja One zakończona');
            resolve('Wynik One');
          }, 1000);
        });
      }

      function operationTwo() {
        return new Promise((resolve) => {
          setTimeout(() => {
            console.log('Operacja Two zakończona');
            resolve('Wynik Two');
          }, 1500);
        });
      }

      Promise.all([operationOne(), operationTwo()])
        .then((results) => {
          console.log('Wszystkie operacje zakończone');
          console.log(results); // Wyświetli: ['Wynik One', 'Wynik Two']
        })
        .catch((error) => {
          console.error('Jedna z operacji nie powiodła się', error);
        });
    
  
Komentarze
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION