React组件中调用异步Action时如何等待Promise完成？

我在React组件中有一个lookupComplete方法，该方法会调用checkIfAssign Action，我需要等待该Action的响应结果，并根据结果触发其他方法，但目前得到的是Promise {<pending>} "result"。请问如何等待该Action解析完成？

组件代码 #

export class Test extends Component {
  ....
  lookupComplete = (tagId = this.state.tagId) => 
    this.setState({tagId}, () => {
      let result = this.props
        .checkIfAssign(this.state.tagId, this.props.accessToken)
      result.status ? this.triggerTransition(transitions.ClickCheckTag) : this.triggerTransition(transitions.Test)
    })
}

export const mapDispatchToProps = dispatch => ({
  checkIfAssign: (tagId, accessToken) => dispatch(TagAssignmentActions.checkTagAssignment(tagId, accessToken)),
})

Action代码 #

export const checkTagAssignment = (tagId, token) => async dispatch => {
  dispatch({
    type: TagAssignmentActionTypes.TagAssignmentChanged,
  })
  let status, assignee, response
  try {
    response = await DeviceApi.checkTagAssignment(tagId, token)
    assignee = response.result.assignee
    status = response.result.status
  } catch (e) {
    if (e && e.status === httpStatusCode.notFound)
      status = TagStatus.NotFound
  }
  dispatch({
    type: TagAssignmentActionTypes.TagAssignmentChanged,
    status,
    assignee,
    response,
  })
  console.log(response, 'response')
  return response
}

嘿，这个问题我太熟了！核心原因是你没正确处理异步Action返回的Promise——你的checkTagAssignment是个带async/await的异步Action，它执行后会返回一个Promise，但你在组件里直接赋值给result时，这个Promise还没完成，所以才会得到Promise {<pending>}。

只需要两个小修改就能解决：

1. 把setState的回调函数改成async函数，这样就能在里面使用await
2. 调用this.props.checkIfAssign时加上await，等待Promise解析完成后再拿到最终结果

修改后的lookupComplete方法如下：

lookupComplete = (tagId = this.state.tagId) => 
  this.setState({tagId}, async () => { // 这里把回调改成async
    // 用await等待Action返回的Promise完成
    const result = await this.props.checkIfAssign(this.state.tagId, this.props.accessToken)
    result.status ? this.triggerTransition(transitions.ClickCheckTag) : this.triggerTransition(transitions.Test)
  })

为什么这样有效？ #

你的checkTagAssignment是一个异步Action创建函数，因为它用了async关键字，所以它会自动返回一个Promise。当内部的await DeviceApi.checkTagAssignment完成、Action执行完毕并return response后，这个Promise才会resolve成最终的response对象。

通过在回调里用await等待这个Promise，你就能拿到真正的响应结果，而不是未完成的Promise实例，这样就能正确通过result.status判断要触发哪个方法了。

另外小建议：你已经把tagId作为参数传入lookupComplete了，其实可以直接用这个参数代替this.state.tagId，因为setState是异步的（虽然回调里的state是更新后的，但用参数更直观），比如：

lookupComplete = (tagId = this.state.tagId) => 
  this.setState({tagId}, async () => {
    const result = await this.props.checkIfAssign(tagId, this.props.accessToken) // 直接用参数tagId
    // ...后续逻辑不变
  })

这样代码会更清晰，也能避免一些潜在的异步状态问题。

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