Redux Toolkit中createAsyncThunk请求错误不触发rejected动作如何解决

最常见触发原因：Axios全局响应拦截器吞了错误 #

你大概率在项目全局配置了Axios的响应拦截器，错误处理分支没有显式返回Promise.reject(err)，导致4xx/5xx等错误状态的请求被转化为了成功状态的Promise，createAsyncThunk自然不会触发rejected动作。
请检查你的Axios全局配置，确保拦截器错误分支写法如下：

axios.interceptors.response.use(
  (response) => response,
  (error) => {
    // 你的全局错误处理逻辑（比如弹窗提示错误）写在这里
    console.error('请求出错', error)
    // 必须加这行，把错误继续抛出，才能让后续的catch和createAsyncThunk识别到请求失败
    return Promise.reject(error)
  }
)

其他可能的排查点 #

• 检查你部署/本地调试的服务器是否配置了前端路由history模式的fallback规则：所有不存在的路径都返回index.html。这种情况下你的错误URL请求实际返回的是200状态的HTML内容，自然不会触发404错误。你可以打开浏览器控制台的网络 tab，查看对应请求的实际响应状态码，确认是否真的返回了404。
• 如果你在createAsyncThunk里使用了try/catch和rejectWithValue，请确保你在catch分支是返回rejectWithValue的返回值，正确写法如下：

export const fetchListings = createAsyncThunk(
  "listings/requestStatus",
  async (_, { rejectWithValue }) => {
    try {
      const response = await axios.get("lorem-ipsum-dolor-sit-amet");
      return response.data;
    } catch (err) {
      // 必须return rejectWithValue，不要只是调用它
      return rejectWithValue(err.response?.data || err.message)
    }
  }
);

• 你可以在调用thunk的位置加unwrap()方法验证错误是否真的被抛出：

dispatch(fetchListings())
  .unwrap()
  .then(data => console.log('请求成功', data))
  .catch(err => console.log('请求失败', err))

如果catch分支能正常打印错误，说明rejected动作确实被触发了，你可以检查你的selector是否正确读取了error字段。

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