Customize Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

No cookies to display.

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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
//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));
//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));
    //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 myHead

ers = new Headers();<br>myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
ers = 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();<br>urlencoded.append("nombre", nombre);<br>urlencoded.append("email", email);
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 = {<br>method: 'POST',<br>headers: myHeaders,<br>body: urlencoded,<br>redirect: 'follow'<br>};
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)
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 =><br>console.log(result)<br>)
.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));
.catch(error => console.log('error', error));

0

Deja un comentario