Как правильно работать с цепочками промисов в JavaScript: без сложностей и путаницы

Асинхронный код — это одна из самых сложных тем для начинающих разработчиков. Особенно, когда речь заходит о Promise и их цепочках. Задача усложняется еще больше, когда в учебниках и туториалах используют запутанные примеры, которые не помогают, а только больше сбивают с толку. Давайте разберемся с основами работы с промисами раз и навсегда, без лишней сложности.

Большинство обучающих материалов, объясняя цепочки промисов, используют примеры с fetch() и response.json(). Вот что мы обычно видим:

fetch('https://jsonplaceholder.typicode.com/posts') .then(response => { console.log('First then'); return response.json(); // возвращается новый промис }) .then(data => { console.log('Second then'); console.log('Data received:', data); // данные из JSON }) .catch(error => { console.log('Error:', error); });

На первый взгляд пример выглядит логично. Но начинающий разработчик часто задается вопросами:

• Почему в then() возвращается промис?

• Что вообще происходит с этими значениями внутри цепочки?

• Как это понимать без привязки к сетевым запросам?

Такой подход усложняет понимание, так как акцент делается на работу с API, а не на основах работы промисов.

Начнем с самого простого примера:

new Promise((resolve) => { resolve(5); // Разрешаем промис со значением 5 }) .then((res) => res) // Первый then: передаем значение дальше .then((res) => res) // Второй then: снова передаем значение .then((res) => console.log(res)); // Выводим 5

1. Промис создается с помощью new Promise, и он сразу разрешается со значением 5.

2. Каждый .then() получает результат предыдущего шага и возвращает его дальше.

3. В итоге в консоли мы видим 5.

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

1. Каждый .then() возвращает новый промис.

Даже если внутри .then() вы просто возвращаете значение, это значение автоматически “оборачивается” в промис.

2. Можно возвращать что угодно.

В .then() можно вернуть:

• Примитивное значение (число, строку, объект);

• Новый промис;

• Ничего (undefined), если результат не важен.

3. Асинхронность цепочек.

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

Пример для закрепления:

new Promise((resolve) => { resolve('Hello'); }) .then((res) => { console.log(res); // Hello return 'World'; }) .then((res) => { console.log(res); // World return new Promise((resolve) => setTimeout(() => resolve('!'), 1000)); }) .then((res) => console.log(res)); // !

1. “Нужно возвращать новый промис в каждом .then().”

Нет! Возвращать новый промис нужно только тогда, когда вы выполняете асинхронные операции (например, таймеры, запросы).

2. “Цепочка .then() не работает без catch().”

Ложь! catch() нужен только для обработки ошибок. Если ошибок нет, цепочка выполнится без него.

• Используйте .then() только для обработки результата предыдущего шага.

• Не возвращайте промис там, где он не нужен.

• Если вы работаете с цепочкой промисов, разделяйте задачи — обработка данных и асинхронные действия.

Пример с API, но без путаницы:

fetch('https://jsonplaceholder.typicode.com/posts') .then((response) => response.json()) // Парсим JSON .then((data) => { const firstPost = data[0]; console.log('First post:', firstPost); // Показываем первый пост return firstPost.title; }) .then((title) => console.log('Title:', title)); // Показываем заголовок

Здесь каждый шаг логически обоснован:

• Сначала обрабатываем response (парсинг JSON);

• Затем берем первый пост;

• Наконец, выводим его заголовок.

1. Понимание работы промисов начинается с простых примеров, а не с API.

2. .then() — это обработчик, а не место для лишнего создания промисов.

3. Асинхронный код не должен быть сложным — он должен быть логичным.

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

Если статья помогла вам, не забудьте поделиться и поддержать автора! Подписывайтесь на мой telegram канал! Тут много интересного :)

t.me

ИгорешаIT

#js #урокиjs #промисы #разработка #разработкаприложений #разработкасайтов #javascript #javascriptdeveloper

2 комментария

Fedor Popov

08.12.2024

async/await надо использовать, а чейнинг до добра не доведет, тем более все они всё равно асинхронные и даже then возвращает Promise

Ответить

Игорь Лобода

Автор

Согласен) В статье пытался не всю тему объяснить а лишь часть. То, что метод then возвращает промис по сути своей я думаю вообще никому не понятно. Я думаю, что это из-за некорректных примеров в больших учебниках. Плюс это играет огромное значение в понимании куска про микрозадачи во время прохождения eventloop

Как правильно работать с цепочками промисов в JavaScript: без сложностей и путаницы

🔍 Почему примеры из учебников не работают?

✅ Правильный пример для понимания

Что происходит?

🚀 Основные принципы работы с промисами

⚡ Заблуждения о промисах

💡 Как не запутаться?

🔥 Применение на практике

🔗 Итог