如何使用 createAsyncThunk 显示拒绝消息？答案

【问题标题】：How to show reject message with createAsyncThunk?如何使用 createAsyncThunk 显示拒绝消息？
【发布时间】：2021-11-26 10:16:48
【问题描述】：

我想在我的 API 提取引发错误时显示错误消息，但这个错误实际上得到了满足，因此在额外的减速器中，被拒绝的部分根本不会被调用。

    export const searchWeather = createAsyncThunk(
      "weather/searchWeather",
      async (apiAddress) => {
        const response = await fetch(apiAddress);
        const data = await response.json();
        return data;
      }
    );

................................................................................

      extraReducers: (builder) => {
        builder
          .addCase(searchWeather.pending, (state) => {
            state.isLoading = true;
            state.hasError = false;
          })
          .addCase(searchWeather.fulfilled, (state, action) => {
            state.weather = action.payload;
            state.isLoading = false;
            state.hasError = false;
          })
          .addCase(searchWeather.rejected, (state) => {
            state.isLoading = false;
            state.hasError = true;
          });
      },

这样，即使我收到 404 错误，它仍然会得到满足而不是被拒绝。

我所做的是以这种方式在我的异步函数中包含Promise.reject()：

export const searchWeather = createAsyncThunk(
  "weather/searchWeather",
  async (apiAddress) => {
    const response = await fetch(apiAddress);
    if (!response.ok) {
        return Promise.reject();
      }
    const data = await response.json();
    return data;
  }
);

它确实可以毫无问题地工作，并显示我在其他地方定义的错误消息。

但我想知道这是否真的是正确的方法，或者是否有更好的解决方案。

【问题讨论】：

标签： javascript reactjs redux react-redux redux-toolkit

【解决方案1】：

这几乎是正确的方法 - 在非 2xx 状态代码上 fetch 不会 throw。

语义学可以改变一点——你通常要么抛出要么返回rejectWithValue：

    if (!response.ok) {
        throw new Error("response was not ok")
      }

或

    if (!response.ok) {
        return thunkApi.rejectWithValue("response was not okay")
     }

【讨论】：