I am getting a promise in return of a fetch call in React native

Question

I want to get a json file in return.

this is a fetch Function i am using

handleApi(){
    return 
        fetch('https://facebook.github.io/react-native/movies.json')
            .then((response) => response.json())
                .then((responseJson) => {
            return responseJson.movies;
        })
}

this function is being called on an button click event.

handleSubmit() {
    console.log(
        this.handleApi();
    )

but i am getting this Promise object in return not expected data

Promise {_40: 0, _65: 0, _55: null, _72: null}_40: 0_55: null_65: 0_72: null__proto__: Object

`fetch` returns a promise that's how it works. You need to move `console.log` in `this.handleApi().then(console.log)` — Yury Tarabanko, Jul 21 '17 at 06:58
for me, I was missing the return in front of the fetch. Adding that solved my issues — user1529413, Feb 05 '21 at 01:37

score 5 · Answer 1 · answered Jul 21 '17 at 07:19

A more simplified

handleApi(){
    return 
        fetch('https://facebook.github.io/react-native/movies.json')
            .then(response => 
                response.json().then(jsonObj => return jsonObj.movies)
            )
}

then in handleSubmit

handleSubmit() {
    this.handleApi().then(movies => {
        console.log('Print list of movies:', movies);
    });
)

score 1 · Answer 2 · answered Jul 21 '17 at 07:28

Please update your code as following:

handleApi(){
return 
    fetch('https://facebook.github.io/react-native/movies.json')
        .then((response) => response.json())
        .then((responseJson) => {
            return responseJson.movies;
        })
}

and

handleSubmit() {
 this.handleApi().then(function(movies) {
    console.log('Print list of movies:', movies);
 });
}

I am getting a promise in return of a fetch call in React native

2 Answers2