Muchas aplicaciones web se enfrentan a la necesidad de interactuar con una API REST en algún momento de su desarrollo. Para React aplicaciones web basadas en, podemos usar Axios, un cliente HTTP ligero basado en el $http servicio dentro de Angular.js v1.x. Las características son similares a la nativa de JavaScript Fetch API.
Axios está basado en promesas, lo que nos permite incorporar async y await de JavaScript para un código síncrono más legible. También admite la interceptación y la cancelación de solicitudes. Además, cuenta con protección integrada en el lado del cliente contra la falsificación de solicitudes entre sitios.
En esta guía, mostraremos cómo usar Axios para acceder a la popular JSON Placeholder API en una aplicación React de demostración. Puede obtener más información sobre el formato JSON en JavaScript en este tutorial.
Requisitos previos
Para completar los pasos demostrados en esta guía, necesitará los siguientes componentes:
- Un servidor Ubuntu configurado correctamente. Aquí están los pasos para configurar su propio servidor Ubuntu en CloudSigma.
- La última versión de Node.js instalada. Consulte cómo instalar Node.js en Ubuntu.
- Un nuevo proyecto React usando Create React App. Será útil seguir y ejecutar primero esta guía sobre cómo configurar un proyecto React usando Create React App.
- Comprensión básica de HTML, CSS, y JavaScript.
Paso 1: Instalar Axios en el proyecto React
Axios está disponible directamente como un módulo npm. Consulte Axios en npm. Todo lo que necesitamos es establecer un proyecto React e instalar el paquete Axios.
El siguiente comando npx ejecutará create-react-app para crear un nuevo proyecto React. El nombre del proyecto se utilizará para crear un directorio dedicado para el proyecto. Aquí, llamamos al proyecto react-axios-demo. Ejecute el comando:
|
1 |
npx create-react-app react-axios-demo |
Cambie el directorio actual al directorio del proyecto recién creado:
|
1 |
cd react-axios-demo/ |
A continuación, invoque el comando npm install para instalar Axios. Si no se especifica ninguna versión, entonces npm descargará e instalará automáticamente la última versión de Axios:
|
1 |
npm install axios |
¡Nuestro proyecto ya está listo para usar Axios! Es hora de poner en acción sus características.
Paso 2: Construir una solicitud GET
En este paso, mostraremos la creación de un nuevo componente que utiliza Axios para enviar una solicitud GET.
Primero, cree un nuevo componente PersonList que mostrará una lista de nombres. Cree un directorio dedicado para almacenar el componente:
|
1 |
mkdir -pv src/components |
A continuación, cree el archivo PersonList.js :
|
1 |
touch PersonList.js |
Abra el archivo en un editor de texto. Estamos usando Visual Studio Code por comodidad y legibilidad. Introduzca el siguiente código JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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> ) } } |
Aquí:
-
Hemos importado React y Axios para poder usarlos a ambos en el componente.
-
Nos conectamos al gancho de ciclo de vida componentDidMount y enviamos una solicitud GET.
Puede usar axios.get(<url>) desde un punto final de la API para obtener una promesa (devuelve un objeto de respuesta). Dentro del objeto de respuesta, contiene los datos deseados. Luego lo asignamos al valor de person. También podemos recopilar información adicional sobre la solicitud, como el código de estado en res.status o más información de res.request.
A continuación, debemos agregar nuestro componente al archivo principal App.js. Agregue los siguientes códigos:
|
1 2 3 4 5 6 7 8 9 |
import PersonList from './components/PersonList.js'; function App() { return ( <div ClassName="App"> <PersonList/> </div> ) } |
La configuración está completa para este paso. Ahora puede ejecutar la aplicación y probarla usando su navegador favorito. Inicie el servidor de desarrollo:
|
1 |
npm start |
Como podemos ver, el resultado muestra una lista de nombres de personas en orden aleatorio:
Paso 3: Construir una solicitud POST
En esta sección, mostraremos el uso de Axios para realizar otro método de solicitud HTTP llamado POST. Para demostrar esto, nuestro objetivo es crear un nuevo componente en nuestro proyecto React llamado PersonAdd.
Cree el archivo PersonAdd.js:
|
1 |
touch src/components/PersonAdd.js |
Luego, abra el archivo en un editor de texto e ingrese el siguiente código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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> Nombre de la persona: <input type="text" name="name" onChange={this.handleChange} /> </label> <button type="submit">Agregar</button> </form> </div> ) } } |
En este código, tomamos la entrada del usuario y enviamos el contenido mediante POST a una API. Dentro de la función handleSubmit, evitamos la acción predeterminada del formulario y actualizamos el estado con la entrada del usuario. Al usar POST, este devuelve el mismo objeto de respuesta. Podemos usar el objeto dentro de una llamada then. Para completar la solicitud POST, capturamos la entrada del usuario y la agregamos junto con la solicitud POST. Esto nos da una respuesta. Registramos la respuesta usando console.log. Debería mostrar la entrada del usuario en el formulario.
A continuación, agregue el componente a App.js. El código completo debería verse así:
|
1 2 3 4 5 6 7 8 9 10 11 |
import PersonList from './components/PersonList'; import PersonAdd from './components/PersonAdd'; function App() { return ( <div ClassName="App"> <PersonAdd/> <PersonList/> </div> ) } |
Ahora, es momento de probar los cambios. Inicie el servidor de desarrollo:
|
1 |
npm start |
Verifique el cambio en el navegador web:
Paso 4: Construir una solicitud DELETE
En esta sección, demostraremos cómo eliminar elementos de una API con la ayuda de axios.delete y usando una URL como parámetro. Para demostrarlo, cree el componente PersonRemove. Cree el archivo PersonRemove.js en el directorio src/components :
|
1 |
touch src/components/PersonRemove.js |
Después de eso, abra el archivo en un editor de texto y agregue el siguiente código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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> ID de persona: <input type="number" name="id" onChange={this.handleChange} /> </label> <button type="submit">Eliminar</button> </form> </div> ) } } |
Aquí, el res objeto ofrece la información sobre la solicitud. Luego podemos usar console.log después de enviar el formulario.
A continuación, implemente el componente en App.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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> ) } |
Es hora de probar nuestro código de nuevo. Inicie el servidor:
|
1 |
npm start |
Debería encontrar un nuevo formulario que toma el nombre del usuario y lo elimina de la lista:
Paso 5: Aplicar la instancia base en Axios
Ahora, trabajaremos con la instancia base de Axios. Aquí, podemos definir una URL y otros elementos de configuración. Para implementarlo, cree un archivo separado api.js:
|
1 |
touch src/api.js |
Ábralo en un editor de texto e ingrese el siguiente código:
|
1 2 3 4 5 |
import axios from 'axios'; export default axios.create({ baseURL: `http://jsonplaceholder.typicode.com/` }); |
Una vez configurado, podemos usarlo dentro del PersonRemove componente. Así es como se vería el código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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); }) } } |
Aquí, http://jsonplaceholder.typicode.com/ se establece como la URL base. Ahora, ya no necesitamos usar la URL completa cada vez que accedemos a un endpoint de la API.
Paso 6: Implementar async y await
En esta sección, veremos cómo implementar async y await para trabajar con promesas. La palabra clave await resuelve la promise y devuelve el value. Podemos asignar este value a una variable para un uso más cómodo.
Así es como se vería el código actualizado de PersonRemove.js :
|
1 2 3 4 5 6 7 8 9 10 11 |
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); } } |
Aquí, hemos reemplazado .then(). Una vez que la promesa se resuelve, almacenamos el valor en la variable response.
Consideraciones finales
En este tutorial, hemos explorado varios ejemplos del uso de Axios para trabajar con la API REST. El código muestra la creación de solicitudes HTTP y el manejo de respuestas.
¿Te interesa aprender más sobre JavaScript? Echa un vistazo a nuestras otras guías para principiantes sobre diversos conceptos y características de JavaScript, por ejemplo, fecha y hora, manipulación de cadenas, clases, y objetos.
¡Feliz programación!
Comentarios
Aún no hay comentarios. Sea el primero.