Egyszerű HTTP kérések a JavaScript-ben az Axios segítségével

Szeretne tanulni JavaScriptet? Szerezd meg az e-könyvemet a jshandbook.com címen

Bevezetés

Az Axios egy nagyon népszerű JavaScript könyvtár, amelyet HTTP kérések végrehajtására használhat. A Böngésző és a Node.js platformon egyaránt működik.

Az Is támogatja az összes modern böngészőt, beleértve az IE8 és újabb verziókat is.

Ígéret-alapú, és ez lehetővé teszi számunkra, hogy aszinkron / várakódot írjunk az XHR kérések egyszerű végrehajtására.

Az Axios használatának számos előnye van a natív Fetch API-val szemben:

  • támogatja a régebbi böngészőket (a Fetchhez polifill kell)
  • módja van a kérelem megszakítására
  • módja van a válasz időkorlátjának beállítására
  • beépített CSRF védelemmel rendelkezik
  • támogatja a feltöltés folyamatát
  • automatikus JSON adatátalakítást hajt végre
  • a Node.js fájlban működik

Telepítés

Az Axios az npm használatával telepíthető:

npm install axios

vagy fonal:

yarn add axios

vagy egyszerűen vegye fel az oldalára az unpkg.com használatával:

Az Axios API

HTTP-kérést indíthat az axiosobjektumtól:

axios({ url: '//dog.ceo/api/breeds/list/all', method: 'get', data: { foo: 'bar' }})

de a kényelem érdekében általában használni fogja

  • axios.get()
  • axios.post()

(mint a jQuery, akkor használja $.get()és $.post()helyett $.ajax())

Az Axios az összes kevésbé népszerű, de mégis használt HTTP igéhez kínál módszereket:

  • axios.delete()
  • axios.put()
  • axios.patch()
  • axios.options()

Emellett egy módszert kínál a kérelem HTTP fejlécének megszerzésére, a test törlésével.

GET kérések

Az Axios használatának egyik kényelmes módja a modern (ES2017) async / wait szintaxis használata.

Ez a Node.js példa lekérdezi a Dog API-t, hogy lekérje az összes kutyafajta listáját axios.get(), és számolja őket:

const axios = require('axios')const getBreeds = async () => { try { return await axios.get('//dog.ceo/api/breeds/list/all') } catch (error) { console.error(error) }}const countBreeds = async () => { const breeds = await getBreeds() if (breeds.data.message) { console.log(`Got ${Object.entries(breeds.data.message).length} breeds`) }}countBreeds()

Ha nem akarja használni az async / várakozást, használhatja az Ígéretek szintaxist:

const axios = require('axios')const getBreeds = () => { try { return axios.get('//dog.ceo/api/breeds/list/all') } catch (error) { console.error(error) }}const countBreeds = async () => { const breeds = getBreeds() .then(response => { if (response.data.message) { console.log( `Got ${Object.entries(response.data.message).length} breeds` ) } }) .catch(error => { console.log(error) })}countBreeds()

Adjon hozzá paramétereket a GET kérésekhez

A GET válasz tartalmazhat paraméterek az URL, mint ez: //site.com/?foo=bar.

Az Axios segítségével ezt egyszerűen elvégezheti az URL használatával:

axios.get('//site.com/?foo=bar')

vagy használhat egy paramstulajdonságot a következő lehetőségekben:

axios.get('//site.com/', { params: { foo: 'bar' }})

POST kérések

A POST kérés végrehajtása ugyanolyan, mint egy GET kérés végrehajtása, de a következőket axios.gethasználja axios.post:

axios.post('//site.com/')

A POST paramétereket tartalmazó objektum a második argumentum:

axios.post('//site.com/', { foo: 'bar' })
Szeretne tanulni JavaScriptet? Szerezd meg az e-könyvemet a jshandbook.com címen