Підручник з API Fetch JavaScript із прикладами JS Fetch Post та Header

Якщо ви пишете веб-програму, швидше за все, вам доведеться працювати з зовнішніми даними. Це може бути ваша власна база даних, сторонні API та ін.

Коли AJAX вперше з’явився в 1999 році, це показало нам кращий спосіб створення веб-додатків. AJAX став віхою у веб-розробці і є ключовою концепцією багатьох сучасних технологій, таких як React.

До AJAX вам потрібно було рендерити цілу веб-сторінку навіть для незначних оновлень. Але AJAX дав нам спосіб отримати вміст із серверної бази та оновити вибрані елементи інтерфейсу користувача. Це допомогло розробникам покращити взаємодію з користувачами та створити більші, складніші веб-платформи.

Аварійний курс на REST API

Ми зараз у віці RESTful API. Простіше кажучи, REST API дозволяє перетягувати та витягувати дані з сховища даних. Це може бути ваша база даних або сторонній сервер, такий як Twitter API.

Існує кілька різних типів REST API. Давайте розглянемо ті, які ви будете використовувати в більшості випадків.

  • GET  - Отримати дані з API. Наприклад, отримати користувача щебетання на основі його імені користувача.
  • POST  - надсилання даних до API. Наприклад, створіть новий запис користувача з іменем, віком та адресою електронної пошти.
  • PUT  - оновіть наявний запис новими даними. Наприклад, оновіть електронну адресу користувача.
  • ВИДАЛИТИ  - Вилучити запис. Наприклад, видалити користувача з бази даних.

У кожному REST API є три елементи. Запит, відповідь та заголовки.

Запит  - це дані, які ви надсилаєте в API, наприклад ідентифікатор замовлення для отримання деталей замовлення.

Відповідь  - будь-які дані, які ви отримуєте із сервера після успішного / невдалого запиту.

Заголовки  - Додаткові метадані, передані API, щоб допомогти серверу зрозуміти, з яким типом запиту він має справу, наприклад “тип вмісту”.

Дійсною перевагою використання REST API є те, що ви можете створити один рівень API для декількох додатків, з якими можна працювати.

Якщо у вас є база даних, якою ви хочете керувати за допомогою веб-, мобільних та настільних додатків, вам знадобиться лише один рівень API REST.

Тепер, коли ви знаєте, як працюють API REST, давайте розглянемо, як ми можемо їх споживати.

XMLHttpRequest

До того, як JSON захопив світ, основним форматом обміну даними був XML. XMLHttpRequest () - це функція JavaScript, яка дозволила отримати дані з API, які повернули дані XML.

XMLHttpRequest дав нам можливість отримати дані XML із серверної бази без перезавантаження всієї сторінки.

Ця функція зросла з перших днів існування лише XML. Зараз він підтримує інші формати даних, такі як JSON та відкритий текст.

Давайте напишемо простий виклик XMLHttpRequest до API GitHub, щоб отримати мій профіль.

// function to handle success function success() { var data = JSON.parse(this.responseText); //parse the string to JSON console.log(data); } // function to handle error function error(err) { console.log('Request Failed', err); //error details will be in the "err" object } var xhr = new XMLHttpRequest(); //invoke a new instance of the XMLHttpRequest xhr.onload = success; // call success function if request is successful xhr.onerror = error; // call error function if request failed xhr.open('GET', '//api.github.com/users/manishmshiva'); // open a GET request xhr.send(); // send the request to the server.

Вищезазначений код надішле запит GET на //api.github.com/users/manishmshiva для отримання моєї інформації про GitHub у JSON. Якщо відповідь була успішною, він надрукує на консолі такий JSON:

Якщо запит не вдався, він надрукує це повідомлення про помилку на консолі:

Fetch API

Fetch API - це більш проста, проста у використанні версія XMLHttpRequest для асинхронного споживання ресурсів. Fetch дозволяє працювати з REST API з додатковими параметрами, такими як кешування даних, читання потокових відповідей тощо.

Основна відмінність полягає в тому, що Fetch працює з обіцянками, а не зворотними викликами. Розробники JavaScript відійшли від зворотних викликів після введення обіцянок.

Для складної програми ви можете легко увійти в звичку писати зворотні дзвінки, що ведуть до пекла зворотних дзвінків.

Завдяки обіцянкам легко писати та обробляти асинхронні запити. Якщо ви не знайомі з обіцянками, ви можете дізнатися, як вони працюють тут.

Ось як би виглядала функція, яку ми писали раніше, якби ви використовували fetch () замість XMLHttpRequest:

// GET Request. fetch('//api.github.com/users/manishmshiva') // Handle success .then(response => response.json()) // convert to json .then(json => console.log(json)) //print data to console .catch(err => console.log('Request Failed', err)); // Catch errors

Першим параметром функції Fetch завжди повинна бути URL-адреса. Потім Fetch бере другий об'єкт JSON з такими параметрами, як метод, заголовки, тіло запиту тощо.

Існує важлива різниця між об’єктом відповіді в XMLHttpRequest та Fetch.

XMLHttpRequest повертає дані як відповідь, тоді як об'єкт відповіді з Fetch містить інформацію про сам об'єкт відповіді. Це включає заголовки, код стану тощо. Ми викликаємо функцію “res.json ()”, щоб отримати потрібні нам дані від об’єкта відповіді.

Інша важлива відмінність полягає в тому, що API Fetch не видасть помилки, якщо запит повертає код стану 400 або 500. Він все одно буде позначений як успішна відповідь і переданий функції "тоді".

Fetch видає помилку лише в тому випадку, якщо сам запит перервано. Щоб обробити відповіді 400 та 500, ви можете написати власну логіку, використовуючи 'response.status'. Властивість 'status' надасть вам код статусу повернутої відповіді.

Чудово. Тепер, коли ви зрозуміли, як працює API Fetch, давайте розглянемо ще кілька прикладів, таких як передача даних та робота з заголовками.

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

Ви можете передавати заголовки, використовуючи властивість “headers”. Ви також можете використовувати конструктор заголовків, щоб краще структурувати ваш код. Але передача об’єкта JSON властивості “заголовки” повинна працювати в більшості випадків.

fetch('//api.github.com/users/manishmshiva', { method: "GET", headers: {"Content-type": "application/json;charset=UTF-8"} }) .then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));

Передача даних на запит POST

Для запиту POST ви можете використовувати властивість “body” для передачі рядка JSON як вхідних даних. Зверніть увагу, що тіло запиту має бути рядком JSON, тоді як заголовки повинні бути об’єктом JSON.

// data to be sent to the POST request let _data = { title: "foo", body: "bar", userId:1 } fetch('//jsonplaceholder.typicode.com/posts', { method: "POST", body: JSON.stringify(_data), headers: {"Content-type": "application/json; charset=UTF-8"} }) .then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));

The Fetch API is still in active development. We can expect better features in the near future.

However, most browsers support the use of Fetch in your applications. The chart below should help you figure out which browsers support it on the web and mobile apps.

I hope this article helped you understand how to work with the Fetch API. Be sure to try out Fetch for your next web application.

I regularly write about Machine Learning, Cyber Security, and DevOps. You can signup for my weekly newsletter here.