Nie będę tutaj pisał o zupełnych podstawach Promisów. W celu poznania tego zagadnie od początku polecam najpierw artykuł ze strony developer.mozilla.org . W artykule skupię się na bardziej zaawansowanym użyciu.
Promise chaining
Promise chaining – umożliwia nam określenie kolejnych kroków działania aplikacja w zależności od tego kiedy otrzymamy wynik Promisa oraz od tego jaki on będzie. Możemy zrealizować to na dwa sposoby. Pierwszym jest dopisywanie słowa kluczowego .then na końcu deklaracji, natomiast drugi to przypisywanie kolejnych rezultatów działania Promisów do nowych zmiennych i również użycie .then
let promise1 = new Promise((resolve, reject) => {
console.log('Initial');
setTimeout(function(){
resolve('OK'); }, 3000);
})
.then((result1) => {
console.log('result1: ', result1);
return 'result1 OK'
})
.catch(() => {
console.log('We have a problem.');
})
.then((result2) => {
console.log('Do it, no matter what happened before');
console.log('result2 ', result2);
});
W przypadku nowoczesnych frameworków JavaScriptowych bardziej przyda się drugi (poniższy) zapis, gdzie Promisa i wynik pracy na nim będziemy mogli przekazywać pomiędzy kolejnymi zmiennymi (przykładowo pomiędzy różnymi komponentami aplikacji).
let promise = new Promise(resolve => {
setTimeout(() => resolve("OK!"), 1000);
});
let promise2 = promise.then((result) => console.log(result)).then(() => {
console.log('result promise2 nothing was returned previously');
return 'OK promise2'
});
let promise3 = promise2.then((result) => {
console.log('result promise3', result);
throw new Error('Something failed');
})
promise3.then((result) => {
console.log('promise3 result ', result);
}).catch((error) => {
console.log('error', error);
});
Async / Await
Użycie Async/Await – innym sposobem pracy z asynchronicznymi zapytaniami jest użycie Async/Await. Tutaj jednak istotna uwaga funkcja ta została powszechnie dodana do obsługi w popularnych przeglądarkach dopiero w 2017 roku (!). Użycie: nazwę funkcji należy poprzedzić Async, a następnie we wnętrzu tej funkcji może zostać zastosowany Await. Zapis taki pozwala na bezpośrednie przypisania wyniku Promisa do zmiennej.
async function someFunc() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("done!"), 1000)
});
let result = await promise; // wait till the promise resolves (*)
console.log(result);
}
someFunc();
Promise.all
Promise.all – ostatni z prezentowanych zaawansowanych Promisów umożliwia wykonanie kilku promisów, a ich rezutat zapisany zostanie w tablicy. Wynik otrzymamy dopiero kiedy wszystkie Promisy zostaną wykonane.
Promise.all([
new Promise((resolve, reject) => setTimeout(() => resolve(10), 3000)),
new Promise((resolve, reject) => setTimeout(() => resolve(11), 2000)),
new Promise((resolve, reject) => setTimeout(() => resolve(12), 1000))
]).then( (result) => {
console.log(result);
});