Fetch API — это мощный и гибкий инструмент для выполнения HTTP-запросов в браузере.

Перед этой статьей я упомянул, что начну серию статей и уже создал Введение, Движок JavaScript V8, Обратные вызовы, AJAX и XMLHttpRequest, Синхронный и Асинхронный, Промисы и Async/Await. Если вы потеряли то, что я сделал, проверьте это:

Fetch API является заменой старого XMLHttpRequest (XHR) API, более сложного в использовании и имеющего некоторые ограничения, более простого и интуитивно понятного в использовании и поддерживающего более широкий диапазон форматов данных. На основе promises, что упрощает написание асинхронного кода, который легко читать и понимать. Промисы позволяют разработчикам обрабатывать ответы более элегантным и эффективным способом по сравнению с традиционными обратными вызовами.

С помощью Fetch API вы можете инициировать запросы на получение таких данных, как JSON, XML, HTML или двоичного содержимого, такого как изображения или аудиофайлы.

Одним из основных преимуществ Fetch API является использование promises. Когда вы делаете запрос с помощью Fetch API, он возвращает promise, который преобразуется в ответ сервера. и это позволяет вам использовать метод обещания .then() для обработки успешного ответа и метод .catch() для обработки любых ошибок, которые могут возникнуть, а также async/await обеспечивает более лаконичный и синхронный способ обработки промисов.

Оба подхода промисов с .then()/.catch() и async/await являются допустимыми способами обработки асинхронных запросов с помощью Fetch API. async/await часто может привести к более читаемому и лаконичному коду, особенно когда несколько асинхронных операций необходимо связать вместе.

Функция выборки ()

Он используется для инициации запроса HTTP и возвращает обещание, которое разрешается в объект response, представляющий ответ на этот запрос.

Функция fetch() возвращает обещание, которое разрешает ответ от сервера, а ответ содержит такую ​​информацию, как статус, заголовки и фактические данные.

Запрос

Первым параметром функции fetch() является «обязательный», и он должен быть либо строкой URL, либо объектом запроса.

Второй параметр функции fetch() — это «необязательный» параметр options, который можно настроить.

Некоторые часто используемые параметры включают в себя:

method: указывает метод HTTP для запроса (например, GET, POST, PUT, DELETE).

Вот пример использования fetch() с различными методами HTTP:

  • GET. Метод GET используется для получения данных с сервера.
  • POST. Метод POST используется для отправки данных на сервер для создания нового ресурса.
  • PUT. Метод PUT используется для обновления существующего ресурса на сервере.
  • DELETE: метод DELETE используется для удаления ресурса на сервере.
  • PATCH. Метод PATCH используется для частичного обновления существующего ресурса на сервере.
  • OPTIONS: метод OPTIONS используется для получения поддерживаемых методов и другой информации о ресурсе с сервера.
  • HEAD. Метод HEAD похож на метод GET, но он извлекает только заголовки ответа, а не тело ответа.

заголовки: позволяет устанавливать собственные заголовки для запроса, такие как Content-Type или Authorization.

body: представляет текст запроса для таких методов, как POST или PUT. Это может быть объект FormData, простая текстовая строка или объект JSON.

режим. Управляет поведением запроса CORS (совместное использование ресурсов между источниками).

кеш: указывает, как браузер обрабатывает кэширование ответа.

signal: экземпляр объекта AbortSignal; позволяет вам взаимодействовать с запросом на выборку и при необходимости прерывать его с помощью AbortController.

Отправка файлов cookie и аутентификация

По умолчанию Fetch API не отправляет файлы cookie и не включает информацию для аутентификации. Чтобы включить файлы cookie или заголовки проверки подлинности, необходимо установить для параметра учетных данных значение включать. Это позволяет вам делать аутентифицированные запросы или поддерживать аутентификацию на основе сеанса.

Запросы между источниками и CORS

CORS — это механизм безопасности, который ограничивает ресурсы, которые веб-страница может запрашивать из другого домена. Вам необходимо убедиться, что сервер поддерживает CORS и включает соответствующие заголовки (например, Access-Control-Allow-Origin), чтобы разрешить вашему источнику доступ к ресурсу.

Ответ

Получив ответ, вы можете обработать его различными способами. Общие методы, доступные для объекта ответа, включают:

response.json(): анализирует текст ответа как JSON и возвращает обещание, которое преобразуется в объект JavaScript.

