Как использовать Fetch API в JavaScript

Почему стоит выбрать Fetch API вместо традиционных методов

В прежние времена для запроса данных использовался метод XMLHttpRequest. Но надо признать, что сейчас этот метод уже устарел. Он громоздок, требует больше строк кода и использует шаблон обратного вызова, который не так прост, как более новая структура, основанная на обещаниях. Fetch API предлагает гораздо более современный способ взаимодействия с сервером. Этот собственный JavaScript API основан на обещаниях, то есть использует обещания для обработки результатов и отказов, что делает код более читабельным и управляемым.

Более того, он позволяет использовать современный синтаксис async/await для создания еще более чистого и интуитивно понятного кода. Fetch API встроен в язык JavaScript, поэтому вам не нужно полагаться на внешние библиотеки, такие как Axios или jQuery. Это упрощает цепочку зависимостей в проекте и делает поиск неисправностей более понятным.

Основы синтаксиса: Разбираем по полочкам

Когда мы говорим об API Fetch, одним из первых приходит на ум простота его синтаксиса. В самом простом случае необходимо указать URL-адрес, с которого нужно получить данные. Вот как выглядит синтаксис в самом простом виде:

fetch('https://api.example.com/data')

Этот фрагмент кода, по сути, просит браузер перейти по указанному URL и получить данные. Функция возвращает Promise, который разрешается в объект Response, представляющий выполненный запрос. Обратите внимание, что требуется только URL, что упрощает работу с Fetch.

GET-запрос: Ваш первый запрос

Получение данных с сервера - одна из самых распространенных операций в веб-разработке. Для этой цели служит запрос GET. Для выполнения GET-запроса достаточно вызвать функцию fetch с указанием URL ресурса, который необходимо получить. После получения данных можно преобразовать их в формат JSON для более удобной работы с ними.

fetch('https://api.example.com/data')

  .then(response => response.json())

  .then(data => console.log(data))

Этот код получает данные с заданного URL, преобразует полученную полезную нагрузку в JSON и выводит ее в консоль. Метод then определяет, что делать после разрешения Promise. Это цепной метод, то есть вы можете подключить еще один метод then для обработки последующих действий.

Обработка HTTP-ответов

Fetch не отклоняет обещание для кодов состояния ошибки сервера. Таким образом, возникает необходимость проверить свойство ok объекта Response, чтобы убедиться в успешности запроса. Если этого не сделать, то приложение может повести себя не так, как ожидалось.

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.log('Возникла проблема с операцией выборки:', error));

Этот фрагмент кода не только получает данные, но и проверяет, без ошибок ли ответил сервер. Проверять наличие ошибок всегда полезно, чтобы убедиться, что вы не работаете с некачественными данными. Метод catch будет обрабатывать любые ошибки, связанные с проблемами в сети или с введенным URL.

POST-запрос: Отправка данных

В то время как запрос GET извлекает данные, запрос POST отправляет их на сервер. Чтобы выполнить POST-запрос с помощью Fetch, можно добавить объект settings в качестве второго аргумента функции Fetch. Объект settings позволяет указать метод, заголовки и тело запроса.

fetch('https://api.example.com/data', {

  метод: 'POST',

  заголовки: {

    'Content-Type': 'application/json'

  },

  body: JSON.stringify({key: 'value'})

});

Здесь свойство method указывает на то, что мы делаем POST-запрос. Свойство headers задает тип содержимого как JSON, а свойство body содержит полезную нагрузку, которую мы хотим отправить, также в формате JSON. Такая конфигурация гарантирует, что и клиент, и сервер поймут отправляемые данные.

Работа с заголовками

Добавление заголовков в запрос Fetch может иметь решающее значение при работе с API, требующими аутентификации или специальных типов содержимого. Fetch позволяет легко добавлять заголовки. Вы можете включить их в объект options с помощью ключа headers.

fetch('https://api.example.com/data', {

  заголовки: {

    'Authorization': 'Bearer ' + token

  }

})

В приведенном выше коде добавляется заголовок Authorization для передачи маркера для аутентифицированных маршрутов. Заголовки также могут использоваться для управления кэшем, указания типов содержимого, управления ограничениями CORS (Cross-Origin Resource Sharing) и т.д.

Использование параметров запроса

Добавление параметров запроса к URL в Fetch - частое требование. Вы можете вручную конкатенировать параметры в URL, либо использовать собственные классы JavaScript URL и URLSearchParams для их программного добавления.

let url = new URL('https://api.example.com/data'),

    params = {id: 123, name: 'John'}

Object.keys(params).forEach(key => url.searchParams.append(key, params[key]))

fetch(url);

Таким образом, можно добавлять столько параметров запроса, сколько необходимо, не заботясь о том, чтобы вручную кодировать их или допускать синтаксические ошибки в строке URL. Это повышает читаемость и удобство сопровождения кода.

Объекты запросов и ответов

Fetch предоставляет специализированные объекты Request и Response для расширенных вариантов использования. Вам может понадобиться создать объект Request, если вы хотите управлять определенными настройками, например, кэшированием. Затем этот объект можно передать в качестве аргумента в fetch.

let req = new Request('https://api.example.com/data', { method: 'GET', cache: 'reload' });

fetch(req);

Использование объектов Request и Response позволяет более тонко управлять различными аспектами цикла "запрос - ответ", например, настраивать заголовки или типы содержимого для каждого запроса. Это открывает возможности для создания сложных конфигураций, которые простой вызов Fetch может не учесть.

Async/Await с функцией Fetch

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

async-функция fetchData() {

  const response = await fetch('https://api.example.com/data');

  const data = await response.json();

  console.log(data);

}

Здесь функция async fetchData выполняет асинхронный вызов с использованием await, который приостанавливает выполнение функции до разрешения Promise. После получения данных они преобразуются в JSON и выводятся в консоль.

Прерывание выборки

Недостатком Fetch является невозможность отмены запроса после его инициирования. Однако Fetch API предлагает интерфейс AbortController для прерывания запросов на выборку.

const controller = new AbortController();

const { signal } = controller;

fetch('https://api.example.com/data', { signal })

  .catch(err => {

    if (err.name === 'AbortError') {

      console.log('Fetch aborted');

    }

  });

controller.abort();

Связав сигнал AbortController с выборкой, вы можете впоследствии вызвать controller.abort() для отмены запроса. Эта возможность полезна для сценариев, в которых необходимо предоставить пользователям возможность отменять долго выполняющиеся запросы.

Поддержка браузеров: Что необходимо знать

Fetch API поддерживается большинством современных веб-браузеров, включая Chrome, Firefox и Safari. Однако стоит отметить, что он не поддерживается в Internet Explorer. Если вы стремитесь к широкой совместимости, то, возможно, вам придется включить полифилл для браузеров, не поддерживающих Fetch.