Απλά αιτήματα HTTP σε JavaScript χρησιμοποιώντας το Axios

Ενδιαφέρεστε να μάθετε JavaScript; Αποκτήστε το ebook μου στο jshandbook.com

Εισαγωγή

Το Axios είναι μια πολύ δημοφιλής βιβλιοθήκη JavaScript που μπορείτε να χρησιμοποιήσετε για την εκτέλεση αιτημάτων HTTP. Λειτουργεί σε πλατφόρμες Browser και Node.js.

Υποστηρίζει όλα τα σύγχρονα προγράμματα περιήγησης, συμπεριλαμβανομένων των IE8 και νεότερων.

Είναι βασισμένο σε υποσχέσεις και αυτό μας επιτρέπει να γράφουμε async / waiting για να εκτελέσουμε πολύ εύκολα τα αιτήματα XHR.

Η χρήση του Axios έχει αρκετά πλεονεκτήματα σε σχέση με το εγγενές Fetch API:

  • υποστηρίζει παλαιότερα προγράμματα περιήγησης (Η λήψη χρειάζεται polyfill)
  • έχει έναν τρόπο να ακυρώσει ένα αίτημα
  • έχει έναν τρόπο να ορίσετε ένα χρονικό όριο απόκρισης
  • έχει ενσωματωμένη προστασία CSRF
  • υποστηρίζει την πρόοδο μεταφόρτωσης
  • εκτελεί αυτόματο μετασχηματισμό δεδομένων JSON
  • λειτουργεί στο Node.js

Εγκατάσταση

Το Axios μπορεί να εγκατασταθεί χρησιμοποιώντας npm:

npm install axios

ή νήματα:

yarn add axios

ή απλώς συμπεριλάβετε το στη σελίδα σας χρησιμοποιώντας το unpkg.com:

Το API Axios

Μπορείτε να ξεκινήσετε ένα αίτημα HTTP από το axiosαντικείμενο:

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

αλλά για ευκολία, συνήθως θα το χρησιμοποιήσετε

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

(όπως στο jQuery, θα χρησιμοποιούσατε $.get()και $.post()αντί $.ajax())

Το Axios προσφέρει μεθόδους για όλα τα ρήματα HTTP, οι οποίες είναι λιγότερο δημοφιλείς αλλά εξακολουθούν να χρησιμοποιούνται:

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

Προσφέρει επίσης μια μέθοδο για να λάβετε τις κεφαλίδες HTTP ενός αιτήματος, απορρίπτοντας το σώμα.

Λάβετε αιτήματα

Ένας βολικός τρόπος για να χρησιμοποιήσετε το Axios είναι να χρησιμοποιήσετε τη σύγχρονη (ES2017) async / αναμονή σύνταξης.

Αυτό το παράδειγμα Node.js ερωτά το API σκυλιών για να ανακτήσει μια λίστα με όλες τις φυλές σκύλων, χρησιμοποιώντας axios.get()και τους μετράει:

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

Εάν δεν θέλετε να χρησιμοποιήσετε το async / waiting, μπορείτε να χρησιμοποιήσετε τη σύνταξη 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()

Προσθήκη παραμέτρων σε αιτήματα GET

Μια απάντηση GET μπορεί να περιέχει παραμέτρους στο URL, όπως αυτό: //site.com/?foo=bar.

Με το Axios μπορείτε να το εκτελέσετε χρησιμοποιώντας απλώς αυτό το URL:

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

ή μπορείτε να χρησιμοποιήσετε μια paramsιδιότητα στις επιλογές:

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

Αιτήματα POST

Η εκτέλεση ενός αιτήματος POST είναι σαν να κάνετε ένα αίτημα GET, αλλά αντί axios.getνα χρησιμοποιείτε axios.post:

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

Ένα αντικείμενο που περιέχει τις παραμέτρους POST είναι το δεύτερο όρισμα:

axios.post('//site.com/', { foo: 'bar' })
Ενδιαφέρεστε να μάθετε JavaScript; Αποκτήστε το ebook μου στο jshandbook.com