Cómo hacer solicitudes HTTP usando Axios en Node.js

Axios es un popular cliente HTTP basado en promesas para realizar solicitudes HTTP asíncronas en JavaScript. Funciona tanto en el navegador como en las aplicaciones Node.js. Axios proporciona una API única para tratar tanto con XHR en el navegador como con la interfaz HTTP de Node.

Al usar Axios, puede enviar fácilmente solicitudes HTTP a puntos finales REST para intercambiar datos. Funciona perfectamente en todos los navegadores modernos, incluido Internet Explorer 8 y superior. Axios también se puede usar en marcos de JavaScript avanzados como React, Vue.js, Angular, etc.

Esta es la lista completa de funciones compatibles con Axios:

  • Hacer XMLHttpRequests desde el navegador
  • Realizar solicitudes HTTP desde Node.js
  • Admite la API Promise
  • Interceptar solicitud y respuesta
  • Transformar datos de solicitudes y respuestas
  • Cancelar solicitudes
  • Transformaciones automáticas para datos JSON
  • Soporte del lado del cliente para proteger contra XSRF

En este tutorial, aprenderá cómo agregar Axios a su proyecto Node.js y enviar diferentes solicitudes HTTP. Para demostrar el uso de Axios en un escenario del mundo real, usaremos la API REST de Reqres para todos nuestros ejemplos.

Instalación

Hay múltiples opciones disponibles para agregar Axios a su proyecto. Dependiendo de su administrador de paquetes, puede usar npm:

$ npm install axios --save

o hilo:

$ yarn add axios

o enramada:

$ bower install axios

o agréguelo directamente a su página web usando CDN:

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

API básica de Axios

Si ya ha utilizado jQuery para realizar solicitudes asíncronas (el famoso $.get() y $.post() métodos), comprender la API de Axios es más fácil. Simplemente cree una nueva instancia de Axios y luego pase los datos relevantes a axios objeto para iniciar una solicitud HTTP:

const axios = require('axios');

// Send a GET request
axios({
  method: 'get',
  url: 'https://reqres.in/api/users',
  data: {
    name: 'Jane',
    country: 'Canada'
  }
});

Para mayor comodidad, Axios también proporciona alias para todos los métodos de solicitud HTTP admitidos:

  • axios.get(config) — Utilice este método para realizar solicitudes GET.
  • axios.post(url[, data[, config]]) — Se utiliza para realizar solicitudes POST.
  • axios.put(url[, data[, config]]) — Un alias para realizar solicitudes PUT.
  • axios.patch(url[, data[, config]]) — Use este método para enviar solicitudes PATCH.
  • axios.delete(url[, config]) — Como sugerencia de nombre, se utiliza para realizar solicitudes de ELIMINACIÓN.
  • axios.options(url[, config]) — ¿Quieres obtener opciones de CORS? Solo usa este método.
  • axios.head(url[, config]) — Obtener encabezados HTTP utilizando este método de alias.

Solicitud OBTENER

A continuación, el ejemplo de Node.js llama al servicio web REST para recuperar una lista de usuarios usando el axios.get() y luego imprímalos. Estamos usando la sintaxis async/await que es parte de ECMAScript 2017:

const axios = require('axios');

const listUsers = async () => {
    try {
        const res = await axios.get('https://reqres.in/api/users');
        console.log(res.data.data);
    } catch (err) {
        console.error(err);
    }
};

listUsers();

Si no quiere usar async/await o quiere usar Axios en navegadores más antiguos, puede usar promesas para comunicarse con la API REST:

const axios = require('axios');

axios.get('https://reqres.in/api/users')
    .then(res => {
        console.log(res.data.data);
    })
    .catch(err => {
        console.log(err);
    });

Solicitud GET con parámetros

Una solicitud GET puede contener parámetros de consulta en la URL. Con Axios, puede agregar parámetros a la URL como se muestra a continuación:

axios.get('https://www.google.com/search?q=axios')

o usa params propiedad en opciones:

axios.get('https://www.google.com/search', {
    params: {
        q: 'axios'
    }
})

Solicitud POST

Se utiliza una solicitud POST para crear un nuevo recurso. Axios proporciona axios.post() método para realizar una solicitud de publicación HTTP:

