1. Обещание в JavaScript

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

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

Как это работает?

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

Чтобы получить фактическое значение результата/ошибки из промиса, нам нужно использовать функции .then() и .catch(). .then() — это функция, которая выполняется, когда обещание выполнено, а функция .catch() выполняется, когда обещание отклонено.

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

thisIsPromise
 .then(callbackForResolvedA, callbackForRejectedA)
 .then(callbackForResolvedB, callbackForRejectedB)
 .then(callbackForResolvedC, callbackForRejectedC)

Отклоненное обещание может быть немедленно обработано в каждом .then(), как в примере выше. Но если немедленная ошибка не нужна, то ошибку можно обработать с помощью функции .catch() в конце цепочки.

thisIsPromise
 .then(callbackForResolvedA)
 .then(callbackForResolvedB)
 .then(callbackForResolvedC)
 .catch(callbackForRejected)

На приведенной ниже диаграмме показано, как статус промиса меняется с течением времени (из MDN).

MDN(https://mzl.la/3pQtZvP)

3. Примеры кода и реальный пример использования

Примеры кода

Давайте рассмотрим несколько примеров кода, чтобы показать, как использовать промисы в реальном коде.

Пример из реальной жизни

Одним из реальных примеров использования промисов является запрос API. В этой статье сделаем запрос к Poke API, чтобы получить имена покемонов! *Poke API — это REST API, с помощью которого мы можем получать различные данные о покемонах (они объявили о бета-поддержке GraphQL) https://pokeapi.co/

В примере я буду использовать «fetch» (собственный метод Javascript) для отправки запроса к API. Метод fetch возвращает ответ в виде обещания. Поскольку ответ от fetch — это не JSON, а ответ HTTP, ответ должен быть преобразован в JSON с помощью json(), чтобы фактически извлечь данные из содержимого тела JSON. Кроме того, функция json() также возвращает обещание, после преобразования мне нужно использовать .then().

Это даст нам один объект покемона, который содержит следующую информацию:

  • считать
  • следующий
  • предыдущий
  • Результаты
  • название
  • URL

Если нам нужно только имя из этих данных, мы можем просто указать data.name после преобразования его в JSON.

fetch('<https://pokeapi.co/api/v2/pokemon/?limit=1>')
		// Convert the response to JSON
		.then(response => response.json())
		// json() returns a promise, so need .then() here
		// if we need only name, then write (data.name)
		.then(data => console.log(data))
		
		// Handling error
		.catch(err => console.log(err))
//Result
/*{
	count: 1118,
	next: "<https://pokeapi.co/api/v2/pokemon/?offset=1&limit=1>",
	previous: null,
	results: {[
	name: "bulbasaur",
	url: "<https://pokeapi.co/api/v2/pokemon/1/>"
  }]
  }
*/

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

В предыдущем примере мы получаем только основную информацию, но в Poke API есть больше деталей для каждого покемона. Чтобы получить подробности, нам нужно отправить еще один запрос с URL-адресом, который находится в объекте результатов в предыдущем результате.

//Result
/*{
	count: 1118,
	next: "<https://pokeapi.co/api/v2/pokemon/?offset=1&limit=1>",
	previous: null,
// We need this!!!!!!!!
	results: {[
	name: "bulbasaur",
	url: "<https://pokeapi.co/api/v2/pokemon/1/>"
  }]
  }
*/

В приведенном ниже примере мы получаем данные о весе из второго запроса.

fetch('<https://pokeapi.co/api/v2/pokemon/?limit=1>')
		.then(response => response.json())
		.then(data => fetch(`${data.results[0].url}`))
		.then(response => response.json())
    .then(details => console.log(details.weight))
		// Handling error
		.catch(err => console.log(err))
//Result
//69

4. Вывод

Промис — это один из способов обработки асинхронных операций в JavaScript. Я надеюсь, что смог проиллюстрировать, что такое обещание и как на самом деле использовать его в коде.

Если вы нашли эту статью полезной, пожалуйста, нажмите кнопку хлопка, вы также можете подписаться на меня в Твиттере, если у вас есть какие-либо сомнения, не стесняйтесь комментировать! Мой аккаунт на GitHub: pluto004