логотип PurpleSchool
логотип PurpleSchool

Promise в JavaScript

Автор

Дмитрий Нечаев

Promise в JavaScript — это объект, представляющий завершение или провал асинхронной операции и её результирующее значение. Промисы используются для управления асинхронным кодом, позволяя организовать его более читаемым и удобным образом, избегая так называемого "callback hell". Вот простой пример:

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve("данные получены"), 1000);
});

promise.then(data => {
  console.log(data); // выводит "данные получены" после 1 секунды
});

В этом примере Promise создаётся с функцией, которая через секунду "разрешается" с некоторыми данными. then() используется для обработки этих данных после их получения.

Методы

Цепочки методов

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

new Promise(function(resolve, reject) {
  setTimeout(() => resolve(1), 1000); // первый асинхронный шаг
}).then(function(result) {
  console.log(result); // выводит 1
  return result * 2;
}).then(function(result) {
  console.log(result); // выводит 2
  return result * 2;
}).then(function(result) {
  console.log(result); // выводит 4
});

Обработка ошибок в цепочках методов

Для обработки ошибок в цепочках промисов используется метод catch(). Он перехватывает любые ошибки, возникшие на любом этапе выполнения цепочки.

new Promise((resolve, reject) => {
  throw new Error("произошла ошибка");
}).catch(err => {
  console.error(err); // обрабатывает ошибку
});

Другие полезные методы промисов

  • Promise.all([promises]): Ожидает выполнения всех промисов. Если один из промисов отклоняется, результатом будет первая возникшая ошибка.
  • Promise.race([promises]): Возвращает результат первого завершившегося промиса, независимо от того, был ли он разрешён или отклонён.
  • Promise.resolve(value) и Promise.reject(reason): Создают промисы, которые немедленно разрешаются или отклоняются соответственно.

Как создать асинхронную функцию с промисом

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

async function fetchData() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("данные загружены"), 1000);
  });
  const result = await promise; // ждёт, пока промис не разрешится
  console.log(result);
}

fetchData();

Промисы схлопываются

Промисы могут "схлопываться", что означает, что промис может возвращать другой промис, и этот процесс продолжается до тех пор, пока не будет возвращён окончательный результат.

let promise = new Promise(resolve => {
  resolve(new Promise(resolve => resolve(5)));
});

promise.then(console.log); // выводит 5
Стрелочка влевоМетод Promise.all() в JavaScriptМетод finally() в JavaScriptСтрелочка вправо

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний