Question

我一直在调用我的React.js / Redux应用程序的onClick事件上的api。在调用api之后，我必须根据第一个API的结果调用另一个api。所以我在考虑异步调用。

我的代码：

<a href="" onClick={(e) => this.sendData(e)} >Send</a>

和方法sendData是

sendData(e){
    e.preventDefault();
    this.props.sendDataApi({this.refs.msg.value});
    //After receiving results from above api, i have to call another api async
    this.props.getDetails(this.refs.txt.value);
}

但是当前两个API同时被调用。任何帮助！

Answer 1

您应该考虑使用async / await模式来很好地处理该场景。您的代码将如下所示：

const sendData = async message => {
    const messageId = await sendDataApi(message)
    const details = await getDetails(messageId)
    return details
}

但是，如果您无法使用最新的语言功能，则可以使用Promise s。请记住，代码更容易回调 - 地狱，他们可能还需要填充。

与promises相同的代码如下所示：

const sendData = message => {
    sendDataApi(message)
    .then(messageId => getDetails(messageId))
}

此代码仅仅是Promises问题的一个示例，因为它可以简化为sendDataApi(message).then(getDetails)。当存在复杂的条件逻辑，错误处理，更多任务和参数传递时会出现问题。

React处理异步非常差，Redux也是如此。您需要使用redux-thunk，redux-saga或其他中间件。有了它，您将能够从动作创建者（continuation，trunk，saga - 您命名它）发送另一个动作。它可能变得乏味，需要很多样板，并且很难调试。你可以考虑离开Redux同步状态管理并考虑其他解决方案（RxJS可能吗？）来解决这些问题。

请使用React的默认setState see an example of using Promises to chain two asynchronous calls（请参阅控制台输出）。

使用redux-thunk，实现可能如下所示（其他操作未显示，没有错误处理等）：

...

const sendData = message => {
  return dispatch => {
    return sendDataApi(message).then(
      messageId => dispatch(getDetails(messageId)),
    );
  };
}

React.js在执行第一个函数后设置回调函数

1 个答案: