Realizar una llamada GET en React Native con Axios

Si queremos realizar una llamada asíncrona GET (ajax) con React Native, no podemos utilizar jQuery en este entorno, tenemos que utilizar Axios https://axios-http.com/es/

Lo primero que tenemos que hacer es instalar la dependencia, para ello introducimos esto en la consola:

expo install axios

Una vez instalado, vamos a crear la llamada, primero importamos la librería:

import axios from "axios";

Y ahora vamos a construir el GET:

axios.get('tu_url')
        .then(resp => {
            const respuesta = resp.data;
            alert(JSON.stringify(respuesta));
        })

Hacer un GET sería tan sencillo como la llamada anterior. Donde pone tu_url, tienes que indicar la url de destino.

En la línea .then(resp => es dónde va a recibir los datos. Para obtener el JSON que devuelves o el body, tienes que poner resp.data y ya podrías manejar los datos.

Para añadir una cabecera (headers) tendrás que poner lo siguiente:

   const config = {
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
            "TOKEN": "123456789" 
        }
    };

   axios.get('tu_url', config)
        .then(res => {
            const respuesta = res.data;
            alert(JSON.stringify(respuesta));
        })

Y para mostrar los errores, añadiremos:

.catch(error =>
            console.log('error', error)
        );

Quedaría de la siguiente forma:

import axios from "axios";

   const config = {
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
            "TOKEN": "123456789" 
        }
    };

   axios.get('tu_url', config)
        .then(res => {
            const respuesta = res.data;
            alert(JSON.stringify(respuesta));
        }).catch(error =>
            console.log('error', error)
        );

isMa

Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.