En React, la comunicación backend normalmente se logra mediante el protocolo HTTP. Si bien muchos desarrolladores están familiarizados con la interfaz de solicitud HTTP XML y la API Fetch para realizar solicitudes HTTP, existe otra poderosa biblioteca llamada Axios que simplifica aún más el proceso.
Tabla de contenidos
- Requisitos previos
- Introducción a Axios
- Pasos para crear una aplicación React
- Necesidad de Axios en React
- OBTENER solicitud con Axios
- Solicitud POST con Axios:
- Eliminar solicitud con Axios:
- Objetos de respuesta en Axios
- Objeto de error:
- Características de la biblioteca Axios
- Métodos taquigráficos en Axios
- Conclusión
Introducción a Axios:
Axios, que es una biblioteca popular, se utiliza principalmente para enviar solicitudes HTTP asincrónicas a puntos finales REST. Esta biblioteca es muy útil para realizar operaciones CRUD.
- Esta popular biblioteca se utiliza para comunicarse con el backend. Axios admite la API Promise, nativa de JS ES6.
- Usando Axios realizamos solicitudes API en nuestra aplicación. Una vez realizada la solicitud, obtenemos los datos en Return y luego usamos estos datos en nuestro proyecto.
- Esta biblioteca es muy popular entre los desarrolladores. Puedes consultar en GitHub y encontrarás 78.000 estrellas.
Antes de instalar Axios, la aplicación de su proyecto React debería estar lista para instalar esta biblioteca. Crear un Reaccionar aplicación siguiendo los pasos que se detallan a continuación...
Pasos para crear una aplicación React:
Paso 1: A continuación se muestra el comando para crear la aplicación React en su proyecto...
npx create-react-app myreactapp>
Paso 2: Ingrese al directorio creado en el primer paso.
cd myreactapp>
Paso 3: Instale la biblioteca Axios usando el comando que se proporciona a continuación...
npm i axios>
Estructura del proyecto:
iterando un mapa en java
Las dependencias actualizadas en paquete.json archivo.
'dependencies': { '@testing-library/jest-dom': '^5.17.0', '@testing-library/react': '^13.4.0', '@testing-library/user-event': '^13.5.0', 'axios': '^1.6.2', 'react': '^18.2.0', 'react-dom': '^18.2.0', 'react-scripts': '5.0.1', 'web-vitals': '^2.1.4' },> Ejemplo: Este fragmento de código utiliza axios para realizar una solicitud HTTP al servidor backend.
JavaScript
// Filename - App.js> import React from>'react'>;> import axios from>'axios'>;> class App extends React.Component {> >state = {> >newfiles:>null>,> >};> >handleFile(e) {> >// Getting the files from the input> >let newfiles = e.target.newfiles;> >this>.setState({ newfiles });> >}> >handleUpload(e) {> >let newfiles =>this>.state.newfiles;> >let formData =>new> FormData();> >// Adding files to the formdata> >formData.append(>'image'>, newfiles);> >formData.append(>'name'>,>'Name'>);> >axios({> >// Endpoint to send files> >url:>' http://localhost:8080/files '>,> >method:>'POST'>,> >headers: {> >// Add any auth token here> >authorization:>'your token comes here'>,> >},> >// Attaching the form data> >data: formData,> >})> >// Handle the response from backend here> >.then((res) =>{})> >// Catch errors if any> >.>catch>((err) =>{});> >}> >render() {> >return> (> >> >> > type='file' // To select multiple files multiple='multiple' onChange={(e) =>this.handleFile(e)} /> onClick={(e) => this.handleUpload(e)}> Enviar archivos); } } exportar la aplicación predeterminada;> |
>
>
Pasos para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.
npm start>
Producción: Abra el navegador y nuestro proyecto se muestra en la URL. http://localhost:3000/
El ejemplo anterior es sólo una pequeña descripción del código para mostrar cómo utilizar Axios en su proyecto. Analizaremos varios métodos como GET, POST y PUT en Axios en la siguiente sección.
Necesidad de Axios en React:
Como hemos comentado, Axios le permite comunicarse con las API en su proyecto React. Las mismas tareas también se pueden realizar utilizando AJAX, pero Axios le proporciona más funcionalidades y características que le ayudan a crear su aplicación rápidamente.
Axios es una biblioteca basada en promesas, por lo que es necesario implementar algunas solicitudes HTTP asincrónicas basadas en promesas. jQuery y AJAX también realizan el mismo trabajo, pero en el proyecto React React maneja todos y cada uno de ellos en su propio DOM virtual, por lo que no hay necesidad de usar jQuery en absoluto.
A continuación se muestra un ejemplo para recuperar los datos del cliente utilizando Axios...
JavaScript
const getCustomersData = () =>{> >axios> >.get(>' https://jsonplaceholder.typicode.com/customers '>)> >.then(data =>consola.log(datos.datos))> >.>catch>(error =>console.log(error));> };> getCustomersData();> |
>
25 de 100
>
Ahora pasemos al siguiente punto y comprendamos cómo se pueden realizar diferentes operaciones, como recuperar datos o consumirlos usando Axios (GET-POST-DELETE).
OBTENER solicitud con Axios:
Cree un componente MyBlog y conéctelo al ciclo de vida del componente DidMount. Importe los Axios en la parte superior y obtenga los datos con la solicitud Obtener.
js al hacer clic
JavaScript
// Filename - App.js> import React from>'react'>;> import axios from>'axios'>;> export>default> class MyList extends React.Component {> >state = {> >blogs: [],> >};> >componentDidMount() {> >axios> >.get(> >`https:>//jsonplaceholder.typicode.com/posts`> >)> >.then((response) =>{> >const posts = response.data;> >this>.setState({ posts });> >});> >}> >render() {> >return> (> >>> >{>this>.state.posts.map((post) =>{> >post.title;> >})}> >>>);> >}> }> |
>
>
Aquí usamos axios.get (URL) para obtener una promesa que devuelve un objeto de respuesta. La respuesta devuelta se asigna al objeto de la publicación. También podemos recuperar otra información como el código de estado, etc.
Solicitud POST con Axios:
Cree un nuevo componente AddPost para solicitudes de publicación. Esta solicitud agregará una publicación a la lista de publicaciones.
JavaScript
// Filename - App.js> import React from>'react'>;> import axios from>'axios'>;> export>default> class AddPost extends React.Component {> >state = {> >postTitle:>''>,> >};> >handleChange = (event) =>{> >this>.setState({ postTitle: event.target.value });> >};> >handleSubmit = (event) =>{> >event.preventDefault();> >const post = {> >postName:>this>.state.postName,> >};> >axios> >.post(> >`https:>//jsonplaceholder.typicode.com/posts`,> >{ post }> >)> >.then((res) =>{> >console.log(res);> >console.log(res.data);> >});> >};> >render() {> >return> (> >> >'{this.handleSubmit}'>Nombre de la publicación: type='text' name='name' onChange='{this.handleChange}' /> 'submit'>Add); } }> |
>
>
En el código anterior, realizamos una solicitud de publicación HTTP y agregamos una nueva publicación a la base de datos. El evento onChange activa el método handleChange() y actualiza la solicitud cuando la solicitud API devuelve los datos correctamente.
Eliminar solicitud con Axios:
Para enviar la solicitud de eliminación al servidor se utiliza axios.delete. Debe especificar dos parámetros al realizar esta solicitud de URL y configuración opcional.
axios.delete(url, { data: { foo: 'bar' }, headers: { 'Authorization': '******' } });> Al enviar la solicitud de eliminación, deberá configurar el cuerpo y los encabezados de la solicitud. Utilice config.data para este propósito. En la solicitud POST anterior, modifique el código como se indica a continuación...
JavaScript
handleSubmit = event =>{> >event.preventDefault();> >axios.>delete>(> >`https:>//jsonplaceholder.typicode.com/posts/${this.state.postName}`)> >.then(res =>{> >console.log(res);> >console.log(res.data);> >})> }> |
>
>
Objetos de respuesta en Axios:
Cuando envía una solicitud al servidor, recibe un objeto de respuesta del servidor con las propiedades que se indican a continuación...
comparar cadenas java
- datos: Recibe datos del servidor en forma de carga útil. Estos datos se devuelven en formato JSON y se analizan nuevamente en un objeto JavaScript.
- estado: Obtienes el código HTTP devuelto por el servidor.
- estadoTexto: Mensaje de estado HTTP devuelto por el servidor.
- encabezados: Todos los encabezados son devueltos por el servidor.
- configuración: configuración de solicitud original.
- pedido: objeto XMLHttpRequest real.
Objeto de error:
Obtendrá un objeto de error si habrá un problema con la solicitud. La promesa será rechazada con un objeto de error con las propiedades dadas.
- mensaje: Texto del mensaje de error.
- respuesta: Objeto de respuesta (si se recibe).
- pedido: Objeto XMLHttpRequest real (cuando se ejecuta en un navegador).
- configuración: Configuración de solicitud original.
Características de la biblioteca Axios
- Los datos JSON se transforman automáticamente.
- Transforma los datos de solicitud y respuesta.
- Útil para realizar solicitudes HTTP desde Node.js
- Realiza XMLHttpRequests desde el navegador.
- Proporcionar soporte del lado del cliente para proteger contra XSRF.
- Admite API de promesa.
- Posibilidad de cancelar la solicitud.
Métodos taquigráficos en Axios:
A continuación se muestran algunos métodos abreviados de Axios...
- axios.request(config)
- axios.head(url[, configuración])
- axios.get(url[, configuración])
- axios.post(url[, datos[, configuración]])
- axios.put(url[, datos[, configuración]])
- axios.delete(url[, configuración])
- axios.opciones (url [, configuración])
- axios.patch(url[, datos[, configuración]])
Conclusión
Este artículo explica todo sobre la biblioteca Axios. Hemos analizado algunas operaciones útiles, como recuperar datos, publicarlos, actualizarlos o eliminarlos en Axios. Una vez que comience a trabajar en React, deberá usar esta biblioteca para comunicarse con el servidor de la base de datos. Por eso es importante practicarlo y comprender cómo funcionan las cosas en Axios.