Промисы в JavaScript

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

Промис в реальной жизни

Когда я даю вам обещание, вы принимаете мое слово, что я выполню это обещание. Но я не говорю вам, когда это обещание будет исполнено, поэтому жизнь продолжается…

Есть два возможных сценария: исполнение или отказ.

• Выполнение. Однажды я выполню это обещание. Это делает вас таким счастливым, что вы пишете об этом в Твиттере!
• Отказ. Однажды я скажу вам, что не могу выполнить обещание. Вы делаете грустный пост в Твиттере о том, что я не сделал того, что обещал.

Оба сценария вызывают действие. Первый - положительный, а следующий - отрицательный. Помните об этом сценарии, когда будете изучать, как работают обещания JavaScript.

Когда использовать промис

JavaScript работает синхронно. Он идет сверху вниз. Каждая строка кода ниже будет ждать выполнения кода выше. Но когда вы хотите получить данные из API, вы не знаете, как быстро вы получите эти данные обратно. Скорее всего, вы еще не знаете, получите ли вы данные или ошибку. Ошибки случаются постоянно, и их нельзя спланировать. Но мы можем быть к этому готовы.

Поэтому, когда вы ждете результата от API, ваш код блокирует браузер. Это приведет к замораживанию браузера. Ни мы, ни наши пользователи этому совсем не рады! Идеальная ситуация для промиса.

Как использовать промис

Теперь, когда мы знаем, что вы должны использовать промис, когда делаете запросы Ajax, мы можем погрузиться в использование его. Во-первых, я покажу вам, как определить функцию, которая возвращает промис. Затем мы научимся использовать эту функцию.

Ниже приведен пример функции, которая возвращает промис:

function doSomething(value) {
    return new Promise((resolve, reject) => {
        // фейковый вызов API
        setTimeout(() => {
            if(value) {
                resolve(value)
            } else {
                reject('неуспешно')
            }
        }, 5000)
    });
}

Функция возвращает промис. Этот промис может быть решен или отвергнут. Как и обещание в реальной жизни.

Согласно MDN Web Docs, promise JavaScript может иметь одно из трех состояний:

• ожидание: начальное состояние, не выполнено и не отвергнуто.
• выполнено: означает, что операция была успешно завершена.
• отклонено: означает, что операция провалилась.

Ожидающее состояние - это начальное состояние. Это означает, что мы имеем это состояние, как только вызываем функцию doSomething (), поэтому мы еще не знаем ничего.

В этом примере, если значение истинно, промис будет выполнен. В этом случае мы передаем в него значение переменной, чтобы использовать его при вызове этой функции. Мы можем определить наши условия, чтобы решить, когда выполнить.

В этом примере, если значение ложно, промис будет отклонен – тогда мы передаем сообщение об ошибке. Здесь это просто строка, но когда вы делаете запрос Ajax, вы передаете ошибку сервера.

Использование

Теперь, когда мы знаем, как определить промис, давайте использовать.

// классический Promise
doSomething().then((result) => {
    // что-то делаем с результатом
}).catch((error) => {
    console.error('Error message: ', error)
})


// Возвращаем `Promise` with Async/Await 
(async () => {
    let data = null
    try {
        data = await doSomething()
        // что-то делаем с результатом
    } catch(error) {
        console.error('Error message: ', error)
    }
})();

Вы можете распознать функцию, возвращающую промис, с помощью метода .then() или ключевого слова await. Уловка будет вызвана, если в вашем обещании есть ошибка. Таким образом, обработка ошибок для промиса довольно проста.

Промися также используются во многих библиотеках и фреймворках JavaScript. Но самый простой веб-API - это Fetch API, который вы должны использовать для создания Ajax-запросов. Надеюсь, это поможет вам понять, как работают промисы, и что вы можете с ними сделать.