react-native fetch().then() returning object Object

Question

I am doing a network request very similar to the example code of react-native.

Networking.js

export default class Networking {

  static tryLogin() {

    return fetch('https://exampleserver.com')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson;
    })
    .catch((error) => {
      console.error(error);
    });

  }
}

I'd like to retrieve responseJson and process it in another class, however, .then((responseJson) is returning objectObject instead of my JSON. I am calling this method using Networking.tryLogin();

When replacing return responseJson with alert(responseJson) it works as expected, so it has to be something with the returning.

Edit: When doing console.log() I am getting:

 Promise {
   "_40": 0,
   "_55": null,
   "_65": 0,
   "_72": null,
}

Is it just that you're return object is too large for the console to show? — ehutchllew
– ehutchllew, Commented Feb 9, 2019 at 13:36
Where are you seeing objectObject returned? like on an alert? or are you using the React Native debugger to send it to the console? — Dmitriy
– Dmitriy, Commented Feb 9, 2019 at 13:39
I am calling the function and alerting it: alert(Networking.tryLogin()); I am seeing 'objectObject' in the alert box. But it is the same in console.log() — j.Doe
– j.Doe, Commented Feb 9, 2019 at 13:42

M Reza · Accepted Answer · 2019-02-09 14:17:09Z

3

You are returning a Promise in tryLogin(). So you need to access its value in a .then() method:

Networking.tryLogin().then(response => console.log(response));

In addition to the question asked in comments, as explained in react-native docs:

Networking is an inherently asynchronous operation. Fetch methods will return a Promise that makes it straightforward to write code that works in an asynchronous manner.

edited Feb 9, 2019 at 14:17

answered Feb 9, 2019 at 13:56

M Reza

20k15 gold badges72 silver badges78 bronze badges

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

5 Comments

spender Over a year ago

I suggest that the OP goes back to the books to learn about how Promise works and especially about how async and await make life really easy when dealing with Promise.

j.Doe Over a year ago

Thank you. Why am I returning a promise when I already do have the .thens in the tryLogin() method? What would I need to do, to save the response to a variable in order to process it further?

M Reza Over a year ago

@j.Doe please check the updated answer for your question. For saving response, simply just assign it to a variable that is defined outside then() method.

j.Doe Over a year ago

@MohammadrezaFarahani sure, but how do I check if the request has finished? Do I assign a standard value outside then() method and let a while loop wait until value has changed?

M Reza Over a year ago

@j.Doe When the then block I mentioned in the answer is invoked, it means the request has finished. No need for other statements. For easier usage as spender suggested, you should use async and await.

Betty · Accepted Answer · 2019-03-28 03:24:34Z

1

Try Promise.all().

I had a similar question as OP, and found this article. A bit old, but working! The main point is the following code:

const apiRequest1 = fetch('api.example1.com/search').then(function(response){ 
         return response.json()
});
const apiRequest2 = fetch('api.example2.com/search').then(function(response){
         return response.json()
});
const combinedData = {"apiRequest1":{},"apiRequest2:{}};
Promise.all([apiRequest1,apiRequest2]).then(function(values){
    combinedData["apiRequest1"] = values[0];
    combinedData["apiRequest2"] = values[1];
    return combinedData;
});

answered Mar 28, 2019 at 3:24

Betty

5821 gold badge9 silver badges24 bronze badges

Collectives™ on Stack Overflow

react-native fetch().then() returning object Object

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related