Работа с 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 имеют свои сильные и слабые стороны, и выбор между ними зависит от конкретного варианта использования и предпочтений разработчика.