Підручник з обіцянок JavaScript: вирішення, відхилення та ланцюжок у JS та ES6

Обіцянки - це один із способів мати справу з асинхронними операціями в JavaScript. Багато людей бореться з розумінням того, як працюють обіцянки, тому в цій публікації я спробую пояснити їх якомога простіше.

Обіцянки - це широка тема, тому я не можу заглиблюватися в усі подробиці цієї статті. Але ви знайдете загальний вступ до того, що таке Promises, пояснення таких термінів, як вирішення, відхилення та ланцюжок, і приклад коду для створення та використання Promises.

Обов’язкова умова: щоб краще зрозуміти цю статтю, перегляньте мій інший допис про зворотні дзвінки JavaScript.

Що таке обіцянка?

Обіцянка в JavaScript схожа на обіцянку в реальному житті. Коли ми даємо обіцянку в реальному житті, це гарантія того, що ми збираємося щось робити в майбутньому. Тому що обіцянки можна давати лише на майбутнє.

Обіцянка має 2 можливі результати: вона буде або виконана, коли прийде час, або ні.

Це теж саме для обіцянок у JavaScript. Коли ми визначимо обіцянку в JavaScript, вона буде вирішена, коли прийде час, або вона буде відхилена.

Обіцянки в JavaScript

Перш за все, Обіцянка - це об’єкт. Існує 3 стани об’єкта Promise:

  • Очікує на розгляд: Початковий стан, до того, як Проміс буде успішним або невдалим
  • Вирішено: Завершено обіцянку
  • Відхилено: Помилка обіцянки

Наприклад, коли ми запитуємо дані від сервера за допомогою Promise, вони будуть знаходитись в режимі очікування, доки ми не отримаємо наші дані.

Якщо ми хочемо отримати інформацію з сервера, обіцянка буде успішно вирішена. Але якщо ми не отримаємо інформацію, Обіцянка буде у відхиленому стані.

Крім того, якщо є кілька запитів, то після вирішення (або відхилення) першого Промісу розпочнеться новий процес, до якого ми можемо приєднати його безпосередньо методом, який називається ланцюжком.

Якщо ви хочете, ви також можете переглянути відеоверсію нижче:

У чому різниця між зворотними дзвінками та обіцянками?

Основна різниця між функціями зворотного виклику та обіцянками полягає в тому, що ми прикріплюємо зворотний виклик до обіцянки, а не передаємо його. Тож ми все ще використовуємо функції зворотного виклику з Promises, але по-іншому (ланцюжок).

Це одна з найбільших переваг використання Promises, але чому?

Що таке ланцюжок?

Функції зворотного виклику використовуються окремо для асинхронних операцій у JavaScript протягом багатьох років. Але в деяких випадках використання Promises може бути кращим варіантом.

Якщо потрібно виконати кілька асинхронних операцій, і якщо ми спробуємо використати для них старі старі зворотні виклики, ми швидко опинимось у ситуації, яка називається пеклом зворотного виклику:

firstRequest(function(response) { secondRequest(response, function(nextResponse) { thirdRequest(nextResponse, function(finalResponse) { console.log('Final response: ' + finalResponse); }, failureCallback); }, failureCallback); }, failureCallback);

Однак якщо ми обробляємо одну і ту ж операцію з Promises, оскільки ми можемо приєднати зворотні виклики, а не передавати їх, цього разу той же код вище виглядає набагато чистішим і легшим для читання:

firstRequest() .then(function(response) { return secondRequest(response); }).then(function(nextResponse) { return thirdRequest(nextResponse); }).then(function(finalResponse) { console.log('Final response: ' + finalResponse); }).catch(failureCallback);

Код трохи вище показує, як кілька зворотних викликів можуть бути зв’язані один за одним. Прив’язка ланцюгів є однією з найкращих особливостей Promises.

Створення та використання обіцянки крок за кроком

По-перше, ми використовуємо конструктор для створення об’єкта Promise:

const myPromise = new Promise();

Потрібні два параметри, один для успіху (вирішення) та другий для відмови (відхилення):

const myPromise = new Promise((resolve, reject) => { // condition });

Нарешті, буде умова. Якщо умова виконана, Обіцянка буде вирішена, інакше вона буде відхилена:

const myPromise = new Promise((resolve, reject) => { let condition; if(condition is met) { resolve('Promise is resolved successfully.'); } else { reject('Promise is rejected'); } });

Тож ми створили своє перше Обіцяння. Тепер давайте використаємо його.

then () для вирішених обіцянок:

Якщо ви переглянете зображення на початку цього допису, то побачите, що є 2 справи: одна - для вирішених обіцянок і одна - для відхилених. Якщо Обіцянку буде вирішено (випадок успіху), то щось станеться далі (залежить від того, що ми зробимо з успішною Обіцянкою).

myPromise.then();

Метод then () викликається після вирішення Promise. Тоді ми можемо вирішити, що робити з вирішеною обіцянкою.

Наприклад, давайте запишемо повідомлення на консоль, яку ми отримали від Promise:

myPromise.then((message) => { console.log(message); });

catch () для відхилених обіцянок:

Однак метод then () призначений лише для вирішених Promises. Що робити, якщо Проміс не вдається? Потім нам потрібно використовувати метод catch ().

Так само ми додаємо метод then (). Ми також можемо безпосередньо приєднати метод catch () відразу після ():

myPromise.then((message) => { console.log(message); }).catch((message) => { console.log(message); });

Отже, якщо обіцянку відхиляють, вона переходить до методу catch (), і цього разу ми побачимо інше повідомлення на консолі.

Загорнути

Отже, таким чином ми створюємо Promise у JavaScript та використовуємо його для вирішених та відхилених справ. Обіцянки - це більш широка тема, і про них можна дізнатися набагато більше речей. Тож розуміння того, як вони працюють, вимагає часу.

Цей допис - це лише вступ до Promises, і я сподіваюся, що він виявився корисним для отримання уявлення про те, що таке JavaScript Promises та як ними користуватися.

Якщо ви хочете дізнатись більше про веб-розробку, сміливо відвідайте мій канал Youtube, щоб дізнатися більше.

Thank you for reading!