Solicitudes HTTP usando Axios

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

Introducción a Axios

Axios es una biblioteca de JavaScript muy popular que puede utilizar para realizar solicitudes HTTP, que funciona tanto en el navegador como enNode.jsplataformas.

Es compatible con todos los navegadores modernos, incluido el soporte para IE8 y superior.

Está basado en promesas, y esto nos permite escribir código asincrónico / en espera para realizarXHRsolicita muy fácilmente.

El uso de Axios tiene bastantes ventajas sobre el nativoObtener API:

  • admite 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 automáticoJSONtransformación de datos
  • funciona en Node.js

Un video tutorial

Vea este video donde creo un servidor Express que ofrece un punto final POST, y le hago una solicitud de Axios para publicar datos:


Instalación

Axios se puede instalar para usarse en Node.js usandonpm:

npm install axios

En el navegador, puede incluirlo en su página usando unpkg.com:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Recordando que las llamadas a la API deben habilitarCORSpara acceder dentro del navegador, de lo contrario, la solicitud fallará.

La API de Axios

Puede iniciar una solicitud HTTP desde elaxiosobjeto:

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

Esto devuelve unpromesa. Puede usar async / await para resolver esa promesa en el objeto de respuesta:

;(async () => {
  const response = await axios({
    url: 'https://dog.ceo/api/breeds/list/all',
    method: 'get'
  })

console.log(response) })()

Por conveniencia, generalmente utilizará los métodos

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

Para los viejos, como en jQuery, usarías$.get()y$.post()en vez de$.ajax()

Ofrecen una sintaxis más sencilla. Por ejemplo:

;(async () => {
  const response = await axios.get('https://dog.ceo/api/breeds/list/all')
  console.log(response)
})()

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

y un método para obtener los encabezados HTTP de una solicitud, descartando el cuerpo,axios.head().

OBTENER solicitudes

Este ejemplo de Node.js consulta elAPI para perrospara recuperar una lista de todas las razas de perros, usandoaxios.get(), y los cuenta:

const axios = require('axios')

const getBreeds = async () => { try { return await axios.get(https://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 </span><span style="color:#e6db74">${</span>Object.<span style="color:#a6e22e">entries</span>(<span style="color:#a6e22e">breeds</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">message</span>).<span style="color:#a6e22e">length</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> breeds) } }

countBreeds()

Si no desea usar async / await, puede usar elPromesassintaxis:

const axios = require('axios')

const getBreeds = () => { try { return axios.get(https://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 </span><span style="color:#e6db74">${</span>Object.<span style="color:#a6e22e">entries</span>(<span style="color:#a6e22e">response</span>.<span style="color:#a6e22e">data</span>.<span style="color:#a6e22e">message</span>).<span style="color:#a6e22e">length</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> 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 este:https://site.com/?name=Flavio.

Con Axios puede realizar esto usando esa URL:

axios.get('https://site.com/?name=Flavio')

o puedes usar unparamspropiedad en las opciones:

axios.get('https://site.com/', {
  params: {
    name: 'Flavio'
  }
})

Solicitudes POST

Realizar una solicitud POST es como hacer una solicitud GET, pero en lugar deaxios.get, tu usasaxios.post:

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

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

axios.post('https://site.com/', {
  name: 'Flavio'
})

Descarga mi gratisManual de Node.js


Más tutoriales de nodos: