CODEWITHSUNDEEP
javascriptfetch-api
jona
jona

Reputation: 702

Waiting for the fetch to complete and then execute the next instruction

Is it possible to wait until the fetch instruction has completed before executing the next code / instruction (just like how AJAX waiting works)?

These functions are actually used to request the “privacy value” of a post from the Facebook Graph API. How can I keep an alert box from running until everything is over (i.e. the chained fetching in FirstRequestToGraph and RequestNextPage)?

function RequestNextPage(NextPage) {
  fetch(NextPage, {
    method: 'GET'
  })
    .then(function(response) {
      return response.json();
    })
    .then(function(json) {
      if (json.data.length == 0) {
        console.log("ended liao lur");
      }
      else {
        RequestNextPage(json.paging.next);
      }
    })
    .catch(function(err) {
      console.log(`Error: ${err}`)
    });
}

function FirstRequestToGraph(AccessToken) {
  fetch('https://graph.facebook.com/v2.8/me?fields=posts.limit(275){privacy}%2Cname&access_token=' + AccessToken, {
    method: 'GET'
  })
    .then(function(response) {
      return response.json();
    })
    .then(function(json) {
      NextPage = json.posts.paging.next;
    })
    .catch(function(err) {
      console.log(`Error: ${err}`)
    });
}

FirstRequestToGraph(AccessToken)
  .then(function() {
    RequestNextPage(NextPage); // Recursively until there's no more next page.
  })
  .then(function() {
    alert("everything has ended nicely"); // Still pop up before `RequestNextPage` completed.
  });

Upvotes: 30

Views: 122196

Answers (2)

HoldOffHunger
HoldOffHunger

Reputation: 20851

If you have an asynchronous function in your component, like this...

async getJSON() {
    return fetch('/website/MyJsonFile.json')
        .then((response)=>response.json())
        .then((responseJson)=>{return responseJson});
}

Then you can call it, and wait for it download, with the await command, using something like this...

async caller() {
    const json = await this.getJSON();  // command waits until completion
    console.log(json.hello);            // hello is now available
}

You'll also want to update getJSON(), return fetch() to return await fetch().

async is wonderful. So is await.

Check it out: Mozilla Developer Network: Async Function

Upvotes: 41

Jaromanda X
Jaromanda X

Reputation: 1

FirstRequestToGraph(AccessToken).then(function() {
    alert('testing1234');
});

function RequestNextPage(NextPage) {
    return fetch(NextPage, {
        method: 'GET'
    })
    .then(function(response) {
        return response.json();
    })
    .then(function(json) {
        RequestNextPage(json.paging.next);
    })
    .catch(function(err) {
        console.log(`Error: ${err}`)
    });
}

function FirstRequestToGraph(AccessToken) {
    return fetch('https://graph.facebook.com/v2.8/me?fields=posts.limit(275){privacy}%2Cname&access_token=' + AccessToken, {
        method: 'GET'
    })
    .then(function(response) {
        return response.json();
    })
    .then(function(json) {
        if(json.data.length !== 0 ){
           return RequestNextPage(json.paging.next);
        }
    })
    .catch(function(err) {
        console.log(`Error: ${err}`)
    });
}

Upvotes: 7

Related Questions