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

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

Асинхронные операции требовали нескольких обратных вызовов, что делало код неуправляемым. К счастью, JavaScript ввел промисы изначально в ES6, избавив нас от ада обратных вызовов.

Обещания

Когда я начал работать над JavaScript, в некоторых статьях говорилось, что Javascript — это асинхронный язык, а в других — что он синхронный. Это меня очень расстроило.

Я просто избавлю вас от этого разочарования, сказав, что «JavaScript — это асинхронный язык программирования». А с помощью функций обратного вызова мы можем заставить его работать как асинхронный язык программирования.

Обещание: существительное: гарантия того, что кто-то что-то сделает или что-то произойдет.

Обещание — это объект, который может быть возвращен синхронно из асинхронной функции. Он возвращается в одном из следующих возможных состояний:

  • В ожидании: еще не выполнено или отклонено
  • Решено:это будет вызвано, когда обещание будет выполнено, если resolve()
  • Отклонено: вызывается, когда обещание не выполнено, например, если вызывается reject().

Прототипы

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

Promise.prototype.catch(onRejected)
Promise.prototype.then(onFulfilled, onRejected)
Promise.prototype.finally(onFinally)

На изображении ниже показан поток для методов .then и .catch. Они объединены в цепочку, как показано на диаграмме, поскольку возвращают обещание. Если (.finally) объявлено для обещания, то оно будет выполняться всякий раз, когда обещание settled независимо от того, выполнено оно или отклонено.

Практический пример работы обещаний

Конструктор обещаний ES6 принимает функцию. Эта функция принимает два параметра, resolve() и reject().. Давайте рассмотрим этот сценарий, чтобы лучше понять промисы.

Дочь просит у матери денег, чтобы пойти на пляжную вечеринку с друзьями. Мать говорит ей, что у нее недостаточно денег для поездки, но она ожидала, что Молли (одна из ее подруг) вернет деньги, которые она ей одолжила. Давайте используем JavaScript, чтобы увидеть, как выполняется это обещание.

let MumsPromise = new Promise(function(resolve, reject) {
  MumsSavings = 600;
  TripExpense = 900;
  if (MumsSavings > TripExpense) {
    resolve({
       Day: "Saturday",
       Time: "11:00 am- 6:30 pm"
});
  } else {
    reject("We do not have enough savings");
  }
});
MumsPromise.then(function(value) {
  console.log("Yay! The party is on, Mum already got me a ticket!", JSON.stringify(value));
});
MumsPromise.catch(function(reason) {
  console.log("Mom coudn't buy me the ticket because ", reason);
});
MumsPromise.finally(function() {
  console.log("I know Mum cannever fail to buy me a ticket if she has the money");
});

Вывод этого кода будет

Предположим, что Молли заплатила 600 денег, которые она должна матери, тогда сбережения ее матери теперь составят 1200 денег.

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

Цепочка обещаний

Поскольку .then() всегда возвращает новый промис, можно объединять промисы в цепочку с точным контролем того, как и где обрабатываются ошибки. Промисы позволяют вам имитировать нормальное поведение синхронного кода try/catch.

Подобно синхронному коду, цепочка приведет к последовательному выполнению последовательности. Другими словами, вы можете сделать:

fetch(url)
  .then(process)
  .then(save)
  .catch(handleErrors)
;

Наш код JavaScript станет им;

let MumsPromise = new Promise(function(resolve, reject) {
  MumsSavings = 600;
  TripExpense = 900;
  if (MumsSavings > TripExpense) {
    resolve({
       Day: "Saturday",
       Time: "11:00 am- 6:30 pm"
});
  } else {
    reject("We do not have enough savings");
  }
});
MumsPromise.then(
  function(value) {
    console.log("Hurray I got this phone as a gift ", JSON.stringify(value));
  },
  function(reason) {
    console.log("Mom coudn't buy me the phone because ", reason);
  }
);

Важные замечания

  • Отложенное обещание может перейти в состояние выполнено или отклонено.
  • Выполненное или отклоненное обещание после его выполнения не должно переходить в какое-либо другое состояние.
  • Обещание или «затем» — это объект, предоставляющий стандартный метод .then().
  • Как только обещание выполнено, оно должно иметь значение (которое может быть undefined), и это значение не должно меняться.

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

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

Следите за мной в Twitter, Facebook, LinkedIn