Introducción
Es uno de los clientes de solicitudes http basados en solicitudes más populares y disponibles, y se utiliza en todas partes, ya sea en JavaScript o en Node js.
Aoxis se basa en promesas, por lo tanto, con cada solicitud, obtendremos una respuesta del objeto de la solicitud.
Las solicitudes se pueden interceptar y cancelar, y existe una protección incorporada contra la suplantación de identidad entre sitios en el lado del cliente.
En esta publicación verá cómo funcionan las solicitudes de Axios en React, usando ejemplos puede probar las solicitudes en su propio servidor.
Qué puede hacer la biblioteca
- Uso de consultas XML
- Uso de solicitudes http desde node.js
- Apoya la promesa API. Es mucho más fácil trabajar con las promesas porque recibimos el mensaje de todos modos
- Intercepta solicitudes y respuestas.
- Cancela solicitudes si lo necesitas
- Convierte automáticamente a JSON, ayuda a evitar perder tiempo compilando
- Admite protección del lado del cliente contra XSFR
Lo que se requiere
- Tu servidor tiene instalada una versión de Node.js superior a la 10.17.xx
- Su proyecto React preconstruido
- Su proyecto tiene instalada la biblioteca axios
Agregar Axios a su proyecto
Crea o ve a tu proyecto.
npx create-react-app your-projectLa forma más popular es instalarlo usando el administrador de paquetes npm.
npm install axiosImporte Aoxis a su proyecto donde quiera usarlo.
Creación de una solicitud POST
Deberá crear un nuevo componente UserAdd.js en su proyecto.
Ingrese el código para la solicitud de publicación en su archivo UserAdd.js que permitirá al usuario ingresar datos y enviar el API.
nano /mnt/c/Project/UserAdd.jsIntente ejecutar una solicitud POST usando el ejemplo y agregará al usuario.
const axios = require('axios');
axios
.post('https://myfakeapi.com/api/users/', {
firstName: 'Boris',
lastName: 'Moore'
}) // Using a post request, specifying the user
.then((response) => { // Data retrieval and processing
console.log(response.data);})
.catch((error) => { // If the query fails, an error will be displayed on the terminal.
console.error(error);});Verifique que el código funcione, lo que resulta en una promesa del servidor.
Crear una solicitud GET
Se requiere crear un nuevo componente bajo cualquier nombre, en nuestro caso usaremos el nombre CarList. Este componente debe colocarse en el directorio /mnt/c/Proyecto/. Este subdirectorio no estará en el mnt directorio inicialmente, por lo que también debe crearse.
mkdir /mnt/c/Project/Vaya a nuestro documento CarList recién creado utilizando cualquier editor de texto de su elección.
nano /mnt/c/Project/CarListIntente realizar una consulta Get usando el ejemplo y obtendrá una lista de autos Mitsubishi.
const axios = require('axios');
axios.get('https://myfakeapi.com/api/cars/name/Mitsubishi') //Returning pledges using a get-query
.then((response) => { // Data retrieval and processing
console.log(response.data);})
.catch((error) => { // If the query fails, an error will be displayed on the terminal.
console.error(error);});Como resultado, obtenemos una lista de datos del servidor gracias a las promesas.
Creación de una solicitud de eliminación
Deberá crear un nuevo componente PostRemove.js en su proyecto.
nano /mnt/c/Project/PostRemove.jsIntente realizar una consulta DELETE usando el ejemplo, eliminará la publicación.
componentDidMount() {
axios.delete(`https://reqres.in/api/posts/1`)
.then(() => this.setState({ status: 'Delete successful' }));
}Usando una instancia base en Axios
Este ejemplo requiere que cree un nuevo componente api.js.
nano /mnt/c/Project/myapi.jsAl crear este componente, especificamos un enlace estándar para que nuestro servidor reciba y envíe solicitudes.
import axios from 'axios';
export default axios.create({
baseURL: `http://yourapiurl.com/`
});El componente CarList.js se utilizará para las pruebas.
import React from 'react';
import axios from 'axios';
import Api from '/mnt/c/Project/api';
export default class CarList extends React.Component {
\\ . . .
componentDidMount() {
Api.get(`curl --location --request GET 'api/cars/name/Mitsubishi'`)
.then(res => {
const cars = res.data;
this.setState({ cars });
})}\\Después de crear un componente API, no es necesario especificar constantemente un enlace al servidor para recibir y enviar solicitudes. Solo es necesario cambiar la ruta a la solicitud deseada en el componente deseado.
Usando asíncrono y espera
El componente CarList.js se utilizará para las pruebas.
La palabra clave await permite la comunicación y envía el resultado como respuesta. El valor se puede asignar a una variable.
import API from '/mnt/c/Project/api';
export default class CarList extends React.Component {
componentDidMount() {
const response = await Api.get(`curl --location --request GET 'api/cars/name/Mitsubishi'`)
console.log(response);
console.log(response.data);})}En el ejemplo, sustituimos .then() en su lugar, los datos recibidos se mostrarán en la consola. La promesa se cumplirá y el valor se almacenará dentro de la variable de la respuesta recibida.
cheque
Antes de comprobar las consultas, verifique si tiene las consultas especificadas en el componente del programa.
En nuestras instrucciones, editaremos el componente yourapp.js.
import CarList from './components/CarList.js';
import PostRemove from './components/PostRemove.js';
import UserAdd. from './components/UserAdd.js';
function App() {
return (
<div ClassName="App">
<CarList/>
<UserAdd/>
<PostRemove/>
</div>)}Manejo de errores de consulta
Uno de los aspectos importantes del manejo de los datos que recibimos del servidor es que solo podemos recuperarlos si no hay errores al ejecutar la solicitud. Para mostrar errores, puede utilizar la función catch.
catch (error) { // error handling and displaying in the console
console.log("error get", error);}Si obtiene un error al ejecutar la consulta, esta función imprimirá el error en la consola.
Conclusión
Los aspectos positivos de la biblioteca Axios es su capacidad de convertir automáticamente a JSON, no necesitamos hacer ninguna manipulación extra para convertir un objeto a JSON porque lo obtendremos en la respuesta. Pasando parámetros a la consulta, cuando ejecutamos un método podemos pasar ciertos parámetros a nuestra consulta.
En esta publicación, hemos deconstruido las consultas de la biblioteca axios, cómo funcionan junto con React.
