Обещания в JavaScript

Надеюсь, у вас был отличный перерыв, прежде чем продолжить серию!

В этой статье мы обложите Обещания Отказ Если вы еще не читали предыдущую статью ( INTRO для асинхронных JS ), я настоятельно рекомендую вам сначала прочитать его до возвращения к этой статье, поскольку она строит важный фонд для этой статьи.

В этой серии есть 4 части:

Вступление в асинхронные js
Обещания (эта статья)
Больше Обещания
async/a ждать

Введение

Обещания был введен в ES6 для упрощения асинхронного программирования.

Я бы разделил эту статью в следующие разделы:

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

В следующей статье мы будем покрывать:

Обещание цепи
Выполнение нескольких обещаний

Перед обещаниями: обратные вызовы старого стиля

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

Давайте посмотрим на пример обратного вызова. Представьте, что вы заказываете кофе Starbucks в понедельник утром, и вы чувствуете себя капризными. К сожалению, вы не просто получаете свой кофе с помощью привязки.

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

Вот как будет выглядеть обратный вызов (ссылка на MDN DOC по обещанию ):

chooseCoffee(function(order) {
  placeOrder(order, function(coffee) {
    drinkCoffee(coffee);
  }, failureCallback);
}, failureCallback);

Как видите, это очень грязный! Это то, что часто называют « Callback-Hell ». Обещания Разрешить подобные вложенные обратные вызовы, которые будут переоснащены как Обещание цепь , который мы будем охватывать больше в следующей статье.

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

Обещать терминологию

Вот основной синтаксис Обещание :

let promise = new Promise(function(resolve, reject) {
  // executor
});

Аргументы решить и Отклонить являются двумя обратными вызовами, предоставленными JavaScript.

Вот три государства обещают, что вам нужно знать:

в ожидании : Когда создано обещание, это ни в состоянии успеха, ни отказа.
разрешено : Когда возвращается обещание, это называется решается .
выполнено : Когда обещание успешно разрешено. Это возвращает значение, которое можно получить в цепочке A .then Блок на конец цепочки обещания (обсудим это позже в статье)
Отклонено : Когда обещание безуспешно разрешено. Возвращает причина, сообщение об ошибке, почему он отклонен ( Ошибка: Ошибка здесь ). Это может быть доступно в цепочке .catch Блок на конец цепочки обещания.

Вот более визуальный график от javascript.info.

Общее использование обещания

В обещании может быть только один результат или ошибка. Итак, скажем, у нас есть это функция обещания:

let promise = new Promise(function(resolve, reject) {
  resolve("done");
  reject(new Error("Not okay!")); // ignored
})

Результатом будет немедленно показать «сделано», и ошибка будет игнорироваться.

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

  let example = () => {
   return new Promise(function(resolve, reject) => {
     let value = function1();
     if (job success) {
       resolve(value);
     } else (job unsuccessful) {
       reject(console.log("something's wrong!! :("));
     }
   }).then(function(value)) {
     // success
     return nextFunction(value);
   }).catch(rejectFunction);
  }

Хорошо, это становится много И у нас есть новые друзья в вышеуказанной функции. Что такое .then и .поймать ? Мы доберемся до них в следующем разделе, но просто быстрое расстройство сверху:

