React中函数执行顺序问题：如何让前一个执行完成后再调用下一个

JavaScript默认同步代码严格按调用顺序逐行执行，出现"同时执行"现象，本质是被调用的方法内部包含异步逻辑，常见场景包括：

• 方法内部发起了网络请求、定时器、动画等异步操作
• 方法是async声明的异步函数，调用时没有加await关键字，调用后会直接返回Promise实例，不会阻塞后续代码执行
• 方法内部包含React的setState状态更新操作，React默认会对状态更新做批量异步处理，不会同步完成状态变更

要实现逐个执行，首先需要把所有异步逻辑封装为返回Promise的形式，再通过async/await语法控制执行顺序，这是目前最易维护的写法。

步骤1：改造被调用的方法，确保返回Promise #

举几个常见场景的改造示例：

• 内部是网络请求的方法：

// 改造前，没有返回请求的Promise
getValue = () => {
  axios.get('/api/xxx')
}
// 改造后，返回Promise实例
getValue = () => {
  return axios.get('/api/xxx')
}

• 内部是React状态更新的方法：

// 改造前，没有返回值，setState异步执行
resetValidation = () => {
  this.setState({
    errorMsg: '',
    validStatus: false
  })
}
// 改造后，返回Promise，状态更新完成后触发resolve
resetValidation = () => {
  return new Promise((resolve) => {
    this.setState({
      errorMsg: '',
      validStatus: false
    }, resolve)
  })
}

• 内部是带回调的动画/弹窗逻辑的方法：

// 改造前，通知弹窗显示后直接返回，不会等动画结束
notify = () => {
  Modal.success({
    content: '操作成功',
    duration: 2000
  })
}
// 改造后，返回Promise，弹窗关闭后触发resolve
notify = () => {
  return new Promise((resolve) => {
    Modal.success({
      content: '操作成功',
      duration: 2000,
      onClose: resolve
    })
  })
}

步骤2：改造submit方法为async函数，添加await关键字 #

submit = async () => {
  // 前一个方法执行完成（Promise resolve）后才会执行下一个
  await this.props.getValue();
  await this.props.resetValidation();
  await this.notify();
  await this.props.toggle();
  await this.props.disable();
  await this.props.actionCost();

  // 其他需要顺序执行的方法同理
};

异常处理补充 #

如果需要某一步执行失败后中断后续流程，直接在submit外层加try/catch即可：

submit = async () => {
  try {
    await this.props.getValue();
    await this.props.resetValidation();
    // 其余顺序执行的方法
  } catch (err) {
    console.error('执行出错:', err)
    // 出错后的处理逻辑，比如提示用户
  }
};

如果需要某一步执行失败后仍继续执行后续流程，单独给对应await的方法加catch处理：

await this.props.getValue().catch(err => console.log('getValue失败，继续执行', err))

内容的提问来源于stack exchange，提问作者sambit