Вопрос проверяет понимание асинхронности в React и работы event loop в JavaScript.
Нет, долгий fetch не заблокирует интерфейс, потому что он выполняется асинхронно. JavaScript не "ждёт" ответа — запрос отправляется в фоне, а основной поток продолжает работать.
Причины, почему интерфейс не блокируется:
fetch — асинхронная операция. Она выполняется браузерным API вне основного потока.
Event loop обрабатывает колбэки после получения ответа. Пока ответ не пришёл, поток свободен для других задач (например, анимаций, кликов).
Пример в React:
useEffect(() => {
fetch('https://example.com/slow-api')
.then(response => response.json())
.then(data => setData(data)); // Колбэк выполнится после ответа
}, []);Что происходит под капотом:
Браузер отправляет запрос и освобождает основной поток.
Когда ответ приходит, колбэк (then) ставится в очередь микрозадач (microtask queue).
Event loop выполняет его, как только стек вызовов пуст (например, после завершения текущего рендера).
Если бы fetch был синхронным (как старый XMLHttpRequest с флагом async: false), он бы заблокировал интерфейс. Но современный fetch всегда асинхронен.
Важно:
Долгий fetch не блокирует интерфейс, но может замедлить другие запросы (если сервер или браузер ограничивает количество одновременных соединений).
Для отмены долгих запросов используйте AbortController.
Frontend developer
Ментор по Frontend
Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства
Записаться на консультацию