Question

我有一些使用axios的AJAX调用，并且我只想在最后一个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个诺言的快速方法，然后当所有诺言完成时，它将触发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
                });
            });
        }
    }
}

如何使用axios.all或promise.all一次调用所有ajax调用？反应

1 个答案: