1

我正在使用 Redux ToolkitcreateAsyncThunk和Axios异步请求。即使我输入了一个明显错误的 URL（应该返回 404）作为端点，似乎也永远不会发送被拒绝的操作。我知道 StackOverflow 中有很多与此相关的问题，但肯定有一些我无法理解的东西，因为我已经好几个小时没能解决这个问题了。

这是我的 Redux 切片文件：

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";

const name = "listings";
const initialState = {
  data: [],
  loading: false,
  error: null
};

export const fetchListings = createAsyncThunk(
  "listings/requestStatus",
  async () => {
    const response = await axios.get(
      "lorem-ipsum-dolor-sit-amet"
      //"https://jsonplaceholder.typicode.com/todos"
    );
    return response.data;
  }
);

const slice = createSlice({
  name,
  initialState,
  extraReducers: (builder) => {
    builder.addCase(fetchListings.pending, (state) => {
      console.log("pending");
      state.data = [];
      state.loading = true;
      state.error = null;
    });
    builder.addCase(fetchListings.fulfilled, (state, action) => {
      console.log("fulfilled");
      state.data = action.payload;
      state.loading = false;
      state.error = null;
    });
    builder.addCase(fetchListings.rejected, (state, action) => {
      console.error("rejected");
      state.data = [];
      state.loading = false;
      state.error = action.error.message;
    });
  }
});

export const selectListings = (state) => ({
  data: state[name].data,
  loading: state[name].loading,
  error: state[name].error
});
export default slice.reducer;

我尝试尝试/捕获 Axios 调用并使用rejectWithValue帮助程序，但似乎没有任何改变。这是一个复制问题的代码框。Redux slice 位于store/listings并导致组件src/Listings失败。

如果您删除 lorem-ipsum... 错误的 uri 并取消注释 jsonplaceholder 端点，您可以很容易地看到一切正常。故意使用错误的 uri 来触发 404 错误并获得分派的拒绝操作，不幸的是，这根本没有发生。

4

1 回答 1

1

我认为这是您的测试网址的问题。

我在这里分叉：https ://codesandbox.io/s/youthful-napier-6s51m

使用保证 404 响应的服务似乎一切正常：https ://mock.codes/404

因此， fetchListings.rejected 案例被执行。

于 2021-09-27T08:40:28.093 回答