Realizar una llamada GET en React Native con Axios

Tiempo de lectura: < 1 minuto

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)
        );