Hogyan lehet használni a Fetch-et AJAX-hívások indításához JavaScript-ben

Ebben a sorozatban rendszeresen megosztok harapásméretű ismereteket a JavaScript-ről. Kitérünk a JS alapjaira, a böngészőkre, a DOM-ra, a rendszer tervezésére, a domain architektúrára és a keretrendszerekre.

A Fetch egy felület, amely lehetővé teszi AJAX-kérelem készítését JavaScript-ben. A modern böngészők széles körben alkalmazzák, és API meghívására használják.

const promise = fetch(url, [options]) 

A Fetch hívása ígéretet ad vissza egy Response objektummal. Az ígéretet elutasítják, ha hálózati hiba van, és akkor oldja fel, ha nincs probléma a szerverhez való csatlakozással, és a kiszolgáló válaszolt egy állapotkódra. Ez az állapotkód lehet 200s, 400s vagy 500s.

Minta FETCH kérelem -

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

A kérést alapértelmezés szerint GET-ként küldjük. A POST / PATCH / DELETE / PUT küldéséhez a method tulajdonságot használhatja a optionsparaméter részeként . Néhány más lehetséges érték optionseltarthat -

  • method: például GET, POST, PATCH
  • headers: Fejlécek objektum
  • mode: Így például cors, no-cors,same-origin
  • cache: gyorsítótár mód kérésre
  • credentials
  • body

Itt tekintheti meg az elérhető lehetőségek teljes listáját

Példa felhasználásra:

Ez a példa bemutatja a letöltés használatát az API meghívására és a git-tárolók listájának lekérésére.

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)) 

A POST kérés elküldéséhez az alábbiak szerint lehet a metódus paramétert használni az async / await szintaxissal.

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(); 

További JSBytes érdekel? Iratkozzon fel a hírlevélre