Enkle HTTP-anmodninger i JavaScript ved hjælp af Axios

Er du interesseret i at lære JavaScript? Hent min e-bog på jshandbook.com

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 axiosobjektet:

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 paramsejendom 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.getbruger du axios.post:

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

Et objekt, der indeholder POST-parametrene, er det andet argument:

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