Как да използвам извличането за извършване на AJAX повиквания в JavaScript

Ще споделям редовно знания за JavaScript за JavaScript в тази поредица. Ще разгледаме основите на JS, браузъри, DOM, системен дизайн, архитектура на домейни и рамки.

Извличането е интерфейс за извършване на AJAX заявка в JavaScript. Той се прилага широко от съвременните браузъри и се използва за извикване на API.

const promise = fetch(url, [options]) 

Извикването на извличане връща обещание с обект Response. Обещанието се отхвърля, ако има мрежова грешка и се разрешава, ако няма проблем при свързването със сървъра и сървърът отговори на код за състояние. Този код на състоянието може да бъде 200s, 400s или 500s.

Примерна заявка за 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? Регистрирайте се за бюлетина