Redux Toolkit的createAsyncThunk两种写法运行效果不同原因问询

你第一种写法存在三个问题，共同导致了无论请求结果如何都会进入rejected状态：

• 没有返回axios请求生成的Promise
  createAsyncThunk需要payloadCreator回调返回Promise来监听异步请求的状态，你第一种写法只执行了axios.get()但没有将它return，回调默认返回undefined，createAsyncThunk会将其识别为同步执行完成的函数，不会等待请求结果返回。
• 回调参数顺序错误
  createAsyncThunk的payloadCreator回调第一个参数是你dispatch该thunk时传入的自定义参数，第二个参数才是thunkAPI对象。你第一种写法直接将thunkAPI写在第一个参数位，实际运行时拿到的是undefined，后续调用不存在的方法自然会抛出异常。
• API名称大小写错误
  正确的错误抛出方法是thunkAPI.rejectWithValue（首字母小写），你写的大写开头的RejectWithValue本身就是不存在的属性，调用时会直接抛出异常，所有异常都会被createAsyncThunk捕获，触发rejected状态。

第二种async/await写法刚好避开了这三个问题：

• async函数默认返回Promise，createAsyncThunk可以正确监听异步状态
• 你正确写了参数顺序，第一个参数用_占位没有传自定义参数，第二个才是thunkAPI
• 调用的是正确小写的rejectWithValue方法，异常可以被正常处理不会额外抛错

如果你想要用.then/.catch的写法，修改为以下代码即可正常运行：

export const fetchEnv = createAsyncThunk("admin/fetchEnv", (_, thunkAPI) => {
  // 增加return返回Promise
  return axios
    .get("http://10.0.0.6:5000/admin/getAllEnv")
    .then((response) => response.data)
    .catch((error) => {
      console.log(error);
      // 替换为小写的正确API名
      return thunkAPI.rejectWithValue(error);
    });
});

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