Una guía completa para trabajar con Axios

Axios es una biblioteca JavaScript que proporciona una API simple para enviar solicitudes HTTP desde código JavaScript del lado del cliente o código Node.js del lado del servidor. Axios se basa en la API Promise de JavaScript, que hace que el código asincrónico sea más fácil de mantener.

Primeros pasos con Axios

Puede utilizar Axios en su aplicación usando una red de entrega de contenido (CDN) o instalándolo en su proyecto.

Para usar Axios directamente en HTML, copie el enlace CDN a continuación e insértelo en la sección principal de su archivo HTML:

<guionorigen=" https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">guion>

Con este enfoque, puede utilizar Axios y su Métodos HTTP en el cuerpo de sus scripts HTML. Axios también puede consumir API REST en un marco como React.

Para usar Axios en un proyecto de Node.js, instálelo en el directorio de su proyecto usando el administrador de paquetes npm o yarn:

npm instalar axios
# o
hilo agregar axios

Tras la instalación, puede comenzar a utilizar Axios en su proyecto de JavaScript:

constante axios = requerir('axíos');

A lo largo de esta guía, trabajará con la libre JSONMarcador de posición API. Si bien esta API tiene un conjunto de recursos, solo utilizará el /comments y /posts puntos finales Los puntos finales son direcciones URL específicas a las que se puede acceder para recuperar o manipular datos.

Realización de solicitudes GET con Axios

Hay varias formas de realizar una solicitud GET con Axios. Sin embargo, la sintaxis generalmente depende de la preferencia.

Una de las formas de realizar una solicitud GET es utilizando el axios() método con un objeto que especifica el método de solicitud como conseguir y la URL a la que enviar la solicitud.

Por ejemplo:

constante axios = requerir("axíos");
axios({
 método: "conseguir",
 URL: " https://jsonplaceholder.typicode.com/comments",
})
 .entonces((resolución) => {
consola.log (res.datos);
 })
 .atrapar((errar) => {
consola.error (error);
 });

Este ejemplo crea una promesa utilizando el modelo de programación asíncrona encadenando el .entonces() y .atrapar() métodos. La promesa registra la respuesta a la consola cuando la solicitud es exitosa y registra el mensaje de error si la solicitud falla.

Axios también proporciona una forma más fácil de realizar solicitudes GET que eliminan la necesidad de pasar un objeto encadenando el .conseguir() método a la axios instancia.

Por ejemplo:

axios
 .conseguir(" https://jsonplaceholder.typicode.com/comments")
 .entonces((resolución) => {
consola.log (res.datos);
 })
 .atrapar((errar) => {
consola.error (error);
 });

Realización de solicitudes POST con Axios

Realizar una solicitud POST con Axios es similar a realizar una solicitud GET. Puede enviar datos a un servidor utilizando esta solicitud.

El fragmento de código a continuación es un ejemplo de cómo usar Axios' .correo() método:

axios
 .correo(" https://jsonplaceholder.typicode.com/comments", {
 nombre: "Jackson Smith",
 correo electrónico: "[email protected]",
 cuerpo: "Esto es una pieza de arte.",
 })
 .entonces((resolución) => {
consola.log (res.datos);
 })
 .atrapar((errar) => {
consola.error (error);
 });

El código realiza una solicitud POST a la API JSONPlaceholder para crear un nuevo comentario. El axios.post El método envía datos al /comments punto final

Los datos enviados en la solicitud son un objeto con un nombre, correo electrónico, y cuerpo propiedad. Si la solicitud tiene éxito, el entonces El método registra los datos de respuesta en la consola. Y si hay un error, el atrapar El método registra el error en la consola.

Realización de solicitudes PUT/PATCH con Axios

Puede utilizar la solicitud PUT o PATCH para actualizar un recurso existente en el servidor. Mientras que PUT reemplaza todo el recurso, PATCH solo actualiza los campos especificados.

Para realizar una solicitud PUT o PATCH con Axios, debe utilizar el .poner() o .parche() métodos respectivamente.

Aquí hay un ejemplo de cómo usar estos métodos para actualizar el correo electrónico propiedad del comentario con un id de 100:

