JS
Frontend
Как сделать HTTP-запрос в Javascript?
Как выполнять HTTP-запросы в JavaScript: сравнение Fetch API и XMLHttpRequest с примерами кода для GET-запросов и обработки ответов сервера.
Существует несколько способов выполнения HTTP-запросов в JavaScript, включая использование Fetch API и XMLHttpRequest.
Использования Fetch API
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));Использования XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send();Просмотров: 350
Комментарии (5)
а почему в примере с fetch нет проверки response.ok? если сервер вернёт 404 или 500, fetch всё равно зарезолвит промис, .catch тут не сработает, реджектится только при сетевой ошибке (обрыв, cors и т.п.). так что для GET я всегда добавляю if (!response.ok) throw new Error(...) перед json()
делал по этому примеру, всё заработало, но потом полдня разбирался почему на проде запрос не уходит - оказалось CSP на сайте не разрешает connect-src к чужому домену api.example.com. так что если у кого-то похожая фигня - смотрите заголовки в консоли, там прямым текстом пишет что заблокировано
спасибо за напоминание про readyState === DONE, а то я вечно путала с status===4, забыла что DONE это как раз про readyState. только на практике xhr уже нигде не использую, разве что когда нужен onprogress для аплоада файлов - fetch с этим до сих пор не очень дружит без стримов
было бы неплохо ещё про AbortController написать, актуальная тема - как отменить fetch запрос если юзер ушёл со страницы или ввёл новый поисковый запрос. а то без этого висящие запросы потом обновляют state в компоненте которого уже нет
XMLHttpRequest конечно живуч) я его в 2026 году трогаю только в легаси проектах на bitrix, где ещё где-то async false валяется, из-за которого страница фризится на время запроса. в новом коде только fetch или axios если нужны интерцепторы