Axios es un cliente HTTP basado en una promesa que también soporta el navegador y el node.js.
A continuación se presentan las pocas características de la biblioteca de Axios.
- Se utiliza para hacer XMLHttpRequests desde el navegador.
- Hace peticiones HTTP desde la plataforma node.js.
- Intercepta la solicitud y la respuesta.
- Transforma automáticamente los datos específicos de JSON.
- Puede cancelar las solicitudes en cualquier momento.
- Soporta la completa API basada en la promesa.
- Transforma los datos de solicitud y respuesta.
Como podemos ver, muchas características están soportadas; por eso el Axios es una de las bibliotecas más utilizadas en el mercado.
Instalemos la biblioteca Axios en la aplicación existente usando el siguiente comando.
1npm instalar axios
powerhell
Después de ejecutar el comando anterior, podremos usar la biblioteca Axios en la aplicación React existente.
Pero si no queremos usar el paquete npm, también podemos importar el script en la aplicación existente de esta manera.
1<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
javascript
La sintaxis básica del Axios se verá así.
12345678axios.get("API_URL").then(response={{/// manipular la respuesta aquí}).catch(function(error){/// manipular la respuesta de error aquí});jsx
Como pueden ver en la sintaxis, debemos pasar la URL de la API en consecuencia para que pueda acceder al punto final remoto para obtener los datos del servidor.
Después de obtener la respuesta apropiada del servidor, debemos manipular la respuesta del componente para poder utilizar los datos de la respuesta.
Vamos a saltar directamente a un ejemplo que muestra cómo utilizar Axios en nuestra aplicación React utilizando una URL de punto final ficticia para obtener datos ficticios para renderizar.
1234567asyncgetTodos(){/// Simple onelet todos =await axios.get("https://jsonplaceholder.typicode.com/todos?_page=1&_limit=10");console.log(todos.data);}jsx
En este ejemplo, hemos utilizado el paquete Axios y la llamada GET HTTP, con la URL proporcionada como argumento.
¿Pero qué pasa si obtenemos la respuesta del servidor? No tenemos una sección en el ejemplo anterior que muestre cómo usar la respuesta del servidor, así que la solución se da a continuación junto con la sección de respuesta.
12345678axios.get("API_URL").then(response= >{this.setState({ todos: response.data});}).catch(function(error){console.log(error);});jsx
El .entonces la sección maneja la respuesta si obtenemos la respuesta esperada del servidor. Si no, entonces tenemos una sección adicional llamada .catch que se utiliza para gestionar el error mientras se accede al punto final remoto.
Ahora accedamos a las diferentes propiedades del objeto de respuesta, así.
123456789101112131415asyncgetTodos(){// Con todas las propiedades axios .get("https://jsonplaceholder.typicode.com/todos?_page=1&_limit=10").then(response=§;{console.log(response. datos);console.log(response.status);console.log(response.statusText);console.log(response.headers);console.log(response.config);}).catch(function(error){console.log(error);});}jsx
Hemos accedido a diferentes propiedades del objeto de respuesta, incluyendo datos, estado, encabezados, configuración y texto de estado. Podemos hacer uso de tales propiedades para hacer cosas como mostrar el estado de la respuesta, como 200, 404, 502, etc.
Vamos a publicar los datos utilizando la petición POST Axios con este ejemplo.
12345678910111213141516asyncgetTodos(){// Con todas las propiedadeslet body ={ userId:1111, title: "This is POST request with body", completed:true}; axios .post("https://jsonplaceholder.typicode.com/todos", body).then(function(response){console.log(response.data);}).catch(function(error){console.log(error);});}jsx
Aquí en este ejemplo, hemos utilizado la solicitud POST junto con el cliente Axios que pasa los datos adicionales de la solicitud para publicar el registro en el servidor.
El ejemplo completo se verá así.
123456789101112131415161718192021222324252627282930313233343536373839404142434445importarReaccionar,{Componente}de "reaccionar";importar axios de "axios";claseUsarAxiosextiendeComponente{constructor(){super();esto. state={ name: "React"};this.getTodos=this.getTodos.bind(this);}componentDidMount(){this.getTodos();}asyncgetTodos(){// Con todas las propiedadeslet body ={ userId:1111, title: "This is POST request with body", completed:true}; axios . post("https://jsonplaceholder.typicode.com/todos", body).then(function(response){console.log(response.data);}).catch(function(error){console. log(error);});}render(){const{ todos }=this.state;return(<div><h3;};Using Axios in React for API call</h3>hr/></div>);}}exportdefaultUsingAxios;jsx
Este ejemplo muestra que añadiremos un objeto todo usando la petición POST de Axios, pasando por alto el objeto adicional, que es el objeto de la petición. Si la petición tiene éxito, entonces los datos pueden ser utilizados para una mayor manipulación.
Por eso Axios es un buen cliente HTTP basado en promesas para hacer llamadas basadas en HTTP para acceder a los datos del servidor o actualizar los datos existentes.
Ahora usaremos un enfoque diferente para hacer una petición HTTP alled fetch().