constante axios = requerir("axíos");
axios
 .conseguir(" https://jsonplaceholder.typicode.com/comments/100")
 .entonces((resolución) => {
consola.log (res.data.email);
 })
 .atrapar((errar) => {
consola.error (error);
 });
// Producción:
// '[email protected]'
axios
 .parche(" https://jsonplaceholder.typicode.com/comments/100", {
 correo electrónico: "[email protected]",
 })
 .entonces((resolución) => {
consola.log (res.data.email);
 })
 .atrapar((errar) => {
consola.error (error);
 });
// Producción:
// '[email protected]',

Este programa primero realiza una solicitud GET al punto final " https://jsonplaceholder.typicode.com/comments/100". Luego registra el correo electrónico propiedad del comentario con un ID de 100 a la consola Estamos realizando una solicitud GET para que pueda ver qué cambió después de realizar la solicitud PATCH.

La segunda solicitud es una solicitud PATCH al mismo punto final. Este código actualiza el correo electrónico del comentario a [email protected].

Realización de solicitudes DELETE con Axios

Puedes usar el BORRAR solicitud para eliminar un recurso en el servidor.

Tome el siguiente ejemplo de cómo usar el .borrar() método para eliminar un recurso del servidor:

axios
 .borrar(" https://jsonplaceholder.typicode.com/comments/10")
 .entonces((resolución) => {
consola.log (res.datos);
 })
 .atrapar((errar) => {
consola.error (error);
 });
//Output:
// {}

Al registrar un objeto vacío en la consola, el código anterior muestra que eliminó el comentario con el ID de 10.

Realización de solicitudes simultáneas con Axios

Puede obtener datos de varios puntos finales a la vez con Axios. Para hacer esto, necesita usar el .todo() método. Este método acepta una matriz de solicitudes como su parámetro y se resuelve solo cuando recibe todas las respuestas.

En el siguiente ejemplo, el .todo() El método recupera datos de dos puntos finales simultáneamente:

axios
 .todo([
 axios.get(" https://jsonplaceholder.typicode.com/comments? _límite=2"),
 axios.get(" https://jsonplaceholder.typicode.com/posts? _límite=2"),
 ])
 .entonces(
 axios.spread((comentarios, publicaciones) => {
consola.log (comentarios.datos);
consola.log (publicaciones.datos);
 })
 )
 .atrapar((errar) =>consola.error (error));

El bloque de código anterior envía solicitudes simultáneamente y luego pasa las respuestas al .entonces() método. de Axios .desparramar() El método separa las respuestas y asigna cada respuesta a su variable.

Finalmente, la consola registra el datos propiedad de las dos respuestas: comentarios y publicaciones.

Interceptar solicitudes con Axios

A veces, es posible que deba interceptar una solicitud antes de que llegue al servidor. Puedes usar Axios' interceptores.solicitud.uso() método para interceptar solicitudes.

En el siguiente ejemplo, el método registra el tipo de solicitud en la consola para cada solicitud que se realiza:

axios.interceptors.request.use(
 (configuración) => {
consola.registro(`${config.método} solicitud hecha`);
devolver configuración;
 },
 (error) => {
devolverPromesa.rechazar (error);
 }
);
axios
 .conseguir(" https://jsonplaceholder.typicode.com/comments? _límite=2")
 .entonces((resolución) =>consola.log (res.datos))
 .atrapar((errar) =>consola.error (error));

El programa define un interceptor Axios usando el axios.interceptors.request.use método. Este método toma configuración y error objetos como argumentos. El configuración El objeto contiene información sobre la solicitud, incluido el método de solicitud (método.config) y la URL de solicitud (config.url).

La función interceptora devuelve el configuración objeto, permitiendo que la solicitud proceda con normalidad. Si hay un error, la función devuelve el rechazado Promesa objeto.

Finalmente, el programa hace una solicitud para probar el interceptor. La consola registrará el tipo de solicitud realizada, en este caso, una solicitud GET.

Hay más en Axios

Aprendió a realizar e interceptar solicitudes en sus proyectos con Axios. Muchas otras funciones, como la transformación de solicitudes y el uso de instancias de Axios, están disponibles para que las explore como desarrollador de JavaScript. Axios sigue siendo una opción preferida para realizar solicitudes HTTP en sus aplicaciones de JavaScript. Sin embargo, Fetch API es otra buena opción que puedes explorar.