const axios = require('axios');

const createUser = async () => {
    try {
        const res = await axios.post('https://reqres.in/api/users', {
            name: 'Atta',
            job: 'Freelance Developer'
        });
        console.log(res.data);
    } catch (err) {
        console.error(err);
    }
};

createUser();

Solicitud POST con application/x-www-form-urlencoded

De forma predeterminada, Axios transforma el objeto de datos de solicitud en una cadena JSON. Para enviar datos en application/x-www-form-urlencoded en su lugar, puede usar la biblioteca qs o el módulo de cadena de consulta para codificar datos.

Usemos qs biblioteca ya que tiene mejor soporte para objetos anidados. Primero, agrega el qs biblioteca a su proyecto:

$ npm install qs --save

Ahora puedes usarlo de la siguiente manera:

const axios = require('axios');
const qs = require('qs');

const createUser = async () => {
    try {
        // set the url
        const url = 'https://reqres.in/api/users';

        // request data object
        const data = {
            name: 'John Doe',
            job: 'Blogger'
        };

        // set the headers
        const config = {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        };

        const res = await axios.post(url, qs.stringify(data), config);
        console.log(res.data);
    } catch (err) {
        console.error(err);
    }
};

createUser();

Solicitud PUT

Usando axios.put() función, podemos actualizar el objeto de usuario como a continuación:

const axios = require('axios');

const updateUser = async () => {
    try {
        const res = await axios.put('https://reqres.in/api/users/2', {
            name: 'Atta Shah',
            job: 'MEAN Stack Developer'
        });
        console.log(res.data);
    } catch (err) {
        console.error(err);
    }
};

updateUser();

Solicitud de ELIMINACIÓN

Si desea eliminar un objeto del servidor usando REST API con Axios, use axios.delete() método:

const axios = require('axios');

const deleteUser = async () => {
    try {
        const res = await axios.delete('https://reqres.in/api/users/2');
        console.log(res.status);
    } catch (err) {
        console.error(err);
    }
};

deleteUser();

Solicitud HEAD

Una solicitud HEAD HTTP es solo una solicitud GET sin el cuerpo de la respuesta. Puedes usar el axios.head() método para enviar una solicitud HEAD:

const axios = require('axios');

const retrieveHeaders = async () => {
    try {
        const res = await axios.head('https://attacomsian.com');

        console.log(`Status: ${res.status}`);
        console.log(`Content Type: ${res.headers['content-type']}`);
        console.log(`Server: ${res.headers.server}`);
        console.log(`Date: ${res.headers.date}`);
    } catch (err) {
        console.error(err);
    }
};

retrieveHeaders();

Aquí está el resultado del ejemplo anterior. Registra el código de estado de respuesta, Content-Type , nombre del servidor y encabezados de fecha:

Status: 200
Content Type: text/html;charset=UTF-8
Server: nginx/1.14.0 (Ubuntu)
Date: Fri, 23 Aug 2019 11:53:30 GMT

Múltiples solicitudes simultáneas

Otro beneficio de usar Axios es que puede ejecutar varias solicitudes HTTP en paralelo. Todo lo que necesita hacer es pasar varias URL como una matriz a axios.all() método. Cuando finalicen todas las solicitudes, recibirá una matriz que contiene los objetos de respuesta en el mismo orden en que se enviaron:

const axios = require('axios');

const loadUsers = async () => {
    try {
        const [res1, res2] = await axios.all([
            axios.get('https://reqres.in/api/users/1'),
            axios.get('https://reqres.in/api/users/2')
        ]);
        console.log(res1.data);
        console.log(res2.data);
    } catch (err) {
        console.error(err);
    }
};

loadUsers();

Alternativamente, puede usar axios.spread() para distribuir la matriz en varios argumentos:

const axios = require('axios');

axios.all([
    axios.get('https://reqres.in/api/users/1'),
    axios.get('https://reqres.in/api/users/2')

]).then(axios.spread((res1, res2) => {
    console.log(res1.data);
    console.log(res2.data);
}));

Gestión de errores

