Выполнение GET-запросов
Получайте данные и разбирайте ответы JSON.
«Выполнение GET-запросов» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Что делает fetch
API Fetch позволяет браузеру выполнять HTTP-запросы и возвращает Promise. Это современная замена старому XMLHttpRequest.
Простой GET-запрос
Вызовите fetch(url), передав URL. По умолчанию используется метод GET, а результатом будет объект Response.
fetch("https://api.example.com/users")
.then((response) => {
console.log(response.status); // 200
});Объект Response
Полученное значение — это Response, а не сами данные. Оно содержит статус, заголовки и методы для чтения тела ответа. Чтобы получить содержимое, необходимо вызвать метод чтения тела.
fetch(url).then((response) => {
console.log(response.ok); // true if status 200-299
console.log(response.status); // 200
});Разбор JSON
Большинство API возвращают JSON. Вызовите response.json(); этот метод сам возвращает Promise, который разрешается разобранным объектом.
fetch(url)
.then((response) => response.json())
.then((data) => {
console.log(data); // parsed JS object/array
});Зачем нужны два Promise
Первый Promise разрешается, когда приходят заголовки; второй (.json()) — когда всё тело загружено и разобрано. Поэтому Вы объединяете в цепочку два вызова .then().
Использование async/await
В большинстве случаев для удобства чтения используют async/await. Каждый await приостанавливает выполнение до разрешения своего Promise.
async function getUsers() {
const response = await fetch(url);
const data = await response.json();
return data;
}Другие способы чтения тела
Помимо json(), объект Response можно прочитать как text(), blob() (двоичные данные), arrayBuffer() или formData(). Выбирайте способ в зависимости от того, что возвращает сервер.
const response = await fetch(url);
const html = await response.text(); // raw stringТело читается один раз
Тело ответа — это поток, который можно использовать только один раз. Вызов json(), а затем text() для одного и того же ответа приведёт к ошибке. Если Вам действительно нужны оба варианта, создайте копию с помощью response.clone().
Параметры запроса
Безопасно формируйте строки запроса с помощью URLSearchParams, а не объединяйте их вручную. Этот объект сам кодирует специальные символы.
const params = new URLSearchParams({ page: 2, q: "hello world" });
fetch("https://api.example.com/search?" + params);Передача заголовков
Передайте вторым аргументом объект с параметрами. Для GET-запроса часто задают заголовок Accept или токен авторизации.
fetch(url, {
headers: {
"Accept": "application/json",
"Authorization": "Bearer " + token
}
});Возврат Promise
Оформите логику fetch в функции, которая возвращает Promise, чтобы вызывающий код мог использовать await. Это делает загрузку данных повторно используемой во всём приложении.
function loadUser(id) {
return fetch("/api/users/" + id).then((r) => r.json());
}Быстрая проверка
GET-запросы с помощью fetch.
Итоги
fetch(url) возвращает Promise с результатом Response. Читайте тело с помощью json(), text() или blob() (только один раз). Используйте async/await для ясности, URLSearchParams для строк запроса и объект параметров для заголовков. Оформляйте эту логику в функциях, возвращающих Promise, чтобы использовать её повторно.
Часто задаваемые вопросы
Урок «Выполнение GET-запросов» бесплатный?
Да — полный текст урока «Выполнение GET-запросов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Выполнение GET-запросов»?
Получайте данные и разбирайте ответы JSON. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Выполнение GET-запросов»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Выполнение GET-запросов
- POST и отправка данных
- Обработка ошибок и кодов состояния
- Отмена запросов с AbortController