Практичний посібник ES6 про те, як виконувати HTTP-запити за допомогою API Fetch

У цьому посібнику я покажу вам, як використовувати API Fetch (ES6 +) для виконання HTTP-запитів до REST API, з деякими практичними прикладами, з якими ви, швидше за все, зіткнетесь.

Хочете швидко переглянути приклади HTTP? Перейдіть до розділу 5. Перша частина описує асинхронну частину JavaScript під час роботи з HTTP-запитами.

Примітка : Усі приклади написані на ES6 із функціями стрілок.

Поширеною схемою сучасних веб-програм / мобільних додатків є запит або показ певних даних із сервера (наприклад, користувачів, публікацій, коментарів, підписок, платежів тощо), а потім маніпулювання ними за допомогою CRUD (створення, читання, оновлення або видалення).

Для подальшого маніпулювання ресурсом ми часто використовуємо такі методи JS (рекомендовані), такі як .map(), .filter()та .reduce().

Якщо ви хочете стати кращим веб-розробником, відкрити власний бізнес, навчати інших або вдосконалити свої навички розробки, я щотижня публікую поради та підказки на останніх мовах веб-розробки.

Ось до чого ми звернемось

  1. Робота з асинхронними HTTP-запитами JS
  2. Що таке AJAX?
  3. Чому Fetch API?
  4. Короткий вступ до Fetch API
  5. Fetch API - приклади CRUD ← хороші речі!

1. Робота з асинхронними HTTP-запитами JS

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

У більшості мов програмування ми готові думати, що операції відбуваються в порядку (послідовно). Перший рядок потрібно виконати, перш ніж ми зможемо перейти до наступного рядка. Це має сенс, оскільки саме так ми, люди, працюємо і виконуємо щоденні завдання.

Але з JS у нас є кілька операцій, які виконуються у фоновому режимі / передньому плані, і ми не можемо мати веб-програму, яка зависає кожного разу, коли вона чекає події користувача.

Опис JavaScript як асинхронного, можливо, вводить в оману. Точніше сказати, що JavaScript є синхронним і однопотоковим з різними механізмами зворотного виклику. Читати далі.

Тим не менше, іноді все має відбуватися по порядку, інакше це спричинить хаос і несподівані результати. З цієї причини ми можемо використовувати обіцянки та зворотні дзвінки для його структурування. Прикладом може бути перевірка облікових даних користувача перед переходом до наступної операції.

2. Що таке AJAX

AJAX розшифровується як Асинхронний JavaScript та XML, і він дозволяє асинхронно оновлювати веб-сторінки, обмінюючись даними з веб-сервером під час роботи програми. Коротше кажучи, це по суті означає, що ви можете оновлювати частини веб-сторінки, не перезавантажуючи цілу сторінку (URL-адреса залишається незмінною).

AJAX - оманлива назва. Програми AJAX можуть використовувати XML для транспортування даних, але однаково часто передавати дані як звичайний текст або JSON-текст.

- w3shools.com

AJAX на всьому шляху?

Я бачив, що багато розробників, як правило, дуже раді тому, щоб мати все в одній сторінці додатка (SPA), і це призводить до безлічі асинхронних болів! Але на щастя, у нас є такі бібліотеки, як Angular, VueJS та React, що робить цей процес набагато простішим та практичнішим.

Загалом, важливо мати баланс між тим, що повинно перезавантажити цілу сторінку або її частини.

І в більшості випадків перезавантаження сторінки чудово працює з точки зору того, наскільки потужними стали браузери. Ще в ті дні перезавантаження сторінки займало б секунди (залежно від розташування сервера та можливостей браузера). Але сучасні браузери надзвичайно швидкі, тому вирішення, виконувати AJAX або перезавантаження сторінки, не має великої різниці.

Мій особистий досвід полягає в тому, що набагато простіше і швидше створити пошукову систему за допомогою простої кнопки пошуку, ніж робити це без кнопки. І в більшості випадків клієнту все одно, це СПА чи додаткове перезавантаження сторінки. Звичайно, не зрозумійте мене неправильно, я дуже люблю СПА, але нам потрібно розглянути кілька компромісів, якщо ми маємо справу з обмеженим бюджетом та браком ресурсів, можливо, швидше рішення є кращим підходом.

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

3. Чому API Fetch?

Це дозволяє нам виконувати декларативні HTTP-запити до сервера. Для кожного запиту він створює такий, Promiseякий повинен бути вирішений, щоб визначити тип вмісту та отримати доступ до даних.

Тепер перевага Fetch API полягає в тому, що він повністю підтримується екосистемою JS, а також є частиною документів MDN Mozilla. І останнє, але не менш важливе: він працює нестандартно у більшості браузерів (крім IE). У довгостроковій перспективі, я гадаю, це стане стандартним способом виклику веб-API.

Примітка! Я добре знаю інші підходи HTTP, такі як використання Observable з RXJS, і те, як він фокусується на управлінні пам'яттю / витоку з точки зору підписки / відмови від підписки тощо. І, можливо, це стане новим стандартним способом виконання HTTP-запитів, хто знає?

