Дмитрий Нечаев
Метод Promise.race() в JavaScript
В JavaScript промисы являются одним из основных способов работы с асинхронностью. Они позволяют обрабатывать результаты асинхронных операций, таких как загрузка данных или выполнение задач, которые требуют некоторого времени на завершение. Стандартная библиотека JavaScript предлагает несколько методов для управления группами промисов, одним из которых является Promise.race()
. Данный метод особенно полезен, когда нужно выполнять несколько асинхронных операций параллельно и реагировать только на самую быструю из них.
Что такое Promise.race()
Promise.race(iterable)
— это метод, который принимает итерируемый объект (например, массив) промисов и возвращает новый промис, который исполнится или отклонится, как только из переданных промисов исполнится или отклонится первый.
Использование Promise.race()
может быть целесообразным в ситуациях, когда результат нужен срочно и его предоставление одним из нескольких источников является приемлемым. Такой подход часто используется в задачах с тайм-аутами или в сценариях, когда первый ответ от нескольких серверов является достаточным.
Метод Promise.race()
предоставляет возможность реагировать на первый выполненный или отклоненный промис из набора. Это мощный инструмент для управления асинхронными операциями, особенно когда важна скорость ответа. Чтобы полностью понимать возможности Promise.race()
, необходимо уверенное знание основ работы с Promise
и асинхронным JavaScript. Если вы хотите детальнее погрузиться в JavaScript — приходите на наш большой курс JavaScript Advanced. На курсе 196 уроков и 18 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.
Пример использования Promise.race()
Давайте рассмотрим пример использования Promise.race()
на практике. Предположим, у нас есть две асинхронные функции, которые возвращают промисы. Мы хотим отправить два запроса к разным API и обработать только тот, который вернет результат первым.
// Функция, имитирующая асинхронный запрос с задержкой
function fetchDataWithDelay(url, delay) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`Данные с ${url}`);
}, delay);
});
}
// Создаем два промиса с различными задержками
let promise1 = fetchDataWithDelay("url1.com", 500); // Задержка 500 мс
let promise2 = fetchDataWithDelay("url2.com", 300); // Задержка 300 мс
// Используем Promise.race для обработки первого исполнившегося промиса
Promise.race([promise1, promise2]).then(result => {
console.log("Полученный результат:", result);
}).catch(error => {
console.log("Ошибка:", error);
});
В данном случае, в консоль будет выведено "Полученный результат: Данные с url2.com"
, так как промис promise2
исполнится первым из-за меньшей задержки.
Применение с тайм-аутом
Promise.race()
также часто используется для реализации тайм-аута для асинхронных операций. Если заданная операция не завершается в течение определенного времени, можно отклонить промис с помощью тайм-аута.
function fetchData(url) {
return new Promise(resolve => setTimeout(() => resolve(`Данные с ${url}`), 1000));
}
let fetchDataPromise = fetchData("example.com");
let timeoutPromise = new Promise((resolve, reject) => {
setTimeout(() => reject(new Error("Тайм-аут запроса")), 500);
});
Promise.race([fetchDataPromise, timeoutPromise]).then(data => {
console.log("Данные:", data);
}).catch(error => {
console.log("Ошибка:", error.message);
});
В этом примере, если запрос не будет выполнен за 500 мс, будет выведено сообщение об ошибке
"Ошибка: Тайм-аут запроса"
.
Заключение
Метод Promise.race()
является мощным инструментом для управления конкурирующими асинхронными операциями в JavaScript. Он позволяет эффективно обрабатывать сценарии, где необходимо получить первый результат из множества источников или установить тайм-аут для асинхронной операции. Используйте его, когда нужно быстро реагировать на первые изменения без необходимости дожидаться завершения всех асинхронных процессов.
Promise.race()
открывает двери к более сложному управлению асинхронностью. Однако, чтобы эффективно использовать этот и другие продвинутые методы, необходимо глубокое понимание асинхронного JavaScript. Курс JavaScript Advanced поможет вам в этом. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир продвинутого JavaScript прямо сегодня.
Постройте личный план изучения Javascript до уровня Middle — бесплатно!
Javascript — часть карты развития Frontend
100+ шагов развития
30 бесплатных лекций
300 бонусных рублей на счет
Бесплатные лекции
Все гайды по Javascript
Лучшие курсы по теме

Основы JavaScript
Антон Ларичев
TypeScript с нуля
Антон Ларичев