0

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???

1 Answer 1

1

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
                });
            });
        }
    }
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.