response.text(): возвращает обещание, которое преобразуется в текст ответа в виде обычного текста.

response.blob(): возвращает обещание, которое разрешается в объект Blob, представляющий тело ответа.

response.arrayBuffer():возвращает обещание, которое разрешается в ArrayBuffer, представляющий тело ответа.

Вы можете связать эти методы вместе, чтобы обработать ответ в нужном формате.

Ответ на запрос

По умолчанию метод fetch() использует метод GET и не включает тело запроса. Если вам нужно использовать другой метод HTTP или включить данные в запрос, вам нужно будет указать эти данные в объекте options.

В приведенных ниже примерах я использую метод POST JSONPlaceholder, который является бесплатным API, когда вам нужны поддельные данные для тестирования и прототипирования.

Важно: ресурс на самом деле не будет обновляться на сервере, а будет как бы подделываться.

Непосредственное использование параметра объекта параметров:

// Configurations for the request options directly.
fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1,
  }),
})
  .then((response) => response.json())
  .then((result) => console.log(result))
  .catch((error) => console.error(error));

Разделение заголовков и тела:

// JSON object is created to define the headers.
const headers = {
  "Content-Type": "application/json",
};

// JSON object and converting it to a string of body.
const body = JSON.stringify({
  title: "foo",
  body: "bar",
  userId: 1,
});

const requestOptions = {
  method: "POST",
  headers,
  body,
};

fetch("https://jsonplaceholder.typicode.com/posts", requestOptions)
  .then((response) => response.json())
  .then((result) => console.log(result))
  .catch((error) => console.log("error", error));

Разделение заголовков (с помощью конструктора Headers()) и тела:

// headers object is created using the new Headers() constructor.
const headers = new Headers();
headers.append("Content-Type", "application/json");

// JSON object and converting it to a string of body.
const body = JSON.stringify({
  title: "foo",
  body: "bar",
  userId: 1,
});

const requestOptions = {
  method: "POST",
  headers,
  body,
};

fetch("https://jsonplaceholder.typicode.com/posts", requestOptions)
  .then((response) => response.json())
  .then((result) => console.log(result))
  .catch((error) => console.log("error", error));

Разделяющее тело (используя конструктор FormData()):

// body object is created using the new FormData() constructor.
const body = new FormData();
body.append("title", "foo");
body.append("body", "bar");
body.append("userId", 1);

const requestOptions = {
  method: "POST",
  body,
};

fetch("https://jsonplaceholder.typicode.com/posts", requestOptions)
  .then((response) => response.json())
  .then((result) => console.log(result))
  .catch((error) => console.log("error", error));

Если вам нужно загрузить файлы, используйте объект FormData для создания тела запроса.

Разделение метода, заголовков и тела (используя конструктор Request()):

// request object is created using the new Request() constructor.
const request = new Request("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1,
  }),
});

fetch(request)
  .then((response) => response.json())
  .then((result) => console.log(result))
  .catch((error) => console.error(error));

Установка таймаутов (используя конструктор AbortController()):

const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 5000);

fetch("https://jsonplaceholder.typicode.com/posts", {
  signal: controller.signal,
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error))
  .finally(() => clearTimeout(timeout));

Получение и анализ HTML-контента

В дополнение к Fetch API вы также можете получать HTML-контент и анализировать его, используя методы манипулирования конструктором DOMParser().

fetch("https://rodrigocastilho.com/")
  .then((response) => response.text())
  .then((html) => {
    // DOMParser object is created using the DOMParser() constructor.
    const parser = new DOMParser();

    const doc = parser.parseFromString(html, "text/html");

    // Use DOM manipulation to extract information from the HTML
    const title = doc.querySelector("title").textContent;

    console.log(title); // Output: Rodrigo Castilho (RODCAST)
  })
  .catch((error) => console.error(error));

Обратите внимание на соображения производительности при работе с выборкой. Оптимизируйте свои запросы, сократив ненужные заголовки, минимизировав размер полезной нагрузки, используя HTTP-кэширование и внедрив правильные стратегии кэширования на стороне клиента и сервера.

Хотя Fetch API является мощным и гибким инструментом, он может не подходить для всех случаев использования. Для более сложных сценариев, таких как обработка загрузки файлов, соединений WebSocket или событий, отправленных сервером, разработчикам может потребоваться использовать другие технологии или библиотеки.

Спасибо за прочтение, я надеюсь, что эта статья каким-то образом пополнила вашу базу знаний об этом.