Einfache HTTP-Anfragen in JavaScript mit Axios

Möchten Sie JavaScript lernen? Holen Sie sich mein eBook bei jshandbook.com

Einführung

Axios ist eine sehr beliebte JavaScript-Bibliothek, mit der Sie HTTP-Anforderungen ausführen können. Es funktioniert sowohl auf Browser- als auch auf Node.js-Plattformen.

Is unterstützt alle modernen Browser, einschließlich IE8 und höher.

Es basiert auf Versprechungen und ermöglicht es uns, asynchronen / wartenden Code zu schreiben, um XHR-Anforderungen sehr einfach auszuführen.

Die Verwendung von Axios bietet gegenüber der nativen Fetch-API einige Vorteile:

  • unterstützt ältere Browser (Fetch benötigt eine Polyfüllung)
  • hat eine Möglichkeit, eine Anfrage abzubrechen
  • hat eine Möglichkeit, ein Antwortzeitlimit festzulegen
  • hat eingebauten CSRF-Schutz
  • unterstützt den Upload-Fortschritt
  • führt eine automatische JSON-Datentransformation durch
  • funktioniert in Node.js.

Installation

Axios kann mit npm installiert werden:

npm install axios

oder Garn:

yarn add axios

oder fügen Sie es einfach mit unpkg.com in Ihre Seite ein:

Die Axios-API

Sie können eine HTTP-Anforderung vom axiosObjekt aus starten :

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

aber der Einfachheit halber werden Sie im Allgemeinen verwenden

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

(wie in jQuery würden Sie $.get()und $.post()anstelle von verwenden $.ajax())

Axios bietet Methoden für alle HTTP-Verben an, die weniger beliebt sind, aber immer noch verwendet werden:

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

Es bietet auch eine Methode zum Abrufen der HTTP-Header einer Anforderung, wobei der Text verworfen wird.

GET-Anfragen

Eine bequeme Möglichkeit, Axios zu verwenden, ist die Verwendung der modernen (ES2017) Async / Warten-Syntax.

In diesem Node.js-Beispiel wird die Hunde-API abgefragt, um eine Liste aller Hunderassen abzurufen axios.get(), und es werden sie gezählt:

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

Wenn Sie async / await nicht verwenden möchten, können Sie die Promises-Syntax verwenden:

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ügen Sie GET-Anforderungen Parameter hinzu

Eine GET-Antwort kann folgende Parameter in der URL enthalten : //site.com/?foo=bar.

Mit Axios können Sie dies tun, indem Sie einfach diese URL verwenden:

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

oder Sie können eine paramsEigenschaft in den Optionen verwenden:

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

POST-Anfragen

Das Ausführen einer POST-Anforderung entspricht dem Ausführen einer GET-Anforderung. Stattdessen verwenden axios.getSie Folgendes axios.post:

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

Ein Objekt, das die POST-Parameter enthält, ist das zweite Argument:

axios.post('//site.com/', { foo: 'bar' })
Möchten Sie JavaScript lernen? Holen Sie sich mein eBook bei jshandbook.com