Учебник для обещания JavaScript: решить, отклонить и цепочку в JS и ES6

Автор оригинала: FreeCodeCamp Community Member.

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

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

Пререквизит: Чтобы лучше понять эту статью, посмотрите мой другой пост о Обратные вызовы JavaScript Отказ

Что обещание?

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

Обещание имеет 2 возможных результата: он будет либо храниться, когда придет время, или он не будет.

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

Обещания в JavaScript

Прежде всего, обещание является объектом. Есть 3 состояния объекта обещания:

• В ожидании: Первоначальное состояние, до того, как обещание успешно или не удалось
• Решено: Завершено обещание
• Отклонено: Неудачное обещание

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

Если мы достигнем, чтобы получить информацию с сервера, обещание будет успешно разрешено. Но если мы не получим информацию, то обещание будет в отвержденном состоянии.

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

Если вы предпочитаете, вы также можете посмотреть видео-версию ниже:

В чем разница между обратными вызовами и обещаниями?

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

Это одно из величайших преимуществ использования обещаний, но почему?

Что такое цепочка?

Функции обратного вызова были использованы отдельно для асинхронных операций в JavaScript в течение многих лет. Но в некоторых случаях использование обещаний может быть лучшим вариантом.

Если есть несколько операций Async, и если мы стараемся использовать для них хорошие обратные вызовы, мы быстро окажемся внутри ситуации, называемой Обратный вызов Ад :

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

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

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

Код чуть выше показывает, как несколько обратных вызовов могут быть церованы на один за другим. Цепочка является одной из лучших особенностей обещаний.

Создание и использование шага обещания за шагом

Во-первых, мы используем конструктор для создания объекта обещания:

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');  
    }
});

Таким образом, мы создали наше первое обещание. Теперь давайте будем использовать это.

тогда () для разрешенных обещаний:

Если вы пересмотрите картину в начале этого поста, вы увидите, что есть 2 случая: один для разрешенных обещаний и один для отклонения. Если обещание будет решено (случай успеха), то что-то случится дальше (зависит от того, что мы делаем с успешным обещанием).

myPromise.then();

Тогда () метод называется после того, как обещание разрешено. Тогда мы можем решить, что делать с разрешенным обещанием.

Например, давайте воспозим сообщение на консоль, которую мы получили от обещания:

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

поймать () для отклоненных обещаний:

Однако метод тогда () только для разрешенных обещаний. Что если обещание не удается? Затем нам нужно использовать метод Catch ().

Аналогичным образом мы присоединяем метод затем (). Мы также можем напрямую прикрепить метод Catch () сразу после этого ():

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

Так что, если обещание отклонено, он будет прыгать в метод Catch () и на этот раз мы увидим другое сообщение на консоли.

Заворачивать

Так что именно так мы создаем обещание в JavaScript и используем его для разрешенных и отклоненных случаев. Обещания – это более широкая тема, и о них много вещей. Так что понимание того, как они работают, требует времени.

Этот пост – это просто введение в обещания, и я надеюсь, что вы нашли это полезным для получения представления о том, какие обещания JavaScript есть и как их использовать.

Если вы хотите узнать больше о веб-разработке, не стесняйтесь посещать мой YouTube Channel для большего.

Спасибо за чтение!