Understanding JavaScript Fetch calls

Question

I am trying to migrate my API from XMLHttpRequest to JavaScript fetch for API call. But I am unable to obtain the desired result.

My main script calling the API:

response = API.get_data()

My API code:

   var API = new function() {
    this.get_data  = function () 
    {fetch(url)
     .then(function(response) {
           if (response.status !== 200) {  
               console.log('Looks like there was a problem. Status Code: ' + response.status);  
               return;  
           }

           response.json().then(function(data) {  
                return data;
           });  
         })
         .catch(function(error) {
           console.log('There has been a problem with your fetch operation: ' + error.message);
          });
}

The network call takes place and the response data is retrieved but I am unable to obtain the response in main script. How do I do it?

Do I need to use a callback function to the main script passing the response data? Or is there any pre-defined method that I have missed?

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — StudioTime, May 18 '17 at 14:16

score 1 · Accepted Answer · edited May 23 '17 at 10:31

1

First, you need to return the result of fetch() from your API method. Notice that, in get_data, you call fetch() but don't return the result.

return fetch(url).then(...)

Second, in your main script, you need to treat the result as a Promise. fetch() gives get_data() a Promise of a Response, and get_data() gives the main script a Promise of data.

API.get_data().then(function(data) {
  // Same thing you did for fetch, you must do with get_data
})

If you don't understand why this must be the way, take a look at the magnificent answer to this question: How do I return the response from an asynchronous call?

edited May 23 '17 at 10:31

Community

1
1

answered May 18 '17 at 14:18

salezica

74,081
25
105
166

so you mean to say that I need to return fetch from api function. and handle the respone in the main script instead of inside the api class ryt? – sam23 May 18 '17 at 14:28
No: your design is correct. `fetch()` should handle the `Response` object, extract `data`, and return `data`. After all, the job of the `API` class is to make HTTP requests. The main script should `.then(function(data))` – salezica May 18 '17 at 14:41

score 0 · Answer 2 · answered May 18 '17 at 14:19

The response can be accessed in the promise, so what used to be your callback should go in the then body.

var API = new function() {
    this.get_data  = function () 
    {
       fetch(url)
         .then(function(response) {
           if (response.status !== 200) {  
               console.log('Looks like there was a problem. Status Code: ' + response.status);  
               return response.json();  
           }
         })
         .then(data => { 
           // do something with data here. you cannot return data because this is asynchronous
         }) 
         .catch(function(error) {
           console.log('There has been a problem with your fetch operation: ' + error.message);
          });
}

Understanding JavaScript Fetch calls

2 Answers2