логотип 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() используется для обработки этих данных после их получения.

Promise - это фундаментальная концепция в асинхронном JavaScript, представляющая собой объект, который может иметь одно из трех состояний: ожидание, выполнено или отклонено. Понимание Promise является необходимым условием для работы с асинхронным кодом в современных веб-приложениях. Чтобы получить полное представление о Promise, их применении и связанных концепциях, таких как async/await, вам потребуется глубокое понимание асинхронного JavaScript. Если вы хотите детальнее погрузиться в JavaScript — приходите на наш большой курс JavaScript Advanced. На курсе 196 уроков и 18 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Методы

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

Цепочка промисов позволяет последовательно выполнить несколько асинхронных операций. Каждый следующий метод 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 - это лишь первый шаг в освоении асинхронного JavaScript. Чтобы эффективно использовать Promise в сложных приложениях, необходимо понимать принципы работы async/await, Event Loop и других продвинутых техник. Эти темы подробно рассматриваются на курсе JavaScript Advanced. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир продвинутого JavaScript прямо сегодня.

Стрелочка влевоМетод Promise.all() в JavaScriptМетод finally() в JavaScriptСтрелочка вправо

Постройте личный план изучения Javascript до уровня Middle — бесплатно!

Javascript — часть карты развития Frontend

  • step100+ шагов развития
  • lessons30 бесплатных лекций
  • lessons300 бонусных рублей на счет

Бесплатные лекции

Все гайды по 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
Открыть базу знаний

Лучшие курсы по теме

изображение курса

Основы JavaScript

Антон Ларичев
AI-тренажеры
Практика в студии
Гарантия
Бонусы
иконка звёздочки рейтинга4.8
3 999 ₽ 6 990 ₽
Подробнее
изображение курса

TypeScript с нуля

Антон Ларичев
AI-тренажеры
Практика в студии
Гарантия
Бонусы
иконка звёздочки рейтинга4.7
3 999 ₽ 6 990 ₽
Подробнее
изображение курса

Next.js - с нуля

Антон Ларичев
AI-тренажеры
Практика в студии
Гарантия
Бонусы
иконка звёздочки рейтинга4.7
3 999 ₽ 6 990 ₽
Подробнее

Отправить комментарий