以下是两个代码示例:
onLayout()
或
onClick() { // click-handler of a button
axios.get(someUrl)
.then(response => {
// setData is a fn dispatching an action-creator passed through react-redux's connect()
setData(response.data);
});
}
后一种方法将在某些中间件中使用Axios,然后调度另一个操作,该操作将在商店中设置响应数据。
所以这意味着第一种方法只会发出一个动作,而第二种方法会发出两个动作。
两种方式显然似乎都有效,但我想知道最好的方法是什么。这两种方法都有缺点吗?
答案 0 :(得分:1)
关于承诺的事情是,它们的工作方式是人类会想到一个承诺。所以在你的程序中使用它们。通常IMO只有当您知道在程序工作流程的正常过程中发生事件或者您承诺结果时才应使用Promise。
所以,例如,如果你要求套接字连接,我保证只要我能够给你一个,你不必等我,继续做你的事情,我一有做了所有需要的东西,把它交还给你,我会把它交给你;您可以从需要它的角度继续工作流程。例如,(伪代码):
var Socket = new Promise(function(resolve, reject) {
resolve(do_something_to_get_a_socket());
});
Socket.then(authenticate()).then(sendData());
等。
对像onClick
这样的事件处理程序的承诺应该是为用户做某事的承诺 - 在代码中使用它来创建线程,这将完成繁重的复杂处理,同时用户仍然能够与界面进行交互。
例如,在游戏中,点击可以发射飞镖并且你保证它会在屏幕上显示动画(即使出现故障),你仍然保证它会击中目标等,但是用户没有等待履行承诺来解雇另一支飞镖。
因此,使用Promises可以让您和其他程序员更方便地使用您的程序,并使用它来使您的程序的工作流程更符合您的用例。
答案 1 :(得分:0)
我强烈建议:https://www.npmjs.com/package/redux-api-middleware
如果您只是在回调中使用axios实现此功能,那么此中间件(或其他类似功能)包含您可能不得不自己编写的一些功能。例如,它将根据AJAX调用的结果自动调度请求,成功和失败操作。
使用中间件调度此操作时,会为您处理很多事情。
{
[CALL_API]: {
endpoint: "http://example-api.com/endpoint",
method: "GET",
headers: { ... },
types: [
"GET_X_REQUEST", "GET_X_SUCCESS", "GET_X_FAILURE"
]
}
}
这样的事情会在开始加载时自动触发“GET_X_REQUEST”动作。然后在AJAX调用完成或失败时成功或失败操作(将适当的数据或错误对象附加为有效负载)。
或任何类似的中间件,其中Redux最终处理整个异步过程。