Cómo utilizar Axios con React

Introducción

Muchos proyectos en la web necesitan interactuar con una API REST en alguna etapa de su desarrollo. Axios es un cliente HTTP liviano basado en el $httpservicio dentro de Angular.js v1.x y es similar a la API Fetch nativa de JavaScript .

Axios se basa en promesas, lo que le brinda la posibilidad de aprovechar JavaScript asyncy awaitobtener un código asincrónico más legible.

También puede interceptar y cancelar solicitudes, y hay una protección incorporada del lado del cliente contra la falsificación de solicitudes entre sitios.

En este artículo, verá ejemplos de cómo usar Axios para acceder a la popular API JSON Placeholder dentro de una aplicación React.

Prerrequisitos

Para seguir este artículo, necesitarás lo siguiente:

• La versión 10.16.0 de Node.js está instalada en tu computadora. Para instalarla en macOS o Ubuntu 18.04, sigue los pasos que se indican en Cómo instalar Node.js y crear un entorno de desarrollo local en macOS o en la sección Instalación mediante un PPA de Cómo instalar Node.js en Ubuntu 18.04 .
• Un nuevo proyecto React configurado con Create React App siguiendo el tutorial Cómo configurar un proyecto React con Create React App .
• También será útil tener un conocimiento básico de JavaScript, que puede encontrar en la serie Cómo codificar en JavaScript , junto con un conocimiento básico de HTML y CSS.

Este tutorial fue verificado con Node.js v16.13.1, npm v8.1.4, reactv17.0.2 y axiosv0.24.0.

¿Necesita implementar un proyecto React y ponerlo en línea? Conozca la plataforma de aplicaciones DigitalOcean e implemente un proyecto React directamente desde GitHub en minutos.

Paso 1: Agregar Axios al proyecto

En esta sección, agregará Axios a un proyecto React que creó siguiendo el tutorial Cómo configurar un proyecto React con Create React App .

npx create-react-app react-axios-example

Para agregar Axios al proyecto, abra su terminal y cambie los directorios de su proyecto:

cd react-axios-example

Luego ejecute este comando para instalar Axios:

npm install axios@0.24.0

A continuación, deberá importar Axios en el archivo en el que desea usarlo.

Paso 2: Realizar una GETsolicitud

En este ejemplo, crea un nuevo componente e importa Axios en él para enviar una GETsolicitud.

Dentro de tu proyecto React, necesitarás crear un nuevo componente llamado PersonList.

Primero, crea un nuevo componentssubdirectorio en el srcdirectorio:

mkdir src/components

En este directorio, cree PersonList.jsy agregue el siguiente código al componente:

fuente/componentes/PersonList.js

import React from 'react';import axios from 'axios';export default class PersonList extends React.Component {  state = {    persons: []  }  componentDidMount() {    axios.get(`https://jsonplaceholder.typicode.com/users`)      .then(res = {        const persons = res.data;        this.setState({ persons });      })  }  render() {    return (      ul        {          this.state.persons            .map(person =              li key={person.id}{person.name}/li            )        }      /ul    )  }}

Primero, importas React y Axios para que ambos se puedan usar en el componente. Luego, te conectas al componentDidMountgancho de ciclo de vida y realizas una GETsolicitud.

Se utiliza axios.get(url)una URL desde un punto final de API para obtener una promesa que devuelve un objeto de respuesta. Dentro del objeto de respuesta, hay datos a los que luego se les asigna el valor de person.

También puede obtener otra información sobre la solicitud, como el código de estado en res.statuso más información dentro de res.request.

Añade este componente a tu app.js:

fuente/app.js

import PersonList from './components/PersonList.js';function App() {  return (    div ClassName="App"      PersonList/    /div  )}

Luego ejecuta tu aplicación:

npm start

Visualiza la aplicación en el navegador. Se te presentará una lista de 10 nombres.

Paso 3: Realizar una POSTsolicitud

En este paso, utilizará Axios con otro método de solicitud HTTP llamado POST.

Dentro de tu proyecto React, necesitarás crear un nuevo componente llamado PersonAdd.

Cree PersonAdd.jsy agregue el siguiente código para crear un formulario que permita la entrada del usuario y posteriormente POSTenvíe el contenido a una API:

fuente/componentes/PersonAdd.js

import React from 'react';import axios from 'axios';export default class PersonAdd extends React.Component {  state = {    name: ''  }  handleChange = event = {    this.setState({ name: event.target.value });  }  handleSubmit = event = {    event.preventDefault();    const user = {      name: this.state.name    };    axios.post(`https://jsonplaceholder.typicode.com/users`, { user })      .then(res = {        console.log(res);        console.log(res.data);      })  }  render() {    return (      div        form onSubmit={this.handleSubmit}          label            Person Name:            input type="text" name="name" onChange={this.handleChange} /          /label          button type="submit"Add/button        /form      /div    )  }}

