JavaScript Fetch API надає інтуїтивно зрозумілий спосіб надсилати запити клієнту вашої програми, що працює у браузері.
Він простий у використанні та використовує сучасний синтаксис JavaScript. Ця стаття є посібником щодо використання Fetch API.
Що таке JavaScript Fetch API?
JavaScript Fetch API – це інтерфейс, який сучасні веб-переглядачі надають для виконання запитів із зовнішнього боку. Він надає альтернативу старішому AJAX XMLHttpRequest.
Вона доступна як глобальна функція під назвою fetch. При виклику з аргументами ця функція повертає обіцянку, яка розв’язується у відповідь. За допомогою функції fetch ви можете робити будь-які запити HTTP.
Переваги Fetch API перед іншими методами
- Він має більш простий та інтуїтивно зрозумілий інтерфейс, який легко освоїти та використовувати. У результаті ваш код стає чистішим, коли ви використовуєте Fetch API. XMLHttpRequest є складнішим, і ваш код не такий чистий, як під час використання Fetch API.
- Він підтримує проміси, що дає змогу чистіше писати асинхронний код. XMLHttpRequest не підтримує їх; замість цього ви повинні додати зворотні виклики до обробників подій. Залежно від ваших уподобань, ви можете віддати перевагу JavaScript Fetch API.
- Він нативно підтримується в браузері. Це означає, що вам не потрібно додавати додаткові бібліотеки, щоб робити запити. Додаткові бібліотеки збільшать пакет JavaScript і сповільнять роботу веб-сайту.
Використання Fetch API
У цьому розділі буде описано створення різних запитів за допомогою JavaScript Fetch API. Щоб написати код, ви можете використовувати будь-який редактор, який вам подобається. Просто переконайтеся, що ви запустили код у браузері. Я запусту його всередині тегу сценарію у файлі HTML.
Простий запит GET
Спочатку ми навчимося робити простий запит на отримання. Код для цього має таку структуру:
fetch(url)
Тому, якщо ми хочемо отримати дописи з API заповнювача JSONви б зробили це таким чином:
fetch('https://jsonplaceholder.typicode.com/posts');
Виклик функції поверне обіцянку, вирішуючи відповідь API або помилку, якщо така була. Тому, щоб отримати відповідь, ми будемо використовувати ключове слово await. Але ми можемо використовувати лише ключове слово await в асинхронній функції.
Отже, ми обгорнемо функцію fetch асинхронною функцією та викличемо її. Якщо ви не знайомі з усім цим, ось докладний посібник з асинхронного JavaScript. У будь-якому разі код:
async function getData() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
console.log(response);
}
getData();
Якщо ви запустите наведений вище код, ви повинні отримати наступний результат у своєму виході.
Результат показує, що функція fetch повернула об’єкт Response. Цей об’єкт має властивості, які включають статус, заголовки та тіло. Дані відповіді зберігаються як рядок JSON у тілі. Тому ми повинні витягнути рядок і проаналізувати JSON, щоб отримати дані як об’єкт JavaScript.
На щастя, об’єкт Response має зручний метод під назвою json(). Цей метод читає тіло відповіді та намагається проаналізувати рядок як JSON. Він повертає обіцянку, яка розв’язується з об’єктом, розібраним із JSON.
Однак цей метод викличе помилку, якщо тіло не є дійсним рядком JSON. Тому ми повинні аналізувати JSON, лише якщо відповідь має код статусу 200.
Отже, код для отримання дописів буде таким:
async function getData() {
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts"
);
if (response.status == 200) {
const posts = await response.json();
console.log(posts);
} else {
console.log("Something went wrong:", response.status);
}
}
getData();
Виконання наведеного вище коду дасть такі результати:
Це масив із ста дописів.
Для деяких кінцевих точок API потрібні заголовки. Ці заголовки можна використовувати, наприклад, для авторизації. JavaScript Fetch API надає простий спосіб надсилати заголовки як частину запиту. Щоб указати заголовки, у виклик функції fetch потрібно передати аргумент параметрів.
fetch(url, options);
Отже, наш попередній приклад тепер виглядатиме так:
async function getData() {
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts", {
headers: {
'x-auth': '<your auth token>'
}
}
);
if (response.status == 200) {
const posts = await response.json();
console.log(posts);
} else {
console.log("Something went wrong:", response.status);
}
}
getData();
Оскільки для JSONPlaceholder API не потрібен заголовок авторизації, наведений вище код працюватиме, як і раніше. Однак важливо знати, що існує можливість передати заголовки.
Перехід в інші варіанти
Крім передачі заголовків, ви можете передати багато інших параметрів функції fetch. Два параметри, які ви часто передаєте, це метод запиту та параметри тіла запиту.
Ми зробимо запит POST до JSONPlaceholder API, щоб продемонструвати передачу їх обох. Ось код для цього:
async function getData() {
const response = await fetch(
"https://jsonplaceholder.typicode.com/posts", {
method: 'POST',
body: JSON.stringify({
title: 'Fetch API',
body: 'Lorem Ipsum',
userId: 1,
})
}
);
if (response.status == 200) {
const posts = await response.json();
console.log(posts);
} else {
console.log("Something went wrong:", response.status);
}
}
getData();
У нашому об’єкті параметрів ми вказали метод запиту, який ми хочемо використовувати, і тіло як властивості. Для обох властивостей ми надали рядкові аргументи. Ми надали рядок “POST” для методу запиту, оскільки ми хочемо зробити запит POST. Ми також надали рядок JSON для властивості body. Цей рядок JSON формується шляхом створення рядків об’єкта з потрібними властивостями.
Запуск цього коду в браузері дає такий результат:
Вихід – це об’єкт, який містить ідентифікатор, який ми щойно отримали від сервера. Ось чудовий ресурс щоб переглянути повний список параметрів, які ви можете вказати.
Помилки під час використання JavaScript Fetch API
#1. Помилки мережі
Під час виконання мережевих запитів часто виникають помилки. Функція fetch повертає обіцянку, яка розв’язується з результатом або відхиляється, якщо виявлено помилку мережі. Тому ми повинні загорнути наш код у блок try/catch. Для ефективної обробки помилок мережі.
#2. Інші помилки
Окрім помилок мережі, ви також можете зіткнутися з іншими помилками, наприклад 404s, 403s та 500s. Функція fetch не видає помилку, коли такі помилки зустрічаються. Тому їх потрібно перевірити, перевіривши код статусу відповіді. Наприклад, у попередніх прикладах ми намагалися проаналізувати тіло відповіді лише тоді, коли код статусу був 200.
#3. Помилки CORS
Інші поширені помилки, з якими ви можете зіткнутися, це помилки CORS. CORS розшифровується як Cross-Origin Resource Sharing. Початок — це унікальна комбінація протоколу, хоста та порту сервера. Наприклад, мій веб-сайт може працювати на локальному хості, на порту 5500, і обслуговуватись через HTTP, протокол. Таким чином, походження цього веб-сайту буде http://localhost:5500.
Той самий веб-сайт надсилає запит API до API https://jsonplaceholder.typicode.com іншого походження. Таким чином, ці два джерела, localhost і JSONPlaceholder, спільно використовують ресурси. Це спільне використання ресурсів між джерелами. Однак для роботи сервера API потрібно ввімкнути CORS. Це не завжди так. Рішенням для обробки таких помилок було б надсилати запити через проксі-сервер із підтримкою CORS.
Підтримка браузера
Fetch API є досить сучасною функцією. Відповідно до CanIUse.comприблизно 95% користувачів у всьому світі мають браузери, які підтримують це.
Висновок
JavaScript Fetch API — це синтаксично кращий і елегантніший спосіб написання інтерфейсів, які надсилають запити API. З огляду на обмежену підтримку браузера, ви можете розглянути інші клієнтські бібліотеки HTTP.