Fetch request post method in React Native

Question

I cannot make it work the fetch request with the post method, with get other api calls works great.This is my code:

return fetch(URL_LOCAL + `/addLike`, {
    method: 'post',
    body: JSON.stringify({a: 1})
})
    .then(response => Promise.all([response, response.json()]))
    .catch(err => {
        return Promise.reject(err);
    })

I made a console.log before the fetch about the URL_LOCAL and its fine it returns http://localhost:5000.

It gives me this error:

Network request failed
    at XMLHttpRequest.xhr.onerror (blob:http://localhost:8081/459df9ca-c7b8-48bc-9c45-03d2f1e94f1d:15825)
    at XMLHttpRequest.dispatchEvent (blob:http://localhost:8081/459df9ca-c7b8-48bc-9c45-03d2f1e94f1d:17902)
    at XMLHttpRequest.setReadyState (blob:http://localhost:8081/459df9ca-c7b8-48bc-9c45-03d2f1e94f1d:17657)
    at XMLHttpRequest.__didCompleteResponse (blob:http://localhost:8081/459df9ca-c7b8-48bc-9c45-03d2f1e94f1d:17484)
    at blob:http://localhost:8081/459df9ca-c7b8-48bc-9c45-03d2f1e94f1d:17594
    at RCTDeviceEventEmitter.emit (blob:http://localhost:8081/459df9ca-c7b8-48bc-9c45-03d2f1e94f1d:3480)
    at MessageQueue.__callFunction (blob:http://localhost:8081/459df9ca-c7b8-48bc-9c45-03d2f1e94f1d:2386)
    at blob:http://localhost:8081/459df9ca-c7b8-48bc-9c45-03d2f1e94f1d:2156
    at MessageQueue.__guardSafe (blob:http://localhost:8081/459df9ca-c7b8-48bc-9c45-03d2f1e94f1d:2348)
    at MessageQueue.callFunctionReturnFlushedQueue (blob:http://localhost:8081/459df9ca-c7b8-48bc-9c45-03d2f1e94f1d:2155)

I'am on an android simulator using chrome dev tools to see the logs, and i'am using node and mongodb as backend , but i put a log in the beginning of the call but is not fired

EDIT: I make it work but with the api in production is the same code that i used with localhost:5000, I dont know what can be wrong with the localhost

Is there a .code on the error object? Other details? That might tell you more. — Jacob
– Jacob, Commented Aug 3, 2018 at 0:10
@Jacob No, i only get logged the error that i describe above. Is the error returned from the .catch — Franco Coronel
– Franco Coronel, Commented Aug 3, 2018 at 0:25
I am not sure why you are returning promise from .then of fetch. response and response.json are not promise objects. — Sandip Nirmal
– Sandip Nirmal, Commented Aug 3, 2018 at 2:47
What I'm saying is that the error has more details than what you posted. Log those out and we'll understand exactly what kind of network request failure this is. — Jacob
– Jacob, Commented Aug 3, 2018 at 16:57

Sandip Nirmal · Accepted Answer · 2018-08-03 02:54:41Z

1

Can you try replacing your code with following:

return fetch(URL_LOCAL + `/addLike`, {
    method: 'post',
    body: JSON.stringify({a: 1})
})
    .then(response => Promise.resolve(response.json()))
    .catch(err => {
        return Promise.reject(err);
    })

answered Aug 3, 2018 at 2:54

Sandip Nirmal

2,48923 silver badges25 bronze badges

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

Comments

Olfredos6 · Accepted Answer · 2020-10-30 06:40:12Z

I was experiencing the same issue.

I was developing locally and my API was running inside a docker container on my machine. My React Native App was managed by Expo, hence I was using a phone connected on the same network as my machine to test the app.

What I was doing wrong was trying to send fetch requests to 127.0.0.1:PORT/api/endpoints or localhost:PORT/api/endpoints. The problem was that requests were coming from my phone and were supposed to be sent to the API which is not at 127.0.0.1/localhost anymore if we are on the phone but at the address of my machine on the same network as my phone. Stupid right?

What I did to fix this was to get the current IP of my machine on my local network, the same network as where my phone was connected, used it as IP address of the API.

So instead of doing

fetch('localhost:8000/api/v2/events/upcoming')

I discovered that Expo was fetching the react app from 192.168.0.110:19000. Meaning that 192.168.0.110 was my machine's IP on the network. So, the right fetch request was

fetch('192.168.0.110:8000/api/v2/events/upcoming')

Collectives™ on Stack Overflow

Fetch request post method in React Native

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related