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, Feb 09 '19 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, Feb 09 '19 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, Feb 09 '19 at 13:42

M Reza · Accepted Answer · 2019-02-09T14:17:09.513

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 09 '19 at 14:17

answered Feb 09 '19 at 13:56

M Reza

18,350
14
66
71

1

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. – spender Feb 09 '19 at 13:58
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? – j.Doe Feb 09 '19 at 14:02
1

@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. – M Reza Feb 09 '19 at 14:18
@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? – j.Doe Feb 09 '19 at 14:28
1

@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`. – M Reza Feb 09 '19 at 14:32

score 1 · Answer 2 · answered Mar 28 '19 at 03:24

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;
});

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

2 Answers2