createAsyncThunk 抛出错误但被拒绝的案例不会被触发

Question

我正在使用以下 createAsyncThunk 删除数据库中的应用程序。

由于某种原因，提取无效。 handleFetchErrors 如果响应不正常则抛出错误

export const handleFetchErrors = (response: Response) => {
        if (!response.ok) {
            throw Error(response.statusText)
        }
}

export const deleteApplication = createAsyncThunk("applications/deleteApplication", async (data: any) => {
    try {
        const response = await fetch(`/api/application/${data.id}`, {
            method: "DELETE",
            headers: {
                'Accept': 'application/json',
                "Content-Type": "application/json",
            },
        });
        //fixme: call still gets fulfilled although I am throwing an error
        handleFetchErrors(response);
        return (data.id);
    } catch (e) {
        console.error(e);
    }
})

在我的 createSlice 中，我将这些 extraReducers 用于大写

 .addCase(deleteApplication.fulfilled, (state, action) => {
                state.status = DataFetchingStatus.succeeded
                state.applications = state.applications.filter(application => application.id !== action.payload)
            })
            .addCase(deleteApplication.rejected, (state, action) => {
                state.status = DataFetchingStatus.failed
                state.error = action.payload
            })

触发 deleteApplication.fulfilled 而不是 deleteApplication.rejected。

我是不是漏掉了什么？

Answer 1

handleFetchErrors 函数抛出一个错误，但是这个错误被 deleteApplication 捕获并且仅仅打印为控制台消息。因此，deleteApplication.rejected 永远不会被调度。我建议 (a) 不捕获错误；或者 (b) 在 catch 块中重新抛出错误。

createAsyncThunk 抛出错误但被拒绝的案例不会被触发

createAsyncThunk throws error but case rejected does not get triggered

reactjs

redux

redux-thunk