У будь-якому випадку, у цій статті я зосереджуюся лише на Fetch API, але в майбутньому можу написати статтю про Observable та RXJS.

4. Короткий вступ до Fetch API

fetch()Метод повертає , Promiseякий розкладає Responseвід Requestпоказати статус (успішно чи ні). Якщо ви коли-небудь отримаєте це повідомлення promise {}на екрані журналу консолі, не панікуйте - це в основному означає, що все Promiseпрацює, але чекає на своє вирішення. Отже, для її вирішення нам потрібен .then()обробник (зворотний виклик) для доступу до вмісту.

Отже, коротко, спочатку ми визначаємо шлях ( Fetch ), по-друге запитуємо дані від сервера ( Request ), по-третє, визначаємо тип вмісту ( Body ) і, нарешті, але не менш важливо, ми отримуємо доступ до даних ( Response ).

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

The path we'll be using for our examples //jsonplaceholder.typicode.com/users // returns JSON

5. Fetch API - приклади HTTP

Якщо ми хочемо отримати доступ до даних, нам потрібні два .then()обробники (зворотний дзвінок). Але якщо ми хочемо маніпулювати ресурсом, нам потрібен лише один .then()обробник. Однак ми можемо використовувати другий, щоб переконатися, що значення надіслано.

Базовий шаблон API Fetch:

Примітка! Приклад вище наведено лише для ілюстративних цілей. Код не буде працювати, якщо його виконати.

Приклади API вибору

  1. Показ користувача
  2. Показ списку користувачів
  3. Створення нового користувача
  4. Видалення користувача
  5. Оновлення користувача
Примітка! Ресурс насправді не буде створений на сервері, але поверне підроблений результат для імітації справжнього сервера.

1. Показ користувача

Як вже згадувалося раніше, процес показу одного користувача складається з двох .then()обробників (зворотного виклику), першого для визначення об'єкта, а другого для доступу до даних.

Зверніть увагу, просто прочитавши рядок запиту, /users/2ми можемо зрозуміти / передбачити, що робить API. Щоб отримати докладнішу інформацію про те, як написати високоякісний REST API, перегляньте ці рекомендації, написані Махешем Халдаром.

Приклад

2. Показ списку користувачів

Приклад майже ідентичний попередньому прикладу, за винятком того, що рядок запиту є /users, а ні /users/2.

Приклад

3. Створення нового користувача

Цей вигляд дещо відрізняється від попереднього прикладу. Якщо ви не знайомі з протоколом HTTP, він просто дає нам пару солодких методів , таких як POST, GET, DELETE, UPDATE, PATCHі PUT. Ці методи є дієсловами, які просто описують тип дії, яку потрібно виконати, і в основному використовуються для маніпулювання ресурсом / даними на сервері.

У будь-якому випадку, для того, щоб створити нового користувача за допомогою Fetch API, нам потрібно буде використовувати дієслово HTTP POST. Але спочатку нам потрібно десь це визначити. На щастя, є необов’язковий аргумент, який Initми можемо передавати разом із URL-адресою для визначення власних налаштувань, таких як тип методу, вміст, облікові дані, заголовки тощо.

Примітка: Параметри fetch()методу ідентичні параметрам Request()конструктора.

Приклад

4. Видалення користувача

Для того, щоб видалити користувача, нам спочатку потрібно націлити на користувача /users/1, а потім визначити тип методу, який є DELETE.

Приклад

5. Оновлення користувача

Дієслово HTTP PUTвикористовується для маніпулювання цільовим ресурсом, і якщо ви хочете внести часткові зміни, вам потрібно буде використовувати PATCH. Щоб отримати докладнішу інформацію про те, що роблять ці дієслова HTTP, перегляньте це.

Приклад

Висновок

Тепер ви маєте базове уявлення про те, як отримати або маніпулювати ресурсом із сервера за допомогою API вибору JavaScript, а також як поводитися з обіцянками. Ви можете використовувати цю статтю як керівництво щодо структурування запитів API для CRUD-операцій.

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

Усі приклади показані в запиті обіцяної бази, де ми запроваджуємо запит за допомогою .thenзворотного виклику. Це стандартний підхід, з яким знайомі багато розробників, однак, якщо ви хочете скористатися async/awaitцим, перегляньте цю статтю. Концепція однакова, за винятком того, що async/awaitїї легше читати та писати.

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

  • Порівняння між Angular та React
  • Хаотичний розум веде до хаотичного коду
  • Розробники, які постійно хочуть пізнавати нові речі
  • Практичний посібник з модулів ES6
  • Вивчіть ці основні веб-концепції
  • Підвищте свої вміння за допомогою цих важливих методів JavaScript
  • Програмуйте швидше, створюючи власні команди bash

Ви можете знайти мене в Medium, де я публікую щотижня. Або ви можете стежити за мною у Twitter, де я публікую відповідні поради та підказки щодо веб-розробки разом із особистими історіями.

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