Використання Promise

Це пост з серії постів про асинхронний код у JS

Promise - це об’єкт, який представляє асинхронну операцію. У перекладі з англійської promise означає «обіцянка». Можна уявити, що це обіцянка від браузера надати в майбутньому або результат операції, або помилку, пов’язану з її виконанням.
Приклад використання: перепишемо попередню функцію downloadImage, щоб вона повертала Promise.

let promise = downloadImage(url1);
promise.then(image => document.body.append(image));

Тут ми все одно використовуємо callback-функцію, але передаємо її вже в метод .then() об’єкта promise. Це важливий момент:
- тепер асинхронна операція має об’єктне представлення, яке можна передавати як параметр у різні частини коду;
- можна будувати ланцюжки промісів, позбуваючись вкладеності, яка виникала з callback.

Приклад:
downloadImage(url1) // отримуємо проміс
.then(image => { // вказуємо що робити коли promise перейде в стан resolved
document.body.append(image);
return downloadImage(url2); // виконуємо метод, який повертає promise
})
.then(image => { // результат роботи попереднього промісу передається як значення
document.body.append(image);
return downloadImage(url3);
})
.then(image => {
document.body.append(image);
});

Тепер код виглядає лінійним і набагато зручнішим для супроводу.
У прикладах вище ми не розглядали, як саме створюється Promise, адже важливо зрозуміти мотивацію використання цих об’єктів. Тим більше, що більшість API браузера вже повертають готові проміси. Наприклад:

fetch('<https://jsonplaceholder.typicode.com/users>')
.then(res => res.json());

що хочете детальніше розібратися зі створенням Promise вручну - перегляньте документацію на MDN або мій відео урок на ITVDN.