Введение в промисы JavaScript — Три состояния

Обзор:

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

Что такое обещание:

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

Есть три состояния, которые нарушают обещание:

• Ожидание: инициализированное состояние, ожидающее разрешения или отклонения.
• Решено: означает, что операция завершилась успешно.
• Отклонено: означает, что операция не удалась.

Ожидаемое обещание

Давайте создадим наш первый Promise с состоянием Pending.

// Creating an initial Promise.
const promise = new Promise((resolve, reject) => {})

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

Выполненное обещание

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

const promiseMessage = new Promise((resolve, _) => {
  resolve("Promise has been resolved");  
})

const promiseData = new Promise(resolve, _) => {
  const data = { username: "I am a user" }
  resolve(data);
})

(Скоро мы расскажем, как получить доступ к разрешенным данным.)

Отклоненное обещание

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

const promiseMessage = new Promise((_, reject) => {
  reject("Promise has been resolved");  
})

const promiseData = new Promise(resolve, _) => {
  const data = { status: 401, errorMessage: "User not found." }
  reject(data);
})

Как использовать обещания

Промисы хороши для создания асинхронных функций, выполняющих запросы к API. JavaScript по умолчанию является синхронным языком, и если нам нужно сохранить наш код до завершения операции, то промисы пригодятся.

Давайте посмоделируем запрос API.

const promise = new Promise((resolve, reject) => {
    const data = ['a', 'b']

    setTimeout(() => {
        resolve(data)
    }, 2000)
})

// Will display ['a', 'b']
promise.then(snapshot => console.log(snapshot));

Мы создали Promise, который имитирует запрос API, который занимает 2000 мс и 2 секунды. Затем мы можем использовать метод .then для связывания логики с промисами после их успешного завершения. Чтобы фиксировать состояния Отклонено, мы добавим в цепочку метод .catch.

Чтобы проверить это, мы могли бы изменить состояние Promise с гарантированного состояния Resolved на гарантированное состояние Rejected.

const promise = new Promise((resolve, reject) => {
    const data = ['a', 'b']

    setTimeout(() => {
        // resolve(data)
        reject("Failed to execute.")
    }, 2000)
})

// Will display "Failed to execute."
promise
  .then(snapshot => console.log(snapshot))
  .catch(error => console.error(error))

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

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

1. Что произойдет, если мы создадим промис и не будем вызывать методы разрешения или отклонения?
2. Если мы разрешим/отклоним обещание, будут ли выполнены какие-либо строки кода после слов?
3. Можете ли вы создать обещание внутри обещания?

Откройте файл JavaScript и запустите nodemon, чтобы проверить его!