Redux Toolkit中createAsyncThunk无法捕获请求错误致崩溃怎么办

核心是两个逻辑误区：

• 你写的catch块有分支遗漏：只有异常满足e instanceof Error时才会调用rejectWithValue，其他未知异常场景下函数没有任何返回或抛出，会直接导致createAsyncThunk内部状态流转混乱。
• createAsyncThunk的状态机制和你手写的thunk不一样：你手写的thunk在catch块里只派发错误action，没有向外抛出错误，所以整个thunk返回的Promise始终是resolved状态，自然不会触发未捕获错误。但createAsyncThunk只要进入rejected状态——不管是请求报错还是你主动调用rejectWithValue——返回的Promise就会被标记为rejected。如果你在组件里dispatch thunk之后没主动捕获这个rejection，浏览器就会抛出未捕获的Promise异常，要是开发者工具开了「异常暂停」，应用直接就崩了。

按以下三步调整即可：

1. 补全createAsyncThunk的异常捕获逻辑，覆盖所有错误场景

import type { AxiosError } from 'axios';

export const fetchUsers = createAsyncThunk(
    'user/fetchAll',
    async (_, {rejectWithValue}) => {
        try {
            const response = await axios.get<IUser[]>('https://jsonplaceholder.typicode.com/use2rs')
            return response.data
        } catch (e) {
            // 处理axios请求类错误
            if ((e as AxiosError).isAxiosError) {
                return rejectWithValue((e as AxiosError).response?.data?.message || (e as AxiosError).message)
            }
            // 处理普通JS错误
            if (e instanceof Error) {
                return rejectWithValue(e.message)
            }
            // 兜底处理未知错误
            return rejectWithValue('未知请求错误')
        }
    }
)

2. 在slice的extraReducers中匹配createAsyncThunk自动生成的三个状态，替换你之前手写的三个同步action逻辑

interface UserState {
  users: IUser[];
  loading: boolean;
  error: string | null;
}

const initialState: UserState = {
  users: [],
  loading: false,
  error: null
}

const userSlice = createSlice({
    name: 'user',
    initialState,
    reducers: {
        // 其他同步逻辑保留，删除原来手动写的usersFetching/usersFetchingSuccess/usersFetchingError三个reducer
    },
    extraReducers: (builder) => {
        builder
            .addCase(fetchUsers.pending, (state) => {
                state.loading = true;
                state.error = null;
            })
            .addCase(fetchUsers.fulfilled, (state, action) => {
                state.loading = false;
                state.users = action.payload;
            })
            .addCase(fetchUsers.rejected, (state, action) => {
                state.loading = false;
                state.error = action.payload as string;
            })
    }
})

export default userSlice.reducer;

3. 调用thunk时主动捕获Promise rejection，避免浏览器抛错
   如果不需要在组件层处理请求结果，dispatch时加空catch即可：

useEffect(() => {
  dispatch(fetchUsers()).catch(() => {});
}, [dispatch]);

如果需要在组件层拿到成功/失败结果做额外逻辑（比如成功后跳转、失败后弹提示），用unwrap()方法展开Promise即可：

useEffect(() => {
  const loadData = async () => {
    try {
      const userList = await dispatch(fetchUsers()).unwrap();
      // 请求成功，拿userList做后续逻辑
    } catch (err) {
      // 请求失败，拿err做组件级提示
    }
  };
  loadData();
}, [dispatch]);

注意：rejectWithValue的作用只是自定义rejected状态的payload内容，不会改变thunk返回Promise的rejected状态，这是和你手写thunk最核心的差异，必须主动捕获rejection才不会触发浏览器异常。

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