我一直在调用我的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同时被调用。任何帮助!
答案 0 :(得分: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)),
);
};
}