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

Метод Promise.race() в JavaScript

Автор

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

В JavaScript промисы являются одним из основных способов работы с асинхронностью. Они позволяют обрабатывать результаты асинхронных операций, таких как загрузка данных или выполнение задач, которые требуют некоторого времени на завершение. Стандартная библиотека JavaScript предлагает несколько методов для управления группами промисов, одним из которых является Promise.race(). Данный метод особенно полезен, когда нужно выполнять несколько асинхронных операций параллельно и реагировать только на самую быструю из них.

Что такое Promise.race()

Promise.race(iterable) — это метод, который принимает итерируемый объект (например, массив) промисов и возвращает новый промис, который исполнится или отклонится, как только из переданных промисов исполнится или отклонится первый.

Использование Promise.race() может быть целесообразным в ситуациях, когда результат нужен срочно и его предоставление одним из нескольких источников является приемлемым. Такой подход часто используется в задачах с тайм-аутами или в сценариях, когда первый ответ от нескольких серверов является достаточным.

Пример использования 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. Он позволяет эффективно обрабатывать сценарии, где необходимо получить первый результат из множества источников или установить тайм-аут для асинхронной операции. Используйте его, когда нужно быстро реагировать на первые изменения без необходимости дожидаться завершения всех асинхронных процессов.

Стрелочка влевоМетод then() в JavaScriptМетод Promise.any() в 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
Открыть базу знаний