如何在createAsyncThunk中触发rejected状态展示错误消息

问题根源 #

这是fetch API本身的设计特性：fetch 只有在网络请求完全失败（比如无网络、跨域被拦截、DNS解析失败等）时才会抛出异常，返回4xx、5xx类的状态码都属于「请求成功完成」，默认不会触发Promise.reject，所以createAsyncThunk会默认进入fulfilled状态。

你当前的实现是否正确 #

你的修改是完全正确的，是符合fetch使用规范的标准处理方式，核心逻辑就是主动判断response.ok属性（该属性在状态码为2xx时为true，其余情况为false），遇到错误主动触发拒绝状态。

更优化的实现方案 #

你当前的写法可以进一步完善，支持传递具体错误信息，方便上层展示更精准的错误提示，不需要只依赖通用的错误状态：

优化点说明 #

• 用createAsyncThunk提供的rejectWithValue工具方法传递自定义错误内容
• 同时捕获网络层面的异常，覆盖所有错误场景
• 支持读取接口返回的自定义错误消息

优化后代码示例 #

export const searchWeather = createAsyncThunk(
  "weather/searchWeather",
  async (apiAddress, { rejectWithValue }) => {
    try {
      const response = await fetch(apiAddress);
      if (!response.ok) {
        // 优先读取接口返回的错误信息，没有的话用状态码生成通用提示
        const errorInfo = await response.json().catch(() => {
          return { msg: `请求失败，状态码：${response.status}` }
        })
        return rejectWithValue(errorInfo)
      }
      const data = await response.json();
      return data;
    } catch (networkErr) {
      // 处理网络中断、跨域等底层错误
      return rejectWithValue({ msg: networkErr.message || '网络异常，请检查连接后重试' })
    }
  }
);

同时可以修改rejected的回调，拿到具体错误信息存储：

.addCase(searchWeather.rejected, (state, action) => {
  state.isLoading = false;
  state.hasError = true;
  state.errorMsg = action.payload?.msg || '未知错误'
});

其他可选方案 #

如果你的项目允许更换请求库，也可以换成axios，axios的默认行为就是4xx、5xx状态码会自动抛出异常，不需要手动判断响应状态，能省去这部分判断逻辑。

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