Dado que Axios es una biblioteca basada en promesas, el manejo de errores es simple. Podemos usar el catch() método de la promesa de interceptar cualquier error que se arroje durante la ejecución de la solicitud:

const axios = require('axios');

const unknown = async () => {
    try {
        const res = await axios.get('https://example.com/unkown');
        console.log(res.data);
    } catch (err) {
        if (err.response) {
            // the request went through and a response was returned
            // status code in 3xx / 4xx / 5xx range
            console.log(err.response.data);
            console.log(err.response.status);
            console.log(err.response.headers);
        } else if (err.request) {
            // request was made but server returned no response
            console.log(err.request);
        } else {
            // something went wrong in setting up the request
            console.error('Error:', err.message);
        }
    }
};

unknown();

Encabezados de solicitud

Para enviar encabezados de solicitud personalizados, pase un objeto que contenga los encabezados como último argumento:

const axios = require('axios');

const createUser = async () => {
    try {
        // request data object
        const data = {
            name: 'Atta',
            job: 'Freelance Developer'
        };

        // request config that includes `headers`
        const config = {
            headers: {
                'Content-Type': 'application/json',
                'User-Agent': 'Axios',
                'X-Custom-Source': 'Axios Tutorial',
            }
        };

        const res = await axios.post('https://reqres.in/api/users', data, config);
        console.log(res.data);
    } catch (err) {
        console.error(err);
    }
};

createUser();

Solicitar configuración

Las siguientes son las opciones de configuración disponibles para el envío de solicitudes. Solo el url es requerido. Si no hay method proporcionada, la solicitud se establecerá de forma predeterminada en GET:

{
    // The URL to the request
    url: '/users'
    
    // HTTP method like GET, POST, PUT, DELETE, HEAD
    method: 'GET',
    
    // optional base url to prepended to `url` 
    baseURL: 'https://example.com/api',

    // HTTP request headers
    headers: {
        'Content-Type': 'application/json'
    },

    // query string parameters
    params: {
        id: 420
    },    

    // request body data object
    data: {
        name: 'Atta'
    },

    // request timeout (in milliseconds)
    // default `0` (no timeout)
    timeout: 10000, 

    // should credentials go with CORS request? 
    // default `false`
    withCredentials: false, 

    // http basic authentication 
    auth: {
        username: 'attacomsian',
        password: 'top$secret'
    },
    
    // the type of response expected
    // options are 'arraybuffer', 'document', 'json', 'text', 'stream'
    // in browser: `blob` is also available
    // default `json`
    responseType: 'json',

    // define the max. size of the http response content in bytes
    maxContentLength: 2000,

    // defines the max. number of redirects to follow
    // if set to 0, no redirects will be followed.
    // default `5`
    maxRedirects: 5,

    // there are more otpions omitted from this list
    // for the sake of brevity
}

Objeto de respuesta

Cuando enviamos una solicitud HTTP a un servidor, devuelve una respuesta. El objeto de respuesta, devuelto por axios , contiene la siguiente información:

{
  data: {}, // response that was provided by the server
  status: 200, //the HTTP status code from the server response
  statusText: 'OK', //the HTTP status message from the server response
  headers: {}, //the headers sent by the server (names are lowercased)
  config: {}, //the config that was provided to `axios` for the request
  request: {} //the request object that generated this response
}

Los datos de respuesta se convierten automáticamente en un objeto JSON. así que no hay necesidad de analizarlo.

Resumen

Axios es una biblioteca de cliente HTTP basada en Promise para el navegador y Node.js. Se puede usar junto con marcos front-end más avanzados como React o Vue.js, así como en su aplicación de back-end Node.js.

  • Axios proporciona métodos de solicitud HTTP para todos los verbos HTTP, p. axios.get() , axios.post() , axios.put() etc.
  • Axios es compatible tanto con async/await como con promesas.
  • Axios transforma automáticamente la respuesta del servidor en un objeto JSON. Entonces no hay necesidad de usar JSON.parse() .
  • Axios proporciona axios.all() función para enviar múltiples solicitudes simultáneamente.

Para obtener más opciones de configuración, consulte los documentos de Axios en GitHub. Si desea usar Axios en el navegador, consulte Cómo usar Axios en la guía de JavaScript estándar.