Делаем веб

🙏🏻 Promise. Часть 2

В прошлой части мы познакомились (или вспомнили), что такое Promise и зачем он нужен. Пришло время понять, как его использовать в продукшене. А делается это с помощью обработчиков.

Обработчик успеха
Функция-обработчик в случае успеха может быть передана в метод .then. В себя эта функция принимает данные, с которыми Promise выполнился ("зарезолвился"). Пример:

const myPromise = new Promise((resolve, reject) => {
    const name = 'Liza';
    resolve(name);
});
// выведется "Hi, Liza!"
myPromise.then((data) => 
    console.log(`Hi, ${data}`));

Обработчик ошибки
Функция-обработчик ошибки может быть передан двумя способами.

1 - через метод .then вторым аргументом. Формат работы такой же, как и в предыдущем случае. Пример:

const myPromise = new Promise((resolve, reject) => {
  reject('custom error');
});

const onSuccess = (data) => 
    console.log(`Hi, ${data}`);

const onError = (error) => 
    console.error(
        `Error: ${error}`
    );

// выведется 
// "Error: custom error"
myPromise.then(
    onSuccess, 
    onError
);

2 - через специальный метод .catch. Работает аналогично предыдущему пункту.

⚠️ Важно помнить: ошибки Promise - это исключения. То есть с каким-то логически ошибочными историями Promise не справится самостоятельно. Например, если запрос упадет с кодом ответа, отличным от 200, catch не поймает эту ошибку, т.к. это штатное поведение, а не исключение.

⚠️ ⚠️ При оффлайн запросах Promise сразу падает в catch. Важно помнить это, например, при настройке оффлайн взаимодействия

Про другие интересные случаи ошибочного использования промисов можно прочитать здесь.

Финальная обработка

Если нам нужно, чтобы какая-то обработка была выполнена в любом случае, как бы Promise не выполнился, то можно использовать метод .finally. Формат такой же - передаем функцию, но она не принимает в себя данные.

Можно использовать finally до основных обработчиков then/catch. Например, для организации индикаторов загрузки. Finally пропустит все данные (результат или ошибку) дальше к следующим обработчикам.

Вот и всё про стандартное использование обработчиков Promise. В следующих частях мы посмотрим на цепочки промисов, а также разберем альтернативные способы асинхронной работы. Бегом делать веб! 🏃🏻‍♀️

#basics

177 views10:36