Jednostavni HTTP zahtjevi u JavaScript-u pomoću Axiosa

Zanima vas učenje JavaScripta? Nabavite moju e-knjigu na jshandbook.com

Uvod

Axios je vrlo popularna JavaScript knjižnica koju možete koristiti za izvršavanje HTTP zahtjeva. Djeluje i na preglednicima i na Node.js platformama.

Is podržava sve moderne preglednike, uključujući IE8 i novije verzije.

Temelji se na obećanjima, a to nam omogućuje da napišemo async / await kod za vrlo lako izvršavanje XHR zahtjeva.

Korištenje Axiosa ima nekoliko prednosti u odnosu na izvorni Fetch API:

  • podržava starije preglednike (Fetchu treba polifil)
  • ima način da odustane od zahtjeva
  • ima način postavljanja vremenskog ograničenja odgovora
  • ima ugrađenu CSRF zaštitu
  • podržava napredak prijenosa
  • vrši automatsku transformaciju podataka JSON
  • radi u Node.js-u

Montaža

Axios se može instalirati pomoću npm:

npm install axios

ili pređa:

yarn add axios

ili ga jednostavno uključite na svoju stranicu pomoću unpkg.com:

API Axios

Možete pokrenuti HTTP zahtjev iz axiosobjekta:

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

ali radi praktičnosti obično ćete koristiti

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

(kao u jQueryju, vi biste koristili $.get()i $.post()umjesto $.ajax())

Axios nudi metode za sve HTTP glagole, koji su manje popularni, ali se i dalje koriste:

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

Također nudi metodu za dobivanje HTTP zaglavlja zahtjeva, odbacujući tijelo.

GET zahtjeve

Jedan od prikladnih načina korištenja Axiosa je korištenje moderne (ES2017) sintakse asinkro / čeka.

Ovaj primjer Node.js postavlja upit API-ju za pse kako bi dohvatio popis svih pasmina pasa koristeći ih axios.get()i on ih broji:

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

Ako ne želite koristiti async / await, možete koristiti sintaksu Promises:

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

Dodajte parametre GET zahtjevima

GET odgovor može sadržavati parametre u URL, ovako: //site.com/?foo=bar.

Pomoću Axiosa to možete učiniti jednostavnim korištenjem tog URL-a:

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

ili možete koristiti paramssvojstvo u opcijama:

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

POŠALJI zahtjevi

Izvršenje POST zahtjeva je poput izvođenja GET zahtjeva, ali umjesto toga axios.getkoristite axios.post:

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

Objekt koji sadrži POST parametre drugi je argument:

axios.post('//site.com/', { foo: 'bar' })
Zanima vas učenje JavaScripta? Nabavite moju e-knjigu na jshandbook.com