Solicitudes HTTP simples en JavaScript usando Axios

¿Interesado en aprender JavaScript? Obtenga mi libro electrónico en jshandbook.com

Introducción

Axios es una biblioteca de JavaScript muy popular que puede utilizar para realizar solicitudes HTTP. Funciona tanto en las plataformas Browser como en Node.js.

Es compatible con todos los navegadores modernos, incluidos IE8 y superiores.

Está basado en promesas y esto nos permite escribir código asincrónico / en espera para realizar solicitudes XHR con mucha facilidad.

El uso de Axios tiene bastantes ventajas sobre la API nativa Fetch:

  • es compatible con navegadores más antiguos (Fetch necesita un polyfill)
  • tiene una forma de cancelar una solicitud
  • tiene una forma de establecer un tiempo de espera de respuesta
  • tiene protección CSRF incorporada
  • admite el progreso de carga
  • realiza la transformación automática de datos JSON
  • funciona en Node.js

Instalación

Axios se puede instalar usando npm:

npm install axios

o hilo:

yarn add axios

o simplemente inclúyalo en su página usando unpkg.com:

La API de Axios

Puede iniciar una solicitud HTTP desde el axiosobjeto:

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

pero por conveniencia, generalmente usará

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

(como en jQuery, usarías $.get()y en $.post()lugar de $.ajax())

Axios ofrece métodos para todos los verbos HTTP, que son menos populares pero aún se usan:

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

También ofrece un método para obtener los encabezados HTTP de una solicitud, descartando el cuerpo.

OBTENER solicitudes

Una forma conveniente de usar Axios es usar la sintaxis async / await moderna (ES2017).

Este ejemplo de Node.js consulta la API de perros para recuperar una lista de todas las razas de perros axios.get(), y las cuenta:

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

Si no desea usar async / await, puede usar la sintaxis de 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()

Agregar parámetros a las solicitudes GET

Una respuesta GET puede contener parámetros en la URL, como esto: //site.com/?foo=bar.

Con Axios puede realizar esto simplemente usando esa URL:

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

o puede usar una paramspropiedad en las opciones:

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

Solicitudes POST

Realizar una solicitud POST es como hacer una solicitud GET, pero en lugar de axios.getusar axios.post:

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

Un objeto que contiene los parámetros POST es el segundo argumento:

axios.post('//site.com/', { foo: 'bar' })
¿Interesado en aprender JavaScript? Obtenga mi libro electrónico en jshandbook.com