How can I make a POST request in react native

Question

So I created a website where I used JS and jQuery to send data to a server. But now I am making that website as an app on my phone using react native. I've read about the fetch function but I don't completely understand how I would go about it to make this request. This is the code I used on my website:

$(".btn").click(function() {
    var p = $(this).attr('id');
    pin: p
    $.get("http://192.168.0.129:80/", {
    pin: p
    });
    DisableButtons();
});

Right now I have the following:

sendData = (data) => {
    console.log(data);
    var p = data;
    pin: p
    $.get("http://192.168.0.129:80/", {   --> this needs to be changed so it could work 
    pin: p                                    in react native 
    }); 
  }

So what I want to accomplish is to send this url when I call the function: http://192.168.0.129/?pin=xxx

Thanks in advance

What's the specific issue? Is there something in the RN docs or the MDN docs that doesn't make sense? — Dave Newton
– Dave Newton, Commented Nov 6, 2021 at 18:03
I'm not sure where I should put the pin: p, would it be in body the first parameter? — Mike Aelbrecht
– Mike Aelbrecht, Commented Nov 6, 2021 at 18:46
Can you just try it? The fetch docs are pretty clear (IMO, anyway :) regarding parameters, as are the jQuery docs—it’s not clear what specifically you’re having a problem with. — Dave Newton
– Dave Newton, Commented Nov 6, 2021 at 19:33
Well I tried it, I got this: const dataToSend = {pin: data}; fetch('192.168.0.129:80', { method: 'POST', headers: { 'Content-Type': 'application/urlencoded' }, body: JSON.stringify(dataToSend), }); But it doesnt work... It makes connection with the server but the data isn't send the same way as the website sends it. — Mike Aelbrecht
– Mike Aelbrecht, Commented Nov 6, 2021 at 19:52
Your title specifically asks about a GET request, but it looks like the code you're trying is a POST request. — jnpdx
– jnpdx, Commented Nov 6, 2021 at 20:13

Someone Special · Accepted Answer · 2021-11-06 20:16:06Z

1

A typical fetch request in javascript looks like this.

const sendData = async(data) => {
    const response = await fetch(`http://192.168.0.129:80/?pin=${p}`).then(res => res.json()) //or res.text() if you are expecting text response.
    console.log('results')

}

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

answered Nov 6, 2021 at 20:16

Someone Special

13.7k8 gold badges54 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mike Aelbrecht Over a year ago

I'm pretty sure this would've worked aswell!

Robert Over a year ago

If you are using an async function there is no need to use "then"

Someone Special Over a year ago

it's not about "need", it's about writing the res.json() in a single line. You can also write a customised fetch in a separate function so you do not need to write a await response.json() code.

Mike Aelbrecht · Accepted Answer · 2021-11-06 20:29:01Z

0

So I got the solution, it was simpler then I thought:

sendData = (data) => {
    console.log(data);
    var url = `http://192.168.0.129:80/?pin=${data}`;
    fetch(url);
  }

answered Nov 6, 2021 at 20:29

Mike Aelbrecht

157 bronze badges

3 Comments

Antoine Marques Over a year ago

This seems like a GET request your making with query params

Mike Aelbrecht Over a year ago

I am realy confused, I know GET is to ask for data and POST is to send data but you can send data with a GET request?

Antoine Marques Over a year ago

Yes. Please have a look at MDN doc here : developer.mozilla.org/fr/docs/Web/API/Fetch_API/Using_Fetch. You'll find out more about 'method' argument that can be passed in order to perform 'POST' request with fetch ('GET' being the default mode)

Collectives™ on Stack Overflow

How can I make a POST request in react native

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related