Redux中如何先完成getThis()再执行其余Promise.all请求？

你的核心问题是原来用Promise.all同时触发所有请求，但getThis()的结果是其他请求的依赖，所以必须等它彻底完成后再执行后续操作。好在你的getThis()实现已经返回了一个Promise（Thunk内部的new Promise），这让我们可以轻松实现串行+并行的组合逻辑。

方案1：使用.then()链式调用 #

这种方式适合习惯传统Promise写法的场景：

return function (dispatch, getState) {
  // 先执行getThis，等待它的API请求和action dispatch完成
  dispatch(getThis())
    .then(() => {
      // getThis完成后，并行执行剩下的三个请求（它们之间无依赖的话可以并行）
      return Promise.all([
        dispatch(getThat()),
        dispatch(getThese()),
        dispatch(getThose())
      ]);
    })
    .then(() => {
      // 所有请求完成后，获取最新状态并dispatch最终action
      const state = getState();
      dispatch({ /* 这里填入你的目标action */ });
    })
    .catch(err => {
      console.error('请求出错:', err);
    });
}

为什么这样可行？ #

dispatch(getThis())会返回getThis()内部的Promise，这个Promise会在axios.get请求完成、并且FETCH_THIS action被dispatch到Redux后才resolve。此时Redux state里已经有了getThis()返回的数据，后续的getThat()等请求就可以安全地依赖这个状态了。

方案2：使用async/await（更简洁易读） #

如果你的环境支持ES2017+，推荐用async/await让异步代码看起来更像同步逻辑：

return async function (dispatch, getState) {
  try {
    // 等待getThis完全执行完成
    await dispatch(getThis());
    
    // 并行执行剩下的三个请求，提高效率
    await Promise.all([
      dispatch(getThat()),
      dispatch(getThese()),
      dispatch(getThose())
    ]);
    
    // 获取最新状态，dispatch最终的action
    const state = getState();
    dispatch({ /* 这里填入你的目标action */ });
  } catch (err) {
    console.error('请求出错:', err);
  }
}

小优化：完善getThis()的Promise逻辑 #

你的getThis()实现里，resolve(dispatch(...))其实可以简化——我们只需要标记Promise完成，不需要返回dispatch的结果，所以可以改成这样（不影响功能，但更清晰）：

export function getThis() {
  return function (dispatch, getState) {
    return new Promise((resolve, reject) => {
      axios.get('api/this/' + lienBuild)
        .then((response) => {
          dispatch({type: "FETCH_THIS", data: response.data});
          resolve(); // 只标记Promise完成即可
        })
        .catch(reject); // 别忘了捕获axios的错误，传递给外层
    });
  };
}

这样如果axios.get失败，错误会被外层的catch捕获，避免遗漏错误处理。

内容的提问来源于stack exchange，提问作者Zeyukan Ich'