Як використовувати вибірку для здійснення дзвінків AJAX у JavaScript

У цій серії я буду регулярно ділитися знаннями про JavaScript щодо розміру укусу. Ми розглянемо основи JS, браузери, DOM, дизайн системи, архітектуру домену та фреймворки.

Fetch - це інтерфейс для створення запиту AJAX у JavaScript. Він широко впроваджений сучасними браузерами і використовується для виклику API.

const promise = fetch(url, [options]) 

Виклик fetch повертає обіцянку з об’єктом Response. Обіцянка відхиляється, якщо є помилка мережі, і вона вирішується, якщо немає проблем із підключенням до сервера, і сервер відповів код стану. Цей код стану може бути 200, 400 або 500.

Зразок запиту FETCH -

 fetch(url) .then(response => response.json()) .catch(err => console.log(err)) 

Запит надсилається як GET за замовчуванням. Щоб надіслати POST / PATCH / DELETE / PUT, ви можете використовувати властивість методу як частину optionsпараметра. Деякі інші можливі значення optionsможуть приймати -

  • method: такі як GET, POST, PATCH
  • headers: Об’єкт заголовків
  • mode: Такі , як cors, no-cors,same-origin
  • cache: режим кешування для запиту
  • credentials
  • body

Повний список доступних варіантів можна переглянути тут

Приклад використання:

Цей приклад демонструє використання fetch для виклику API та отримання списку сховищ git.

const url = '//api.github.com/users/shrutikapoor08/repos'; fetch(url) .then(response => response.json()) .then(repos => { const reposList = repos.map(repo => repo.name); console.log(reposList); }) .catch(err => console.log(err)) 

Щоб надіслати запит POST, ось як можна використовувати параметр методу з синтаксисом async / await.

const params = { id: 123 } const response = await fetch('url', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(params) }); const data = await response.json(); 

Вас цікавить більше JSBytes? Підпишіться на розсилку