Enviar un POST de tipo FORM en React Native

Tiempo de lectura: 2 minutos

Para poder comunicarnos con nuestro servidor remoto (backend) utilizando React Native, tendremos que realizar una llamada asíncrona.

En este ejemplo, voy a enviar datos en un objeto FORM utilizando el método fetch de Javascript.

    //Headers, si queremos añadir un token, tendremos que añadirlo en estas cabeceras.
    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/x-www-form-urlencoded");

    //parametros a pasar
    var urlencoded = new URLSearchParams();
    urlencoded.append("nombre", nombre);
    urlencoded.append("email", email);

    //Objeto request
    var requestOptions = {
        method: 'POST',
        headers: myHeaders,
        body: urlencoded
    };

    //Url y objeto request para crear fetch
    fetch("https://www.urlmiweb.com/post_con_form", requestOptions)
        .then(response => response.text())
        .then(result =>
            console.log(result)
        )
        .catch(error => console.log('error', error));

Primero creamos los headers

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/x-www-form-urlencoded");

En este caso indicamos que vamos a enviar un FORM (cómo los formularios web).

Después añadimos los parámetros en nuestro FORM:

var urlencoded = new URLSearchParams();
urlencoded.append("nombre", nombre);
urlencoded.append("email", email);

Ahora, creamos un objeto con todos los atributos de la llamada, indicando tipo POST, los haders que hemos creado antes, el body con el objeto FORM que hemos rellenado:

var requestOptions = {
method: 'POST',
headers: myHeaders,
body: urlencoded,
redirect: 'follow'
};

Se crea la llamada con el método fecth de JavaScript, se añade la URL y se añaden las opciones:

fetch("https://www.urlmiweb.com/post_con_form", requestOptions)

Dentro de la llamada fetch tenemos distintas partes, si la llamada va bien, se invoca a este método:

.then(result =>
console.log(result)
)

De forma asíncrona podemos ejecutar lo que añadamos dentro de result => (por ejemplo otra función) y la respuesta del servidor se guarda en la variable result.

Si la llamada va mal, se invoca el método error:

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