Dentro de la handleSubmitfunción, evitas la acción predeterminada del formulario. Luego, actualizas la stateentrada user.

El uso POSTle proporciona el mismo objeto de respuesta con información que puede utilizar dentro de una thenllamada.

Para completar la POSTsolicitud, primero debe capturar la userentrada. Luego, debe agregar la entrada junto con la POSTsolicitud, lo que le proporcionará una respuesta. Luego, puede ingresar console.logla respuesta, que debería mostrar la userentrada en el formulario.

Añade este componente a tu app.js:

fuente/app.js

import PersonList from './components/PersonList';import PersonAdd from './components/PersonAdd';function App() {  return (    div ClassName="App"      PersonAdd/      PersonList/    /div  )}

Luego ejecuta tu aplicación:

npm start

Visualiza la aplicación en el navegador. Se te presentará un formulario para enviar nuevos usuarios. Consulta la consola después de enviar un nuevo usuario.

Paso 4: Realizar una DELETEsolicitud

En este ejemplo, verá cómo eliminar elementos de una API usando axios.deletey pasando una URL como parámetro.

Dentro de tu proyecto React, necesitarás crear un nuevo componente llamado PersonRemove.

Crea PersonRemove.jsy agrega el siguiente código para eliminar un usuario:

fuente/PersonRemove.js

import React from 'react';import axios from 'axios';export default class PersonRemove extends React.Component {  state = {    id: ''  }  handleChange = event = {    this.setState({ id: event.target.value });  }  handleSubmit = event = {    event.preventDefault();    axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)      .then(res = {        console.log(res);        console.log(res.data);      })  }  render() {    return (      div        form onSubmit={this.handleSubmit}          label            Person ID:            input type="number" name="id" onChange={this.handleChange} /          /label          button type="submit"Delete/button        /form      /div    )  }}

Nuevamente, el resobjeto le brinda información sobre la solicitud. Luego, puede console.logvolver a acceder a esa información después de enviar el formulario.

Añade este componente a tu app.js:

fuente/app.js

import PersonList from './components/PersonList';import PersonAdd from './components/PersonAdd';import PersonRemove from './components/PersonRemove';function App() {  return (    div ClassName="App"      PersonAdd/      PersonList/      PersonRemove/    /div  )}

Luego ejecuta tu aplicación:

npm start

Visualiza la aplicación en el navegador. Se te presentará un formulario para eliminar usuarios.

Paso 5: Uso de una instancia base en Axios

En este ejemplo, verá cómo puede configurar una instancia base en la que puede definir una URL y cualquier otro elemento de configuración.

Crea un archivo separado llamado api.js:

nano src/api.js

Exportar una nueva axiosinstancia con estos valores predeterminados:

fuente/api.js

import axios from 'axios';export default axios.create({  baseURL: `http://jsonplaceholder.typicode.com/`});

Una vez que se configura la instancia predeterminada, se puede utilizar dentro del PersonRemovecomponente. Importa la nueva instancia de la siguiente manera:

fuente/componentes/PersonRemove.js

import React from 'react';import API from '../api';export default class PersonRemove extends React.Component {  // ...  handleSubmit = event = {    event.preventDefault();    API.delete(`users/${this.state.id}`)      .then(res = {        console.log(res);        console.log(res.data);      })  }  // ...}

Dado que http://jsonplaceholder.typicode.com/ahora es la URL base, ya no es necesario escribir la URL completa cada vez que desee acceder a un punto final diferente en la API.

Paso 6 — Uso asyncyawait

En este ejemplo verás cómo puedes utilizar asyncy awaittrabajar con promesas.

La awaitpalabra clave resuelve el promisey devuelve el value. valueLuego se puede asignar a una variable.

fuente/componentes/PersonRemove.js

import React from 'react';import API from '../api';export default class PersonRemove extends React.Component {  // ...  handleSubmit = event = {    event.preventDefault();    const response = await API.delete(`users/${this.state.id}`);        console.log(response);    console.log(response.data);  }  // ...}

En este ejemplo de código, .then()se reemplaza , promisese resuelve y el valor se almacena dentro de la responsevariable.

Conclusión

En este tutorial, exploró varios ejemplos sobre cómo usar Axios dentro de una aplicación React para crear solicitudes HTTP y manejar respuestas.

Si desea obtener más información sobre React, consulte la serie Cómo codificar en React.js o consulte la página de temas de React para obtener más ejercicios y proyectos de programación.