Enviar un POST con URLSearchParams (params) en React Native usando Axios

Tiempo de lectura: < 1 minuto

En el artículo de hoy, voy a enseñaros cómo enviar un POST construido con URLSearchParams y usando la librería Axios para React Native/Expo. En los anteriores artículos, os enseñe Realizar una llamada GET en React Native con Axios y Cómo hacer un POST con Axios en React Native

Lo primero que tenemos que hacer es instalar la dependencia:

expo install axios

Una vez instalada, importamos la librería en el component o screen dónde queramos utilizarla:

import axios from "axios";

Ahora vamos a crear la petición:

    //Headers de la petición
    const config = {
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        }
    };

    //parámetros
    var urlencoded = new URLSearchParams();
    urlencoded.append("parametro_1", "valor");
    urlencoded.append("parametro_2", 2);

    //Petición POST
    axios.post("tu_url", urlencoded.toString(), config)
        .then(respuesta => {
             alert(JSON.stringify(respuesta.data)),
        }).catch(error =>
            console.log('errore', error),
        );

Ahora voy a explicar el código.

Primero creo las cabeceras de la petición (headers), en este caso Content-Type.

Después se crean los parámetros con el objeto URLSearchParams().

 var urlencoded = new URLSearchParams();
    urlencoded.append("parametro_1", "valor");
    urlencoded.append("parametro_2", 2);

Y ahora se añaden a la petición urlencoded.toString() .

La respuesta se recibe en la línea:

    .then(respuesta => {
         alert(JSON.stringify(respuesta.data)),
    })

Y si hay error en la llamada, se recibe en la línea:

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