createAsyncThunk中Premature Promise Fulfillment问题如何解决

问题根因 #

你的代码问题出在第一个请求的.then回调中没有返回第二个axios请求对应的Promise，导致外层Promise链没有等待第二个请求执行完成就直接变为已完成状态，createAsyncThunk就会提前触发fetchUserInfo.fulfilled。

修复方案 #

方案1：修改原有Promise链式写法 #

只需要在第一个请求的.then里新增return，把第二个请求的Promise抛出到外层链即可：

export const fetchUserInfo = createAsyncThunk(
  'fetchUserInfo',
  async (param1) =>
    axios
      .get(process.env.FIRST_CALL, {
        params: { code: param1 },
      })
      .then((firstCallResponse) => {
        // 新增return，把第二个请求的Promise接入外层链式
        return axios
          .get(process.env.SECOND_CALL, {
            headers: {
              token: firstCallResponse.data.token,
            },
          })
          .then((secondCallResponse) => {
            return {
              status: LoginStatus.SUCCESS,
              payload: { firstCallResponse, secondCallResponse },
            }
          })
          .catch((error) => {
            console.log(error)
            return { status: LoginStatus.SECONDCALL_FAILURE, payload: {} }
          })
      })
      .catch((error) => {
        console.log(error)
        return { status: LoginStatus.FIRSTCALL_FAILURE, payload: {} }
      }),
)

方案2：使用async/await写法（更推荐，可读性更高） #

用async/await语法可以避免Promise链式漏写return的问题，逻辑更清晰：

export const fetchUserInfo = createAsyncThunk(
  'fetchUserInfo',
  async (param1) => {
    // 执行第一个请求
    let firstCallResponse
    try {
      firstCallResponse = await axios.get(process.env.FIRST_CALL, {
        params: { code: param1 },
      })
    } catch (error) {
      console.log(error)
      return { status: LoginStatus.FIRSTCALL_FAILURE, payload: {} }
    }

    // 执行第二个请求
    try {
      const secondCallResponse = await axios.get(process.env.SECOND_CALL, {
        headers: { token: firstCallResponse.data.token }
      })
      return {
        status: LoginStatus.SUCCESS,
        payload: { firstCallResponse, secondCallResponse }
      }
    } catch (error) {
      console.log(error)
      return { status: LoginStatus.SECONDCALL_FAILURE, payload: {} }
    }
  }
)

两种写法都可以保证所有请求无论成功失败，全部执行完成后才会返回最终结果给createAsyncThunk，触发对应状态的reducer。

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