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:
- Pending (oczekujące): stan początkowy, nie zakończone ani odrzucone.
- Fulfilled (zrealizowane): operacja zakończyła się pomyślnie.
- 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:
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:
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:
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:
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.
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.
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.
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);
});
GO TO FULL VERSION