Introducción
Axios es una biblioteca de JavaScript basada en Promesa que se utiliza para enviar solicitudes HTTP. Puedes pensarlo como una alternativa a JavaScript nativo fetch() función.
Utilizaremos funciones como Promesas, async/awaity otros patrones modernos de diseño de JavaScript en este tutorial. Si desea ponerse al día o actualizar su memoria, le interesará leer estos artículos antes de continuar:
- Este artículo utiliza la notación de flecha introducida en ES2015 para definir funciones. Puedes leer más sobre esto en Funciones de flecha en JavaScript .
- Axios es una biblioteca basada en Promesa. Si necesita aprender más sobre Promesas, puede leer nuestro Promesas en Node.js guía.
- Para mejorar nuestra experiencia con Promesas, usaremos Node.js
async/awaitsintaxis. Puedes leer nuestro Node.js Async aguarda en ES7 ¡Artículo para dominar esta característica!
En este tutorial, haremos GET, POST, PUTy DELETE solicitudes a una API REST utilizando Axios. Aprendamos un poco más sobre esta biblioteca.
¿Qué es axios?
Axios es una moderna biblioteca cliente HTTP basada en Promise. Esto significa que Axios se utiliza para enviar una solicitud HTTP y manejar sus respuestas, todo utilizando las promesas de JavaScript. Axios admite Node.js y JavaScript en el navegador.
Axios también es gratuito y de código abierto. Puedes visitar su Repositorio GitHub para ver su código y documentación.
Viene integrado con cierta seguridad web al proteger a los usuarios contra ataques como Falsificación de solicitudes entre sitios (CSRF).
Como resultado de sus características y facilidad de uso, se ha convertido en una opción popular para que los desarrolladores de JavaScript utilicen al hacer llamadas HTTP. Comencemos configurando Axios.
Configurar Axios
Primero creemos una nueva carpeta e inicialicemos NPM con la configuración predeterminada:
$ mkdir axios-tutorial
$ cd axios-tutorial
$ npm init -y
A continuación, podemos usar NPM para instalar la biblioteca:
$ npm i --save axios
Note: Si está utilizando TypeScript en su proyecto (por ejemplo, con una aplicación Angular), la biblioteca Axios viene con sus definiciones de tipos. ¡No tiene que dar un paso adicional para instalar tipos!
Si está en el navegador, también puede usar un CDN para importar el script.
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Este tutorial utiliza Node.js con CommonJS para cargar nuestras bibliotecas. CommonJS es un estándar para cargar módulos, en particular, especifica el require() palabra clave para hacerlo. Los ejemplos deberían funcionar independientemente de la plataforma sin ningún cambio.
Ahora que hemos configurado Axios en nuestro entorno de desarrollo, vamos directamente a hacer solicitudes HTTP.
Escribir solicitudes asincrónicas con ejes
En Node.js, las actividades de entrada y salida, como las solicitudes de red, se realizan de forma asincrónica. Como Axios usa Promesas para hacer solicitudes de red, las devoluciones de llamada no son una opción cuando se usa esta biblioteca. Interactuamos con Axios usando Promesas, o el async/await palabras clave que son una sintaxis alternativa para usar Promesas.
Importar ejes
Si está utilizando CommonJS, hay dos métodos en Node.js para importar la biblioteca.
Puede importar el módulo en su código así:
const axios = require('axios')
Sin embargo, muchos editores de IDE y código pueden ofrecer una mejor autocompletación al importar de esta manera:
const axios = require('axios').default;
Esto funciona mientras se usa CommonJS para importar módulos. Le recomendamos que use el segundo método como autocompletado y ver la documentación del código en su IDE puede facilitar el proceso de desarrollo.
Con la biblioteca importada, podemos comenzar a hacer solicitudes HTTP.
Envío de solicitudes GET
¡Enviemos nuestra primera solicitud con Axios! Será un GET solicitud, generalmente utilizada para recuperar datos.
Haremos una solicitud HTTP a una API externa que nos envíe una lista de publicaciones de blog. Al recibir los datos, registraremos su contenido en la consola. Si encontramos un error, también lo registraremos.
Veamos cómo hacer uno usando la sintaxis Promesa predeterminada. En un nuevo archivo llamado getRequestPromise.js, agregue el siguiente código:
const axios = require('axios').default; axios.get('https://jsonplaceholder.typicode.com/posts') .then(resp => { console.log(resp.data); }) .catch(err => { // Handle Error Here console.error(err); });
Hacer un GET solicitud, pasamos la URL del recurso como argumento en el axios.get() método.
Si ejecuta este código con node getRequestPromise.js, verías el siguiente resultado:
[ { userId: 1, id: 1, title: 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit', body: 'quia et suscipitnsuscipit recusandae consequuntur expedita et cumnreprehenderit molestiae ut ut quas totamnnostrum rerum est autem sunt rem eveniet architecto' }, { userId: 1, id: 2, title: 'qui est esse', body: 'est rerum tempore vitaensequi sint nihil reprehenderit dolor beatae ea dolores nequenfugiat blanditiis voluptate porro ve
l nihil molestiae ut reiciendisnqui aperiam non debitis possimus qui neque nisi nulla' },
...
Ahora veamos cómo podemos reescribir el mismo código usando esto async/await palabras clave En un nuevo archivo getRequestAsyncAwait.js, agregue el siguiente código:
const axios = require('axios'); const sendGetRequest = async () => { try { const resp = await axios.get('https://jsonplaceholder.typicode.com/posts'); console.log(resp.data); } catch (err) { // Handle Error Here console.error(err); }
}; sendGetRequest();
Para utilizar el async/await sintaxis, necesitamos envolver el axios.get() llamada de función dentro de un async función. Encapsulamos la llamada al método con un try...catch bloque para que podamos capturar cualquier error, similar al catch() método que utilizamos en la versión Promise. La variable que recibió los datos HTTP tuvo que usar el await palabra clave para garantizar que se recibieron los datos asincrónicos antes de continuar. De ahora en adelante, solo usaremos async/await sintaxis en nuestros ejemplos.
La ejecución de este código imprimirá el mismo resultado en la consola que el ejemplo original de Promise.
Una respuesta de Axios para una solicitud HTTP (la resp objeto en el ejemplo) contendrá la siguiente información sobre la respuesta HTTP:
data- El cuerpo de respuesta proporcionado por el servidor. Si la respuesta del servidor es un JSON, Axios analizará automáticamente los datos en un objeto JavaScript.status- El código de estado HTTP de la respuesta, p. Ej.200,400,404.statusText- El mensaje de estado HTTP de la respuesta del servidor, p. Ej.OK,Bad Request,Not Found.headers- Los encabezados HTTP que acompañan a la respuesta.config- La configuración que se proporcionó a la API de Axios para la solicitud.request- La solicitud nativa que generó la respuesta. En Node.js esto será unClientRequestobjeto. En el navegador, esto será unXMLHTTPRequestobjeto.
Ahora que hemos visto cómo hacer un GET solicitar con Axios, veamos cómo hacer un POST solicitud.
Envío de solicitudes POST
Enviamos POST solicita crear un nuevo recurso en una API REST. En este caso, haremos un POST solicite a Axios que haga una nueva publicación de blog para un usuario.
Crea un nuevo archivo llamado postRequest.js e ingrese el siguiente código:
const axios = require('axios').default; const newPost = { userId: 1, title: 'A new post', body: 'This is the body of the new post'
}; const sendPostRequest = async () => { try { const resp = await axios.post('https://jsonplaceholder.typicode.com/posts', newPost); console.log(resp.data); } catch (err) { // Handle Error Here console.error(err); }
}; sendPostRequest();
Para enviar un POST axios.post() primero debe proporcionar la URL y luego proporcionar los datos de la solicitud en el segundo argumento. En este caso, estamos enviando los datos en el newPost variable, que se enviará a nuestra API como JSON.
Ejecutando esto con node postRequest.js produce el siguiente resultado exitoso:
{ userId: 1, title: 'A new post', body: 'This is the body of the new post', id: 101 }
Pasemos a ver cómo podemos enviar PUT peticiones.
Envío de solicitudes PUT
PUT Las solicitudes se utilizan para reemplazar datos en un punto final. Puedes usar el axios.put() método para enviar un PUT solicitar de manera similar a como enviamos POST peticiones.
Para verlo en acción, creemos un PUT solicite que actualice las propiedades de la primera publicación del blog. Crea un nuevo archivo llamado putRequest.js con el siguiente código:
const axios = require('axios').default; const updatedPost = { id: 1, userId: 1, title: 'A new title', body: 'Update this post'
}; const sendPutRequest = async () => { try { const resp = await axios.put('https://jsonplaceholder.typicode.com/posts/1', updatedPost); console.log(resp.data); } catch (err) { // Handle Error Here console.error(err); }
}; sendPutRequest();
Como con POST, proporcionamos la URL y los datos que queremos cargar. Ejecutando esto con node putRequest.js Nos da:
{ id: 1, userId: 1, title: 'A new title', body: 'Update this post' }
Ahora que hemos cubierto dos formas de cargar datos, veamos cómo podemos eliminar datos.
Envío de solicitudes DELETE
Puedes enviar un HTTP DELETE solicitar utilizando el axios.delete() Método para eliminar datos de una API RESTful.
Eliminemos una publicación de blog enviando un DELETE solicitud con Axios. En un nuevo archivo llamado deleteRequest.js, introduzca la siguiente:
const axios = require('axios').default; const sendDeleteRequest = async () => { try { const resp = await axios.delete('https://jsonplaceholder.typicode.com/posts/1') console.log(resp.data); } catch (err) { // Handle Error Here console.error(err); }
}; sendDeleteRequest();
El proyecto axios.delete() La función solo necesita la URL del recurso que queremos eliminar. Ejecutando este programa con node putRequest.js muestra esto en la terminal:
{}
Esto significa que no se devolvieron datos, lo cual está bien cuando se elimina un recurso. Sin embargo, como Axios no arrojó ningún error, estamos bastante seguros de que se procesó correctamente.
Echemos un vistazo a una forma alternativa de enviar solicitudes Axios utilizando configuraciones,
Configurar solicitudes
Como alternativa a especificar la función para realizar la solicitud, podemos proporcionar un objeto JavaScript que configura cómo Axios envía una solicitud. Por ejemplo, si quisiera enviar un PUT solicitar sin usar axios.put(), podemos configurar Axios como:
const axios = require('axios').default; const sendRequest = async () => { try { const resp = await axios({ method: 'PUT', url: 'https://jsonplaceholder.typicode.com/posts/1', data: { id: 1, userId: 1, title: 'A new title', body: 'Update this post' } }); console.log(resp.data); } catch (err) { // Handle Error Here console.error(err); }
} sendRequest();
En este caso, usamos axios como una función directamente. Le pasamos una función de JavaScript que contiene el método HTTP que se utiliza en el method, el punto final de API en el url y cualquier dato en la solicitud en el data propiedad.
El resultado final es el mismo, por lo que puede utilizar esta forma de hacer solicitudes si le atrae más.
Ahora que tenemos un control sobre el envío de solicitudes, modifíquelas configurando encabezados personalizados.
Para ciertas API, una solicitud sin procesar debe tener datos adicionales en los encabezados para ser procesados. Un ejemplo común sería establecer encabezados que autentiquen la solicitud HTTP.
Si usamos JWT para autenticación y autorización, tendríamos que agregarlo a nuestras solicitudes para que el servidor API no lo rechace.
Veamos cómo podemos agregar encabezados personalizados a un axios.get() llamada al método:
const axios = require('axios').default; const sendGetRequest = async () => { try { const resp = await axios.get('https://jsonplaceholder.typicode.com/posts', { headers: { 'authorization': 'Bearer YOUR_JWT_TOKEN_HERE' } }); console.log(resp.data); } catch (err) { // Handle Error Here console.error(err); }
}; sendGetRequest();
Como puede ver en este ejemplo de código, podemos pasar la configuración con el headers propiedad para establecer encabezados personalizados para la solicitud. los headers La propiedad es un objeto JavaScript con claves y valores de cadena.
Puede agregar esta propiedad a los otros métodos Axios, como axios.post(), axios.put(), axios.delete(). headers la propiedad debe ser ingresada después de las data objeto en axios.post() y axios.put().
A continuación, veamos cómo podemos establecer un encabezado personalizado utilizando la configuración de la API Axios:
const axios = require('axios').default; axios({ method: 'GET', url: 'https://jsonplaceholder.typicode.com/posts', headers: { 'authorization': 'Bearer YOUR_JWT_TOKEN_HERE' }
}).then(resp => { console.log(resp.data);
}).catch(err => { // Handle Error Here console.error(err);
});
En este caso, los encabezados son solo otra propiedad del objeto JavaScript.
Conclusión
En este artículo, aprendió a crear solicitudes HTTP asincrónicas con Axios en Node.js y JavaScript del navegador. Hiciste solicitudes con métodos Axios: axios.get(), axios.post(), axios.put() y axios.delete(). También usó la API de Axios para enviar solicitudes HTTP configurando un objeto JavaScript con los detalles de la solicitud. Finalmente, agregó encabezados personalizados en sus solicitudes.
¡Esperamos que ahora comprenda bien cómo usar Axios para su próxima aplicación! ¿Qué es lo próximo que vas a construir?
El código fuente de este artículo está disponible en GitHub.
Fuente: https://stackabuse.com/making-asynchronous-http-requests-in-javascript-with-axios/
