Работа с API в JavaScript включает запросы к внешнему серверу для получения или отправки данных. В этом сообщении блога мы обсудим основы работы с API в JavaScript, в том числе способы выполнения запросов API с использованием различных методов и обработки ответов.
Получить запрос
Fetch API — это современный интерфейс, который позволяет нам выполнять HTTP-запросы в JavaScript с помощью метода fetch(). Он предоставляет более гибкую и мощную альтернативу старому объекту XMLHttpRequest (XHR).
Получить синтаксис
Основной синтаксис метода fetch() следующий:
fetch(url, options);
Здесь URL — это URL-адрес ресурса, который вы хотите получить, а параметры — это необязательный объект, который может включать такие свойства, как метод, заголовки, тело, режим, кеш, учетные данные, перенаправление, реферер, целостность и подтверждение активности.
Получить пример
Вот пример извлечения данных из URL-адреса и анализа ответа в формате JSON:
fetch('<https://jsonplaceholder.typicode.com/users>') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));
Этот код отправляет запрос GET на указанный URL-адрес и возвращает обещание, которое разрешается в объект ответа. Метод response.json() анализирует ответ как JSON и возвращает другое обещание, которое преобразуется в проанализированные данные.
Получить параметры
Метод fetch() может принимать второй аргумент, объект параметров, который можно использовать для настройки запроса. Вот некоторые из наиболее распространенных вариантов:
- method: HTTP-метод, используемый для запроса (GET, POST, PUT, DELETE и т. д.).
- заголовки: объект, содержащий любые заголовки для включения в запрос
- body: данные для отправки с запросом
- режим: режим запроса (cors, no-cors, тот же источник, навигация)
- cache: режим кеша запроса (по умолчанию, перезагрузка, без кеша)
- учетные данные: учетные данные аутентификации для включения (опустить, того же происхождения, включить)
- redirect: режим перенаправления (follow, error, manual)
- referrer: реферер запроса
- целостность: хэш целостности ресурса
- keepalive: логическое значение, указывающее, следует ли отправлять пакеты поддержки активности для запроса.
Основное использование
Чтобы сделать простой запрос GET с помощью Fetch API, вы можете использовать метод fetch()
:
fetch('<https://api.example.com/data>') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => { console.log(data); }) .catch(error => { console.error('There was a problem with the fetch operation:', error); });
Параметры запроса
Метод fetch()
также принимает необязательный второй параметр, который представляет собой объект параметров, позволяющий настроить запрос. Вот пример:
fetch('<https://api.example.com/data>', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'John Doe', email: '[email protected]' }) }) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => { console.log(data); }) .catch(error => { console.error('There was a problem with the fetch operation:', error); });
Варианты ответа
Объект Response
, возвращаемый fetch()
, предоставляет несколько методов для чтения тела ответа как различных типов данных. Например, вы можете использовать метод text()
, чтобы прочитать текст ответа, метод blob()
, чтобы прочитать его как объект Blob, и метод arrayBuffer()
, чтобы прочитать его как ArrayBuffer.
fetch('<https://api.example.com/data>') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.text(); }) .then(text => { console.log(text); }) .catch(error => { console.error('There was a problem with the fetch operation:', error); });
XMLHTTPRequest
Объект XMLHttpRequest
— это встроенный в браузер API, который позволяет нам отправлять HTTP-запросы и получать ответы. Вот пример выполнения запроса GET с использованием XMLHttpRequest
:
const xhr = new XMLHttpRequest(); xhr.open('GET', '<https://jsonplaceholder.typicode.com/todos/1>'); xhr.onload = function() { if (xhr.status === 200) { console.log(JSON.parse(xhr.response)); } else { console.log('Request failed. Status code: ' + xhr.status); } }; xhr.send();
Вот пример выполнения POST-запроса с использованием XMLHttpRequest:
const xhr = new XMLHttpRequest(); const url = '<https://jsonplaceholder.typicode.com/posts>'; const data = JSON.stringify({ title: 'foo', body: 'bar', userId: 1 }); xhr.open('POST', url); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onload = function() { if (xhr.status === 201) { console.log(JSON.parse(xhr.response)); } else { console.log('Request failed. Status code: ' + xhr.status); } }; xhr.send(data);
Объект XMLHttpRequest имеет ряд методов и свойств, позволяющих настраивать и отправлять запросы, а также обрабатывать ответы. Вот обзор некоторых из наиболее часто используемых методов и свойств:
Методы:
open(method, url[, async[, user[, password]]])
: Инициализирует новый запрос, устанавливая метод HTTP, URL-адрес и другие необязательные параметры.send([body])
: отправляет запрос на сервер. Необязательный параметрbody
позволяет отправлять данные вместе с запросом.abort()
: прерывает текущий запрос.setRequestHeader(header, value)
: устанавливает заголовок запроса.
Свойства:
onload
: функция обратного вызова, которая вызывается при получении ответа.readyState
: Текущее состояние запроса.response
: текст ответа в виде ArrayBuffer, Blob, Document, объекта JSON или строки в зависимости от свойстваresponseType
.responseType
: ожидаемый тип ответа.status
: код состояния HTTP ответа.statusText
: Текст ответа HTTP-статуса.
Используя эти методы и свойства, вы можете отправлять запросы на сервер, получать ответы и манипулировать данными, как это необходимо в вашем приложении.
И Fetch API, и XMLHttpRequest (XHR) используются для выполнения HTTP-запросов в JavaScript. Fetch API — это более новый и современный API, в то время как XHR существует уже давно и считается устаревшим API. Fetch API имеет более простой синтаксис и предоставляет более гибкий и мощный интерфейс для выполнения запросов, обработки ответов и работы с данными в формате JSON. Он также поддерживает потоковую передачу и имеет встроенную поддержку CORS. С другой стороны, XHR обеспечивает более детальный контроль над запросом и ответом, позволяя выполнять низкоуровневые манипуляции с данными. Он также поддерживает старые браузеры и имеет более широкую поддержку браузеров. В целом и Fetch API, и XHR имеют свои сильные и слабые стороны, и выбор между ними зависит от конкретного варианта использования и предпочтений разработчика.