当我使用 redux-thunk 时，promise 与 async 有什么不同？

Question

嗨，我有点困惑 redux thunk 的工作原理。 例如，

此代码有效

代码1

export const getAllUsers = () => (dispatch) => {
  axios
    .get("https://reqres.in/api/users?page=2")
    .then((res) => {
      console.log(res);
      dispatch({ type: GET_ALL_USER, payload: res.data.data });
    })
    .catch((e) => console.log(e));
};

但此代码不起作用...

代码2

export const fetchComments = () => () => {
  axios
    .get("https://jsonplaceholder.typicode.com/posts/1/comments")
    .then((res) => {
      return {
        type: FETCH_COMMENTS,
        payload: res.data,
      };
    });
};

但是这段代码是有效的..

代码3

 export const fetchComments = async() => {
     let res = await axios.get("https://jsonplaceholder.typicode.com/posts/1/comments")
     return {
         type: FETCH_COMMENTS,
         payload:res.data
       }
   ;
 };

所以我真的很想知道为什么 code2 不工作以及为什么 code3 工作。

Answer 1

为什么代码 #1 有效？ - 调度

这个函数调用一个 dispatch，让 redux-thunk 知道下一步该做什么

export const getAllUsers = () => (dispatch) => {
  axios
    .get("https://reqres.in/api/users?page=2")
    .then((res) => {
      console.log(res);
      dispatch({ type: GET_ALL_USER, payload: res.data.data }); // Calling a dispatch, which is a clear trigger for the middleware
    })
    .catch((e) => console.log(e));
};

为什么代码 #2 不起作用 - 更高的范围不是异步的

你不能在这里调用await fetchComments，因为你从来没有将fetchComments定义为异步的，所以redux-thunk没有得到你期望的结果

export const fetchComments = () => () => { // This is a plain function, noy an asynchronous one, meaning that the middlware won't get the result it is expecting
  axios
    .get("https://jsonplaceholder.typicode.com/posts/1/comments")
    .then((res) => {
      return {
        type: FETCH_COMMENTS,
        payload: res.data,
      };
    });
};

为什么代码 #3 有效 - 更高的范围是异步的

这可以称为await fetchComments，因为你已经在async () => ...中定义了它，所以redux-thunk理解它

 export const fetchComments = async() => { // Clearly defined to be async
     let res = await axios.get("https://jsonplaceholder.typicode.com/posts/1/comments")
     return {
         type: FETCH_COMMENTS,
         payload:res.data
       }
   ;
 };

所以回答你的问题，当你使用 redux-thunk 时，promise 和 async 有什么区别？

getAllUsers() => 这将在 Promise 完成后触发 dispatch({...})，这就是它起作用的原因 - 与 Promise 与异步无关

fetchComments() => 这将返回一个普通函数，返回一个对象，在 Promise 完成后，这对于 redux-thunk 来说是不合适的

async fetchComments() => 这可以通过 await 正确处理以获取完成的结果（对象），就像上面的函数一样，但它可以处理，因为它是异步的。

所以，问题不在于 Promise 与 Async，而在于您如何调用函数并定义它们，您可以使用 Promise 或 Async 来实现两者