Валюта:
$
USD ($)
EUR (€)
UAH (₴)
DKK (Dkk)
SEK (Sek)
NOK (Nok)
JPY (¥)
CHF (₣)
GBP (£)
AUD (A$)
PLN (zł)
ILS (₪)
KZT (₸)
CAD (C$)
Показать ещё
Регион:
Не указан
США
Украина
Израиль
Европа
Испания
Казахстан
Италия
Дания
Швеция
Норвегия
Германия
Швейцария
Франция
Финляндия
Нидерланды
Япония
Великобритания
Австралия
Канада
Польша
Мальта
Не указан
Латвия
Показать ещё
Язык:
RU
Разработка

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

Добро пожаловать в запутанный мир JavaScript! Если вы хотите повысить уровень своего мастерства в области получения данных с сервера, то вы попали по адресу. Сегодня мы подробно рассмотрим Fetch API - современный мощный инструмент для выполнения HTTP-запросов на JavaScript.

828
15

Почему стоит выбрать 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.

УЗНАЙТЕ КАК ПОЛУЧИТЬ САЙТ СО СКИДКОЙ
Оставьте свои данные и наши операторы перезвонят вам, чтобы рассчитать стоимость и согласовать скидку специально для Вас
Статьи
Публикации в нашем блоге

Увлекательные статьи на нашем сайте ответят, как разработать сайт, выбрать платформу, получить клиентов.

все статьи
Есть идеи, но не знаете с чего начать?

Ответьте на несколько вопросов в онлайне и мы подскажем!

Бриф - это краткая информация о Вашем проекте. Заполнив онлайн-бриф на нашем сайте - вы сэкономите время и избавитесь от ненужных разговоров!

Узнайте стоимость проекта онлайн! ?
Ответьте на несколько вопросов и узнайте сколько стоит разработка Вашего сайта!
заполнить бриф
Узнайте как выйти в ТОП в 2024! ?
Ответьте на несколько вопросов ОНЛАЙН и узнайте что нужно, чтобы Ваш сайт вышел в ТОП !
заполнить бриф
Перейти на українську версію сайту?
Закрити
Так