Async/Await 和 Redux Thunks：调用 'dispatch' 是不是隐式返回来自 thunk 的承诺？

Posted 2023-02-22

【中文标题】Async/Await 和 Redux Thunks：调用 \'dispatch\' 是不是隐式返回来自 thunk 的承诺？

【英文标题】：Async/Await and Redux Thunks: does calling 'dispatch' implicitly return a promise from the thunk?Async/Await 和 Redux Thunks：调用 'dispatch' 是否隐式返回来自 thunk 的承诺？

【发布时间】：2019-07-15 17:50:33

【问题描述】：

我正试图围绕“async/await”，async 函数总是返回 Promises 并在 Redux Thunks 中使用异步函数这一事实 --

我了解async 函数根据定义总是返回一个承诺。但是，如果 async 函数的最后一行不是 await 怎么办？

const foo = async (y, z) => 
  await somethingElse()
  const x = y + z;

foo 是否返回解析为“x”的Promise，因为它位于最后一行？如果不是，它返回什么Promise？

所以，在写一个 thunk 的时候，我有一个这样的函数

export const loadData = key => async (dispatch) => 
  const url = 'http://something.com/api/v1/get_key';
  const keyObj =  key ;
  const method = 'POST';
  const headers =  'Content-Type': 'application/json' ;
  const body = JSON.stringify(keyObj);

  try 
    const res = await isofetch(url,  method, headers, body );
    const data = await res.json();
    dispatch(loadDataSuccess(data));
   catch (e) 
    debug('error with fetch', e.toString());
  

loadData 返回什么？我相信dispatch 返回Promise，那么loadData 是否隐式返回Promise？

如果最后一行是，有什么区别

return dispatch(loadDataSuccess(data));

？感谢您的帮助！

【问题讨论】：

async function always 在 javascript 中返回一个 Promise。

【参考方案1】：

const foo = async (y, z) => 
  await somethingElse()
  const x = y + z;

是的，这将返回承诺。但它是未定义的，因为你还没有解决它。

Promise <resolved>: undefined

一旦 await 完成，则 foo 将获取解析的数据。

我相信 dispatch 返回一个 Promise

不，它没有。您需要从异步函数返回值，以便从 Promise 中获取已解析的数据。因此，您将使用：

return dispatch(loadDataSuccess(data));

如果您没有在异步函数中返回值，那么您需要等待该承诺以获取数据：

await foo(y, z) // without return
foo(y, z) // with return

所以从技术上讲，你认为如何处理你的异步 foo 操作。

【讨论】：

如果dispatch 没有返回承诺，你为什么还要等待呢？

@BhojendraRauniyar 好的，谢谢。实际上我认为调度返回动作（Returns (Object†): The dispatched action-redux.js.org/api/store#dispatch-我不知道我从哪里得到它返回Promise的想法。json数据被发送到reducers。我不知道明白await foo(y, z) // without return foo(y, z) // with return 的意思——await 只能在异步函数内部，不能在外部，对吧？如果没有返回，那么只会返回 undefined，对吧？

@Bergi -- 我正在等待异步 API 调用 ('somethingElse') -- 我会编辑它...

【参考方案2】：

函数本身会返回一个promise。

const res = await isofetch(url,  method, headers, body );
const data = await res.json();
dispatch(loadDataSuccess(data));

这里的 Dispatch 将发送一个 json 对象响应。不需要退货。

【讨论】：

当您说“发送 json 对象响应”时。你的意思是json响应对象将被发送到适当的reducer，对吧？我只是好奇这个函数中发生了什么，正如你所说，它返回一个承诺......

是的，这正是我的意思。您并不关心函数将在您的情况下返回什么，您只关心将 json 对象分派给减速器，这将发生。如果您不是，我建议您使用 Redux Devtools，这样您就可以轻松跟踪每个操作的有效负载等等。