Yksinkertaiset HTTP-pyynnöt JavaScript-muodossa Axiosia käyttämällä

Kiinnostaako oppia JavaScript? Lataa e-kirjani osoitteessa jshandbook.com

Johdanto

Axios on erittäin suosittu JavaScript-kirjasto, jota voit käyttää HTTP-pyyntöjen suorittamiseen. Se toimii sekä selain- että Node.js-alustoilla.

Is tukee kaikkia moderneja selaimia, mukaan lukien IE8 ja uudemmat.

Se on lupauspohjainen, ja sen avulla voimme kirjoittaa asynkronointi / odottaa -koodin XHR-pyyntöjen suorittamiseksi helposti.

Axiosin käyttämisellä on melko paljon etuja natiiviin Fetch-sovellusliittymään verrattuna:

  • tukee vanhempia selaimia (Fetch tarvitsee polyfill-täytön)
  • on tapa keskeyttää pyyntö
  • on tapa asettaa vasteaika
  • on sisäänrakennettu CSRF-suojaus
  • tukee lataamisen edistymistä
  • suorittaa automaattisen JSON-tiedonmuunnoksen
  • toimii Node.js-tiedostossa

Asennus

Axios voidaan asentaa npm: llä:

npm install axios

tai lanka:

yarn add axios

tai yksinkertaisesti sisällytä se sivullesi osoitteella unpkg.com:

Axios-sovellusliittymä

Voit aloittaa HTTP-pyynnön axiosobjektista:

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

mutta mukavuuden vuoksi käytät yleensä

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

(kuten jQueryssä, käyttäisit $.get()ja $.post()sen sijaan $.ajax())

Axios tarjoaa menetelmiä kaikille HTTP-verbeille, jotka ovat vähemmän suosittuja mutta silti käytettyjä:

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

Se tarjoaa myös menetelmän pyynnön HTTP-otsikoiden saamiseksi hylkäämällä runko.

GET-pyynnöt

Yksi kätevä tapa käyttää Axiosia on käyttää modernia (ES2017) asynkronointi / odotus -syntaksia.

Tämä Node.js-esimerkki kysyy Koiran sovellusliittymältä hakemaan luettelon kaikista koiraroduista käyttäen axios.get()ja laskee ne:

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

Jos et halua käyttää async / await -ohjelmaa, voit käyttää Promises-syntaksia:

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

Lisää parametreja GET-pyyntöihin

GET vastaus voi sisältää URL-osoitteen parametrit, kuten tämä: //site.com/?foo=bar.

Axiosilla voit suorittaa tämän yksinkertaisesti käyttämällä kyseistä URL-osoitetta:

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

tai voit käyttää paramsominaisuutta vaihtoehdoissa:

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

POST-pyynnöt

POST-pyynnön suorittaminen on kuin GET-pyynnön tekeminen, mutta sen sijaan axios.getkäytät axios.post:

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

POST-parametrit sisältävä objekti on toinen argumentti:

axios.post('//site.com/', { foo: 'bar' })
Kiinnostaako oppia JavaScript? Lataa e-kirjani osoitteessa jshandbook.com