Redux-Toolkit中createAsyncThunk多请求失败时如何终止Promise.all？

问题核心在于：createAsyncThunk生成的thunk被dispatch后，返回的Promise默认总是会resolve——无论内部请求成功还是失败，因为RTK已经捕获了错误并dispatch了对应的失败action。这就导致Promise.all会等待所有resolve的Promise，无法在单个请求失败时触发整体拒绝。

解决方案：使用unwrap()方法修改Promise行为 #

RTK为异步thunk返回的Promise提供了unwrap()方法，它会返回一个新的Promise：

• 当thunk成功完成（dispatch了fulfilled action）时，该Promise resolve为thunk的payload
• 当thunk失败（dispatch了rejected action）时，该Promise reject为thunk抛出的错误

只需在每个dispatch调用后链式调用unwrap()，再传入Promise.all，就能实现“任一请求失败则整体拒绝”的逻辑。

代码示例 #

修改前的getAllData

export const getAllData = createAsyncThunk('data/getAll', async (_, { dispatch }) => {
  await Promise.all([
    dispatch(getUsers()),
    dispatch(getSettings()),
    dispatch(getClients())
  ]);
});

修改后的getAllData

export const getAllData = createAsyncThunk('data/getAll', async (_, { dispatch }) => {
  await Promise.all([
    dispatch(getUsers()).unwrap(),
    dispatch(getSettings()).unwrap(),
    dispatch(getClients()).unwrap()
  ]);
});

结合你的getUsers实现说明 #

假设你的getUsers和对应的slice逻辑如下：

export const getUsers = createAsyncThunk('users/getUsers', async () => {
  const response = await fetch('/api/users');
  if (!response.ok) {
    throw new Error('Failed to fetch users');
  }
  return response.json();
});

const usersSlice = createSlice({
  name: 'users',
  initialState: { data: [], loading: false, error: null },
  extraReducers: (builder) => {
    builder
      .addCase(getUsers.pending, (state) => {
        state.loading = true;
      })
      .addCase(getUsers.fulfilled, (state, action) => {
        state.loading = false;
        state.data = action.payload;
        state.error = null;
      })
      .addCase(getUsers.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
      });
  }
});

当getUsers内部抛出错误时，dispatch(getUsers()).unwrap()返回的Promise会直接reject该错误，此时Promise.all会立即终止并触发整体拒绝，同时getUsers对应的rejected action依然会正常触发，更新users切片的状态。

可选：自定义错误处理 #

如果需要在getAllData中统一处理错误，可以用try/catch包裹逻辑，自定义处理后重新抛出错误，让getAllData的rejected action也能被触发：

export const getAllData = createAsyncThunk('data/getAll', async (_, { dispatch }) => {
  try {
    await Promise.all([
      dispatch(getUsers()).unwrap(),
      dispatch(getSettings()).unwrap(),
      dispatch(getClients()).unwrap()
    ]);
  } catch (error) {
    // 这里可以添加全局错误处理逻辑，比如dispatch错误通知action
    throw error; // 重新抛出错误，触发getAllData的rejected action
  }
});

内容的提问来源于stack exchange，提问作者Mantoze