Question

在我的reactJS应用程序中，我有以下按钮onClick

<Button
  onClick={() => {
    this.authenticateUser(this.state.user, this.state.password)
      .then(user => {
        if (user === "true") {
          this.setState({ markAsDone: true }, () => {
            this.startStepInstancePostConditions(this.props.step, this.props.instance.id);
            this.markSepInstanceAsDone(this.props.step, this.props.instance.id);
          });
          this.toggleDialog();
        }
      })
      .catch(() => {
        this.snackBarHandler(this.toggleSnackBar, "", t("auditLogs:newAuditLog.error"), 5000);
      });
  }}
>
  {t("processes:processStepInstances.markAsDoneDialog.save")}
</Button>

我不确定如何解决我的问题。

这两个功能：

this.startStepInstancePostConditions(this.props.step,this.props.instance.id);  

this.markSepInstanceAsDone(this.props.step,this.props.instance.id);

遍历某些数组并执行一些axios个帖子。

我希望我的应用程序调用它：

 this.props.history.push("/processes/processInstance/" + this.props.instance.id);

如果完成上述两个函数和所有子函数。我怎么能得到这个？

提前致谢

更新

export function markSepInstanceAsDone(step, processInstanceId) {
    const user = sessionStorage.getItem("username");
    const clientId = sessionStorage.getItem("client");
    axios.post(PROCESS_INSTANCES_URL + '/markProcessStepInstanceAsDone/' + clientId, {
        stepInstanceId: step.id,
        user: user,
        comment: this.state.markStepInstanceAsDoneComment
    })
        .then((response) => {
            this.getContentComponentPostConditions(step, processInstanceId);
            this.props.history.push("/processes/processInstance/" + processInstanceId);
        })
        .catch((error) => {
            this.setState({dialogLoaded: false});
            console.log(error);
        });
}

更新

export function startStepInstancePostConditions(step,processInstanceID) {
    step.postConditions.map(postConditionTemplate => {
        axios.get(API_URL + '/processStepTemplates/' + postConditionTemplate.id)
            .then(response => {
                this.createProcessInstanceAutomatic(postConditionTemplate, response.data);
            })
            .catch(error => {
                console.log(error);
            });
    });
}

Answer 1

让你的两个函数都从axios调用中返回promise，然后你可以使用Promise.all等到它们都完成后再做一些事情。

startStepInstancePostConditions() {
  return axios.post('...')
}
markSepInstanceAsDone() {
  return axios.post('...')
}

// inside the authenticateUser callback
Promise.all([
  this.startStepInstancePostConditions(this.props.step, this.props.instance.id),
  this.markSepInstanceAsDone(this.props.step, this.props.instance.id)
]).then(() => {
  this.props.history.push("/processes/processInstance/" + this.props.instance.id)
})

JavaScript如何等待函数及其所有子函数完成

1 个答案: