Как использовать axios.all или promise.all для вызова всех вызовов ajax только один раз? реагировать

Question

У меня есть несколько вызовов AJAX с использованием axios, и я хочу изменить состояние всех только после завершения последнего вызова axios. Я пытался использовать axios.all, но не смог, кто-нибудь может мне помочь?

Звонок:

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

Итак, у меня есть 5 вызовов, и я хочу изменить состояние (update2018,2017,2016,totalSkills and notUpdate), когда закончится последний (api/update2018)

Кто-то может мне помочь? ПОЖАЛУЙСТА ???

Answer 1

Вот быстрый способ обернуть все ваши обещания в одно обещание, а затем, когда все они будут выполнены, он вызовет 1 setState. Это позволит вам выполнить код после завершения всех 5.

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