CODEWITHSUNDEEP
reactjspromiseaxios
ELD
ELD

Reputation: 338

How to use axios.all or promise.all to call all ajax calls just once? React

I have some AJAX calls using axios, and I want to change the state of all only when the last axios call is finished, I tried to use axios.all but I could not, could anyone help me?

The call:

export default class TeamStatus extends React.Component {
    state = {

      updated2018: "",
      updated2017: "",
      updated2016: "",
      totalSkills: "",
      totalNotUpdated: "",
    }


    componentWillReceiveProps(props) {
      const firstName = localStorage.getItem('nameLoggedUser');
      const lastName = localStorage.getItem('lastNameLoggedUser');
      const fullName = `${firstName} ${lastName}`.toLowerCase();

      const loggedUserIs = localStorage.getItem("user-role");

      if (loggedUserIs === 'full') {
        axios.get(`/api/wfmskills/${props.managerStatusFiltered}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadNameStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
          .then(res => {
            this.setState({
              totalSkills: res.data.count
            })
          })
        axios.get(`/api/notupdated/${props.managerStatusFiltered}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadNameStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
          .then(res => {
            this.setState({
              totalNotUpdated: res.data.count
            })
          })
        axios.get(`/api/updated2017/${props.managerStatusFiltered}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadNameStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
          .then(res => {
            this.setState({
              updated2017: res.data.count
            })
          })
        axios.get(`/api/updated2016/${props.managerStatusFiltered}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadNameStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
          .then(res => {
            this.setState({
              updated2016: res.data.count
            })
          })
        axios.get(`/api/updated2018/${props.managerStatusFiltered}/${props.cityStatusFiltered}/${props.countryStatusFiltered}/${props.squadNameStatusFiltered}/${props.domainStatusFiltered}/${props.subdomainStatusFiltered}`)
          .then(res => {
            this.setState({
              updated2018: res.data.count,
            });
          })
      }
    }

So, i have 5 calls, and i want to change the state (update2018,2017,2016,totalSkills and notUpdate) when the last to finish (api/update2018)

Someone could help me? PLEASE???

Upvotes: 0

Views: 767

Answers (1)

Naismith
Naismith

Reputation: 266

Here is a quick way to wrap all your promises in 1 promise all, and then when all of them complete, it will trigger 1 setState. This will allow you to execute code after all 5 are done completing.

export default class TeamStatus extends React.Component {
    state = {
        updated2018: "",
        updated2017: "",
        updated2016: "",
        totalSkills: "",
        totalNotUpdated: "",
    }

    componentWillReceiveProps(props) {
        const firstName = localStorage.getItem('nameLoggedUser');
        const lastName = localStorage.getItem('lastNameLoggedUser');
        const fullName = `${firstName} ${lastName}`.toLowerCase();

        const loggedUserIs = localStorage.getItem("user-role");

        if (loggedUserIs === 'full') {
            const { managerStatusFiltered, cityStatusFiltered, countryStatusFiltered, squadNameStatusFiltered }
            Promise.all([
                axios.get(`/example1`),
                axios.get(`/example2`),
                axios.get(`/example3`),
                axios.get(`/example4`),
                axios.get(`/example5`),
            ]).then(([res1, res2, res3, res4, res5]) => {
                this.setState({
                    totalSkills: res1.data.count,
                    totalNotUpdated: res2.data.count,
                    updated2017: res3.data.count,
                    updated2016: res4.data.count,
                    updated2018: res5.data.count
                });
            });
        }
    }
}

Upvotes: 1

Related Questions