Enkle HTTP-anmodninger i JavaScript ved hjælp af Axios
Introduktion
Axios er et meget populært JavaScript-bibliotek, du kan bruge til at udføre HTTP-anmodninger. Det fungerer i både Browser- og Node.js-platforme.
Is understøtter alle moderne browsere, inklusive IE8 og nyere.
Det er løftebaseret, og dette giver os mulighed for at skrive async / afventer kode for at udføre XHR-anmodninger meget let.
Brug af Axios har en hel del fordele i forhold til den oprindelige Fetch API:
- understøtter ældre browsere (Fetch har brug for en polyfill)
- har en måde at afbryde en anmodning på
- har en måde at indstille en timeout på svaret på
- har indbygget CSRF-beskyttelse
- understøtter upload fremskridt
- udfører automatisk JSON-datatransformation
- fungerer i Node.js
Installation
Axios kan installeres ved hjælp af npm:
npm install axios
eller garn:
yarn add axios
eller blot inkludere det på din side ved hjælp af unpkg.com:
Axios API
Du kan starte en HTTP-anmodning fra axios
objektet:
axios({ url: '//dog.ceo/api/breeds/list/all', method: 'get', data: { foo: 'bar' }})
men for nemheds skyld bruger du generelt
axios.get()
axios.post()
(som i jQuery, ville du bruge $.get()
og i $.post()
stedet for $.ajax()
)
Axios tilbyder metoder til alle HTTP-verber, som er mindre populære, men stadig bruges:
axios.delete()
axios.put()
axios.patch()
axios.options()
Det tilbyder også en metode til at få HTTP-overskrifterne til en anmodning, kasserende kroppen.
FÅ anmodninger
En praktisk måde at bruge Axios på er at bruge den moderne (ES2017) asynkronisering / afventer syntaks.
Dette Node.js-eksempel forespørger Dog API for at hente en liste over alle hunderacer ved hjælp af axios.get()
, og det tæller dem:
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()
Hvis du ikke vil bruge asynkronisering / afventning, kan du bruge syntaksen 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()
Føj parametre til GET-anmodninger
En GET reaktion kan indeholde parametre i URL'en, som denne: //site.com/?foo=bar
.
Med Axios kan du udføre dette ved blot at bruge denne URL:
axios.get('//site.com/?foo=bar')
eller du kan bruge en params
ejendom i indstillingerne:
axios.get('//site.com/', { params: { foo: 'bar' }})
POST-anmodninger
At udføre en POST-anmodning er ligesom at lave en GET-anmodning, men i stedet for axios.get
bruger du axios.post
:
axios.post('//site.com/')
Et objekt, der indeholder POST-parametrene, er det andet argument:
axios.post('//site.com/', { foo: 'bar' })
Er du interesseret i at lære JavaScript? Hent min e-bog på jshandbook.com