Одним з найосновніших завдань, яке вам доведеться виконати в JavaScript, є GET запит через fetch. На самому початку мого кодування це було одне з найбільших труднощів. Я не розумів, що саме я роблю з цим. Здавалося, що це просто купа тексту, яку треба запам'ятати. Спочатку, коли я міг написати GET запит fetch, я просто підходив до цього через шаблонне співвідношення. Потрібен був час, щоб зрозуміти, як це працює і як правильно написати такий запит. Від них не втечеш, запити fetch — це реальність, і тому ось простий посібник, як написати такий запит.
Для початку ми крок за кроком пройдемо через стандартний JavaScript Fetch запит, а потім адаптуємо його для React запиту. Потрібно лише кілька модифікацій!
По-перше, що таке GET запит через fetch? Простими словами, ви запитуєте у сервера інформацію і потім робите щось з цією інформацією. Ви можете отримати її з зовнішнього API, з власної бази даних тощо. Зрозуміло, що перший крок у написанні GET запиту — це отримати URL бази даних.
fetch('http://localhost:3000/menu')
Це синтаксис для першого рядка GET запиту. Цей запит відправляється на JSON сервер, який працює локально. Цей локальний сервер поверне масив елементів меню. Головні моменти: вам потрібно вказати ключове слово «fetch» з круглими дужками навколо URL. Це тому, що fetch — це функція. Окрім круглих дужок, вам також потрібні лапки навколо URL всередині дужок. Лапки необхідні, оскільки URL — це рядок. Рядки завжди потребують лапок. Я використовую одинарні лапки (‘string’), але стандартні лапки (“string”) також працюють. Це вже залежить від особистих вподобань. Усі ці елементи обов’язкові кожного разу.
Наступний рядок відповідає за комунікацію з API. Він запитує обіцянку повернути інформацію. Щоб трохи пояснити, fetch запит є частиною асинхронного рендерингу. Простими словами, це означає, що те, що може завантажитись першим, завантажується, а все інше — потім. Наприклад, завантажити HTML і CSS займає менше часу, ніж отримати дані. Обіцянка (promise) — це об’єкт, який каже, що можливо я не зможу отримати дані зараз, але я зроблю це якнайшвидше. Для людського ока, з поточною швидкістю інтернету, це відбувається так швидко, що ми цього навіть не помічаємо. Асинхронний рендеринг дозволяє отримати веб-сторінки швидше, не чекаючи завантаження сторінки до того, як дані і більш складні елементи завантажаться.
.then(response => response.json())
Тепер давайте розберемо цей рядок коду. Початок .then — це функція. Всередині .then передається відповідь, яку повертає response.json. response.json — це функція. Я постійно плутався з цим. Не забувайте про круглі дужки. Без них ви не зможете відрендерити нічого.
Останній рядок визначає, що ви хочете зробити з отриманою інформацією. Куди ви хочете її відправити? Легкий трюк, щоб заспокоїтися — це відправити ваші дані в console.log(), щоб переконатися, що ви отримали потрібні вам дані.
.then(data => console.log(data))
Ось як можуть виглядати ці дані. Я можу натискати на це, щоб розгорнути масив і побачити всі елементи меню з їхніми даними.
Тепер вирішуємо, що робити з цими даними, для цих елементів меню я хочу передати їхні дані у навігаційну панель, щоб відобразити кожне їхнє ім’я. Я можу використати .map() або .forEach(), щоб пройти через ці дані.
.then(data => {
data.forEach((data) => {
renderNavBar(data)
})
})
З цього моменту ми можемо працювати з кодом, щоб відобразити його на веб-сторінці, зробити кожне ім’я клікабельним для перегляду додаткової інформації тощо. Ось весь запит fetch разом.
fetch('http://localhost:3000/menu')
.then(response => response.json())
.then(data => {
data.forEach((data) => {
renderNavBar(data)
})
})
Давайте пройдемося ще раз. Перший рядок отримує URL ваших даних. Наступний рядок налаштовує обіцянку для отримання інформації.
Нарешті, ви отримали дані і вирішуєте, що з ними робити. Є ще інші речі, які можна додати, щоб уникнути певних помилок, але це основа для GET запиту через fetch.
А що, якщо я хочу зробити це в React? Як зміниться код? Все це буде розглянуто в наступному блозі. Дуже дякую за прочитане!
Перекладено з: How to: GET Fetch Request Vanilla JavaScript