JavaScript позволяет напрямую взаимодействовать с сервером без перезагрузки страницы. Это достигается с помощью API, таких как XMLHttpRequest и Fetch. Оба варианта позволяют отправлять запросы различных типов – GET, POST, PUT, DELETE – и обрабатывать полученные данные.
XMLHttpRequest используется с начала 2000-х годов и обеспечивает широкую совместимость, включая устаревшие браузеры. Однако он требует больше кода и не поддерживает Promises. Метод open() задаёт тип запроса и URL, send() – отправляет его. Обработка результата реализуется через колбэки: onload, onerror.
Fetch – современная альтернатива, появившаяся в большинстве браузеров после 2015 года. Поддерживает Promises, работает асинхронно, облегчает чтение кода. Для отправки запроса используется функция fetch(url, options). Объект options включает метод, заголовки, тело и другие параметры. Ответ можно обработать через .then() и .catch().
Для отправки данных в формате JSON необходимо явно указать заголовок ‘Content-Type’: ‘application/json’ и сериализовать тело с помощью JSON.stringify(). Сервер, в свою очередь, должен быть готов принять такой формат и корректно распарсить его.
При работе с сервером важно учитывать кросс-доменные ограничения (CORS). Если фронтенд и бэкенд расположены на разных доменах, сервер должен явно разрешать такие запросы через заголовки Access-Control-Allow-Origin.
Как отправить GET-запрос с помощью fetch
Пример базового запроса:
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Ошибка HTTP: ' + response.status);
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Ошибка запроса:', error);
});
Если требуется передать параметры, их можно добавить к URL:
const params = new URLSearchParams({ user: 'admin', limit: 10 });
fetch('https://api.example.com/data?' + params.toString())
.then(response => response.json())
.then(data => console.log(data));
Для указания заголовков, например Authorization или Accept, используется объект headers:
fetch('https://api.example.com/data', {
method: 'GET',
headers: {
'Authorization': 'Bearer токен',
'Accept': 'application/json'
}
})
.then(response => response.json())
.then(data => console.log(data));
Не используйте GET-запрос для передачи чувствительных данных – параметры URL сохраняются в истории браузера и логируются на стороне сервера.
Как отправить POST-запрос с телом в формате JSON
Для отправки POST-запроса с JSON-данными используется метод fetch с указанием заголовков и преобразованием объекта в строку через JSON.stringify.
Пример:
fetch('https://example.com/api/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: 'Иван',
age: 30
})
})
.then(response => {
if (!response.ok) {
throw new Error('Ошибка: ' + response.status);
}
return response.json();
})
.then(data => {
console.log('Ответ сервера:', data);
})
.catch(error => {
console.error('Ошибка запроса:', error);
});
Заголовок Content-Type: application/json обязателен: он сообщает серверу, что тело запроса содержит JSON. Метод JSON.stringify нужен для сериализации объекта в строку. Без него тело будет отправлено как undefined или [object Object].
Обработка ошибок важна: сервер может вернуть статус 400 или 500, который не вызовет исключение сам по себе, пока не будет проверен response.ok.
Если API требует авторизации, в заголовки добавляется ключ Authorization:
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer TOKEN'
}
Не стоит передавать сложные структуры (например, Map или Date) без предварительной обработки – они не сериализуются корректно. Используйте простые типы: строки, числа, массивы, объекты.
Как обработать ответ сервера и извлечь данные
После отправки запроса через fetch, ответ нужно преобразовать в нужный формат. Обычно сервер возвращает JSON, поэтому применяется метод response.json(). Он возвращает Promise, содержащий разобранный объект.
Пример:
fetch('/api/data')
.then(response => {
if (!response.ok) {
throw new Error('Ошибка: ' + response.status);
}
return response.json();
})
.then(data => {
console.log(data); // объект с данными
})
.catch(error => {
console.error('Сбой при получении:', error);
});Перед вызовом response.json() необходимо проверить response.ok и статус. При ошибках (например, 404 или 500) fetch не вызывает catch, если соединение установлено. Поэтому проверка response.ok обязательна.
Если ожидается текст вместо JSON, используется response.text(). Для двоичных данных – response.blob() или response.arrayBuffer().
Если данные обернуты в поле, например { result: [...] }, нужно извлекать вложенное значение: data.result.
Для вложенных структур применяются проверки наличия: if (data && data.user && data.user.name), чтобы избежать ошибок undefined.
При работе с нестандартными заголовками убедитесь, что сервер выставляет Access-Control-Expose-Headers, иначе получить заголовки через response.headers.get() не получится.
Как обрабатывать ошибки при сетевых запросах
Ошибка может возникнуть на этапе выполнения запроса, при получении ответа или при попытке его обработки. Чтобы не пропустить проблему, используйте конструкцию try...catch и проверяйте код состояния ответа.
async function fetchData(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Ошибка: ${response.status} ${response.statusText}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error('Сетевая ошибка:', error.message);
// При необходимости: повторная попытка, уведомление пользователя и т.п.
}
}
- Проверяйте свойство
okу объектаResponse, чтобы отличать успешные и ошибочные ответы. Ответ с кодом 404 или 500 не вызовет исключение автоматически. - Обрабатывайте исключения, связанные с проблемами сети (отключение интернета, DNS, таймаут), через
catch. - Используйте
AbortControllerдля прерывания зависших запросов. Это позволяет избежать утечек памяти и избыточных ожиданий.
const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 5000);
try {
const response = await fetch('/api/data', { signal: controller.signal });
clearTimeout(timeout);
const result = await response.json();
} catch (error) {
if (error.name === 'AbortError') {
console.error('Запрос прерван по таймауту');
} else {
console.error('Ошибка запроса:', error.message);
}
}
- Логируйте ошибки детально, указывая URL, код ответа и сообщение, чтобы упростить отладку.
- Не показывайте технические детали пользователю – выдавайте понятное сообщение и действия (обновить страницу, повторить запрос и т.д.).
- При необходимости реализуйте механизм повторной попытки с ограничением количества и интервалом между ними.
Как использовать async/await при работе с fetch
Для отправки запроса с использованием fetch и получения ответа в виде JSON с применением async/await необходимо объявить асинхронную функцию с ключевым словом async. Внутри неё используется оператор await для приостановки выполнения до завершения промиса, возвращаемого fetch.
Пример:
async function loadData() {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('Ошибка: ' + response.status);
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Сбой при получении данных:', error.message);
}
}
Проверка response.ok необходима для обработки статусов, не связанных с сетевыми сбоями, например 404 или 500. Без этого fetch не выбрасывает исключение, даже если сервер вернул ошибку.
Метод response.json() тоже асинхронный. Его следует вызывать только после успешной проверки статуса ответа. Игнорирование этой последовательности приведёт к ложным ошибкам или некорректной работе приложения.
Для повторного использования логики можно вынести код в отдельный модуль и параметризовать URL. Это упрощает тестирование и снижает дублирование.
Нельзя использовать await вне async-функции. Для запуска асинхронного кода в обработчиках событий или сразу после загрузки страницы следует обернуть вызов в функцию или использовать немедленно вызываемое асинхронное выражение:
(async () => {
await loadData();
})();Не стоит игнорировать блок catch: ошибки подключения, тайм-ауты, ошибки парсинга – всё это должно быть перехвачено и обработано, чтобы избежать «тихих» сбоев.
Как отправить запрос с заголовками авторизации
Для отправки запроса с заголовками авторизации в JavaScript используется объект XMLHttpRequest или API fetch. Пример с fetch позволяет более гибко работать с заголовками и обещаниями (Promises).
Чтобы отправить запрос с заголовками авторизации, нужно добавить заголовок Authorization, который обычно содержит токен или другие данные для проверки подлинности.
Пример с использованием fetch:
fetch('https://example.com/api/data', {
method: 'GET',
headers: {
'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Ошибка:', error));
В этом примере мы отправляем запрос GET с заголовком Authorization, в который передаем токен доступа. Это стандартный метод для большинства API, использующих Bearer Token.
Вместо Bearer могут быть использованы другие схемы авторизации, такие как Basic, если используется логин и пароль. Пример:
fetch('https://example.com/api/data', {
method: 'GET',
headers: {
'Authorization': 'Basic ' + btoa('username:password'),
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Ошибка:', error));
В этом примере используется базовая авторизация с закодированными в Base64 данными пользователя.
Для более сложных запросов, например POST, процесс аналогичен. Нужно добавить заголовок авторизации в объект headers и передать нужные данные в теле запроса.
Пример POST-запроса с авторизацией:
fetch('https://example.com/api/data', {
method: 'POST',
headers: {
'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
'Content-Type': 'application/json'
},
body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Ошибка:', error));
Важно помнить, что для запросов с чувствительными данными (например, с токеном) следует использовать протокол HTTPS, чтобы избежать утечек информации.
Загрузка...
