"What is the best way to indicate that the most recent web service call has finished in a Javascript

Question

"What is the best way to indicate that the most recent web service call has finished in a Javascript

I am trying to execute the following code block:

this.setState({ // <------------ REF 1
  pages: pages
});

only after all

axios.get('https://graph.facebook.com/v5.0/' + page.id + '/events?access_token=' + accessToken)

requests have finished. REF 2

How can I achieve this in Javascript?

let accessToken = response.accessToken
axios.get('https://graph.facebook.com/v5.0/me/accounts?fields=id,name&access_token=' + response.accessToken)
.then(response => {
console.log("test")
let pageList = response.data.data.map(page => {
  console.log("page " + page.id + " " + page.name);
  this.setState({
    page: response.data.data
  });

  var pages = {}; // <------------ REF 2
  axios.get('https://graph.facebook.com/v5.0/' + page.id + '/events?access_token=' + accessToken)
  .then(response => {
    console.log("test 2");
    var events = {};
    let eventList = response.data.data.map(event => {
      console.log("event " + event.id + " " + event.name);
      events[event.id] = event.name;
    });
    pages[page.id] = [page.name, events];
  })

  this.setState({ // <------------ REF 1
    pages: pages
  });
})
})

javascript axios

Answer 1

Answer №1

If you want to ensure that all Promises are completed before updating the state, one approach is to use Promise.all. However, be aware that if one promise rejects, it will cancel all other requests. To handle this scenario, we include .catch(e => e) which simply catches any rejection and passes it to Promise.all as if the promise had resolved.

By combining this with the await keyword, we can wait for Promise.all to resolve, then iterate over the results to update the state using setState or any desired method.

let accessToken = response.accessToken;
axios
  .get(
    "https://graph.facebook.com/v5.0/me/accounts?fields=id,name&access_token=" +
      response.accessToken
  )
  .then(async pagesResponse => {
    console.log("test");
    let promisesArray = pagesResponse.data.data.map(async page => {
      console.log("page " + page.id + " " + page.name);
      this.setState({
        page: response.data.data
      });

      return axios
        .get(
          "https://graph.facebook.com/v5.0/" +
            page.id +
            "/events?access_token=" +
            accessToken
        )
        .catch(e => e);
    });

    const responses = await Promise.all(promisesArray);
    var pages = {}; // <------------ CODE 2
    responses.forEach((response, i) => {
      console.log("test 2");
      var events = {};
      let eventList = response.data.data.map(event => {
        console.log("event " + event.id + " " + event.name);
        events[event.id] = event.name;
      });
      const page = pagesResponse.data.data[i];
      pages[page.id] = [page.name, events];
    });

    this.setState({
      // <------------ CODE 1
      pages: pages
    });
  });

I hope this explanation clarifies things! Feel free to reach out if you need further assistance.

Answer 2

If you want to ensure that all Promises are completed before updating the state, one approach is to use Promise.all. However, be aware that if one promise rejects, it will cancel all other requests. To handle this scenario, we include .catch(e => e) which simply catches any rejection and passes it to Promise.all as if the promise had resolved.

By combining this with the await keyword, we can wait for Promise.all to resolve, then iterate over the results to update the state using setState or any desired method.

let accessToken = response.accessToken;
axios
  .get(
    "https://graph.facebook.com/v5.0/me/accounts?fields=id,name&access_token=" +
      response.accessToken
  )
  .then(async pagesResponse => {
    console.log("test");
    let promisesArray = pagesResponse.data.data.map(async page => {
      console.log("page " + page.id + " " + page.name);
      this.setState({
        page: response.data.data
      });

      return axios
        .get(
          "https://graph.facebook.com/v5.0/" +
            page.id +
            "/events?access_token=" +
            accessToken
        )
        .catch(e => e);
    });

    const responses = await Promise.all(promisesArray);
    var pages = {}; // <------------ CODE 2
    responses.forEach((response, i) => {
      console.log("test 2");
      var events = {};
      let eventList = response.data.data.map(event => {
        console.log("event " + event.id + " " + event.name);
        events[event.id] = event.name;
      });
      const page = pagesResponse.data.data[i];
      pages[page.id] = [page.name, events];
    });

    this.setState({
      // <------------ CODE 1
      pages: pages
    });
  });

I hope this explanation clarifies things! Feel free to reach out if you need further assistance.

"What is the best way to indicate that the most recent web service call has finished in a Javascript

Answer №1

Similar questions

I'm experiencing a problem with my React application where errors are not being shown in the browser. Instead

Best way to eliminate empty options from dropdown and ensure that required validation is functioning in AngularJS?

reversed json using javascript

show various commands and outcomes of the getElementsByClassName() function

Handlers for event(s) not triggering on video element

What is the best way to implement a scrollbar in a specific div rather than the entire window?

Ensure to verify the presence of a null value within the ngFor iteration

Having trouble getting the navigation function to work correctly for my ReactJS image slider

How can you use jQuery to remove a class from an element after a specified period of time?

Utilize React-Charts.js-2 with ChartJS to create a customized bar chart

Do arrays permanently retain the strings stored within them?

What Causes the Misalignment Between My Image and Text?

Ways to activate flashlight on mobile using React.Js

Stopping a function when another function is invoked in JavaScript

Stripping the prefix from a string using the .split function leads to an error message stating "Unexpected

Explore creating a dial number using React

jquery for quick search

Should a Service Worker be automatically installed on each page reload, or only when a user navigates to a new page?

Retrieve data using ajax within an mvc framework

Javascript Solution for Testing Palindromes in a Linked List