Как создается обещание, если функция прошла успешно, обещание будет решено.
С другой стороны, если функция пропускается безуспешно, обещание будет отклонено и «Что-то не так !!:( »будет напечатан на консоли.

Это все, что вам нужно знать сейчас! Давайте перейдем к нашим потребителям в Обещания Действительно

Потребители:. Затем, .Catch, .finally.

Объект обещания служит соединением между Исполнителем (вы знаете Resolve , letroject ) и потребляющие функции. Потребляющиеся функции могут быть зарегистрированы в методах: тогда , поймать , Наконец (который вы уже видели .then и .catch В предыдущем разделе!).

Вот цикл обещания: 1️⃣. Создано обещание (штат: в ожидании) 2️⃣ A 👉🏻 Обещание – это разрешено (Состояние: разрешено) 👉🏻 цепь обещания с .тогда 2️⃣ B 👉🏻 Обещание – это Отклонено (Состояние: отклонено) 👉🏻 .catch обрабатывать ошибки 3️⃣. .finally дать окончательный результат обещания 💯

.тогда

Как я узнал, как использовать эти методы потребителей, я люблю думать .then в виде… тогда Что бы вы хотели сделать после того, как мы решается обещание?

Рассмотрим .then похож на AddeventListener () Отказ Он не работает, пока событие не произойдет (то есть обещание разрешено).

let promise = new Promise(function(resolve, reject) {
  setTimeOut(() => resolve("done!!"), 1000);
});

promise.then(
  // shows "done!" in console after 1 second
  result => console.log(result) 
);

Примечание. Вы можете показать ошибки, используя .then Отказ

.поймать: Обработка ошибок

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

Вот как мы помним:

.then Работает, когда обещание – решается .
.catch Работает, когда обещание – Отклонено Отказ

Если мы заинтересованы в просмотра ошибок, вот как мы используем .catch :

let promise = new Promise(function(resolve, reject) {
  setTimeOut(() => reject(new Error("NO!")), 1000);
});

// shows the error after 1 second
promise.catch(result => console.log(result));

Не стесняйтесь скопировать код выше на ваш терминал/Chrome devtool (если вы используете Chrome). Вы должны увидеть следующее:

Примечание: .then (null, func) такой же, как .catch (func)

.наконец-то

.finally , который введен в ES2018, похоже на достойное закрытие для обещания. Думать об этом наконец-то Мы закончили, и пришло время раскрыть Финал результат. Другими словами, это работает независимо от того, что обещание разрешено или отклонено.

.finally Это хороший обработчик для выполнения очистки, как остановка индикатора загрузки.

Если обещание решено:

let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("done!"), 2000);
})

promise.finally(() => console.log("Promise ready"));
promise.then(result => console.log(result));

Быстрая демонстрация:

Если обещание отклонено:

let promise = new Promise((resolve, reject) => {
  throw new Error("error");
})
promise.finally(() => console.log("Promise ready"))
promise.catch(err => console.log(err));

Быстрая демонстрация:

Ну, давайте поставим все это вместе, будем ли мы?

Давайте применим наши новые знания в наш утренний кофе понедельника из секции Callback-Add, но я добавлю еще одно условию, что мы будем покупать только кофе, если наши ставки настроения ниже или равны 5 (из 10):

function orderCoffee() {
  return new Promise((resolve, reject) => {
    let rating = Math.random() * 10;
    // this is only a reference so that 
    // we know what the rate of mood is
    console.log(rating);
    if (rating > 5) {
      resolve("I AM FEELING GREAT!");
    } else {
      reject(new Error("We are going to Starbucks..."));
    }
  });
}

orderCoffee()
  .then(mood => console.log(mood))
  .catch(err => console.log(err))
  .finally(() => console.log("Decision's been made!"));

(Ссылка кода от MDN Обещание. Прототип. Финально () )

Если скорость настроения выше 5 (то есть обещание решено) (Вы можете увидеть номер на первой строке после обработчиков):

Если скорость настроения ниже или равно 5 (то есть обещание отклонено):

Не стесняйтесь скопировать код выше на вашем ChromedevTool/Terminal, чтобы играть в Report !!

Быстрый реконструкцию в этом разделе:

Если обещание решено, .then займет все остальное.
Если обещание отклонено, .catch воспользуется и вернет ошибку.
.finally Хорошо для выполнения очистки, поскольку он работает независимо от того, что обещание разрешено и отклонено.

Хорошо, это основы обещаний! В следующей статье мы подробнее поговорим о цепочке обещаний и привлечения нескольких обещаний!

Вот быстрый проблеск, используя цепочку обещания от нашего примера обратного вызова:

chooseCoffee()
.then(order => placeOrder(order))
.then(coffee => drinkCoffee(coffee))
.catch(failureCallback);

Ресурсы:

🌟 Очень рекомендую: Обещание (JavaScript.info) 🌟 Красноречивый JavaScript Глава 11: Асинхронное программирование 🌟 JavaScript Окончательное руководство по Дэвиду Фланагану (7-е издание) Глава 13.2: Обещания (стр. 346 – 367) ( Amazon ) 🌟 Изящное асинхронное программирование с обещаниями (MDN) 🌟 JavaScript Async/await Tutorial – Узнайте обратные вызовы, обещания и Async/ждут в JS, делая мороженое 🍧🍨🍦 (FreeCodeCamp) 🌟 Как реализовать обещания в JavaScript?

🦄 Если вы ищете больше объяснения (или другого способа объяснения) в этой концепции, я хотел бы порекомендовать моего друга, статья Arpita Pandya: JavaScript обещает

Оригинал: “https://dev.to/mehmehmehlol/promises-in-javascript-2li”