Всем привет знаете как работать с асинхронным кодом, а именно как создавать Promise и использовать `awaite/async` а также `then` и `catch` цепочки для того чтобы справиться с этими промисами в JavaScript? 

Вообще что это именно асинхронный код? Это кусок кода который выполняется какое-то длительное время (не моментально) и так как код выполняется сверху вниз, а JS изначально браузерный язык, и в браузере мы не можем просто ждать. Потому что тогда у нас страницы будет бесконечно загружаться, если мы просто по очереди будем ждать. Иногда нужно выполнять сразу следующий код не дожидаясь выполнения предыдущей строки. Таким образом, получается, что нам нужно создать асинхронный код и именно Promise говорит Окей я тебе обещаю вернуть какой-то объект. Просто подожди или делай что хочешь, потом он обязательно появится, и мы можем сразу выполнять следующий код. 

[↓↓↓ Пропустить текст, смотреть видео ↓↓↓](#watch-now)

### Пишем функцию которая возвращает Promise

    // index.js

    function success(){
      return new Promise((resolve, reject) =>{
        setTimeout(()=> resolve({status: 'OK'}), 3000);  
        })
    }

Итак, promise используем как класс, то есть используя ключевое слово `new`. И передаем в него функцию у которой есть 2 аргумента. Принято называть resolve и reject. Resolve это функция которую выполняют в положительном случае внутри промиса. Т.е. это важно возвращать результат промиса именно при помощи `resolve` или `reject`. Reject это функция котораую вызывают если что-то пошло не так или какие-то условия не выполнились внутри промиса. Т.е. с ее помощью вы сообщаете об ошибке.

    // index.js

    ....

    function failure(){
        return new Promise((resolve, reject) => {
          setTimeout(()=> reject({status: 'Failed'}), 3000);  
        })
    }

### Получаем ответ из Promise при помощи async await

Если у вас мало опыта с асинхронным кодом советую использовать `async await`. Это более понятный и читабельный подход.
Для этого нужно всего то добавить модификатор async для функции (таким образом мы говорим что она асинхронная и может выполняться долго), и для получения результата Promise ставим перед ним await.
Разберемся на примере:

    // index.js

    ....

    async function main(){
        const result = await success();
        console.log(result)
    }

    main();

Можете запустить файл при помощи `node index.js` 

### Получаем ответ из Promise при помощи then цепочки

У класса Promise есть методы `then` и `catch`. Которые принимают функции с одним аргументом, соответствующие `resolve` и `reject`. И выполняются эти функции по завершению промиса.
Разберемся на примере:

    // index.js

    ....

    function main(){
        success().then(resp => console.log(resp));
        console.log('after success')
    }

    main();

Обратите внимания что при использовании `then` нам не нужен модификатор `async`. И если вы запустите данный код, то увидете что `after success` напечатает до того как выполнится промис. Это потому что мы не используем `await`. 
Это главная разница между двумя подходами. `await` ждет пока выполнится процесс и по сути мы работам как с обычным асинхронным кодом. Тогда как `then` не принуждает ждать и просто добавляет `callback` для положительного сценария.

## Watch now

Смотрите видео где я подробнее расказываю про оба подхода. Так же работаю с неуспещными сценариями и показываю пример с использованием API


Что такое асинхронный код?

Async Promise

Multitask performing multiple task simultaneously using tablet laptop cellphone data

Узнай как работать с Promise, что лучше async/await или then/catch 

Узнай как работать с Promise, что лучше async/await или then/catch и остальные практики работы с асинхронным кодом

OB Web Dev

OB Web Dev

Асинхронный код в JS - используем Promise await и then подходы

Что такое асинхронный код?

Асинхронный код в JS - используем Promise await и then подходы

Что такое асинхронный код?

Получить скидку на курс основы WebDev