Umiejętna praca z Promisami w JavaScript jest niezbędna do stworzenia niemal każdej rozwiniętej aplikacji. Wyjątkiem jest tutaj używanie zupełnie innych technologii do obsługi zapytań HTTP (np. biblioteka RxJs, o której pisałem w artykule: RxJs – programowanie reaktywne w Angular2).
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);
});
W rezutacie po uruchomieniu powyższego kodu w konsoli otrzymamy wynik:
Promise chaining JavaScript

Kontynuując przeglądanie strony, wyrażasz zgodę na używanie przez nas plików cookies. dowiedz się więcej

Aby zapewnić Tobie najwyższy poziom realizacji usługi, opcje ciasteczek na tej stronie są ustawione na "zezwalaj na pliki cookies". Kontynuując przeglądanie strony bez zmiany ustawień lub klikając przycisk "Akceptuję" zgadzasz się na ich wykorzystanie.

Zamknij