React中createAsyncThunk调用类未等待响应的问题排查

核心问题 #

你的代码存在回调模式与Promise/async-await混用的问题，导致await AuthService.login(...)完全不会等待请求完成：

• AuthService.login虽声明了async，但内部仅实例化RequestProvider，未返回任何Promise，await对其无效
• RequestProvider的构造函数和postRequest依赖回调函数处理异步结果，没有将异步操作包装为Promise

分步修改方案 #

1. 重构RequestProvider，用Promise替代回调 #

将类内的回调逻辑改为返回Promise，让异步操作可被await：

import { loginAxiosConfig } from "../../../../axiosConfig";

export default class RequestProvider {
  constructor(requestType, methodName, apiName, requestQueryParams, requestPayload) {
    this.requestType = requestType;
    this.methodName = methodName;
    this.apiName = apiName;
    this.requestQueryParams = requestQueryParams;
    this.requestPayload = requestPayload;
  }

  postRequest() {
    if (this.methodName === "login") {
      return loginAxiosConfig.post(
        `/${this.apiName}/${this.methodName}?${this.requestQueryParams}`,
        this.requestPayload
      ).catch(() => {
        // 保留原有错误返回逻辑
        return false;
      });
    }
    return Promise.reject(new Error("不支持的POST方法"));
  }

  getRequest() {
    return Promise.resolve(this.requestType);
  }

  execute() {
    if (this.requestType === "POST") {
      return this.postRequest();
    }
    if (this.requestType === "GET") {
      return this.getRequest();
    }
    return Promise.reject(new Error("不支持的请求类型"));
  }
}

2. 修改AuthService.login，返回Promise #

现在RequestProvider可返回Promise，AuthService.login直接返回该Promise，移除回调参数：

import RequestProvider from '../provider/service.provider';

const login = async (payload) => {
  const request = new RequestProvider(
    "POST", 
    "login", 
    "api_name", 
    "companyId=100", 
    payload
  );
  return request.execute();
};

const AuthService = {
  login
};

export default AuthService;

3. 修正createAsyncThunk中的调用 #

现在可正常await AuthService.login，并正确返回结果或处理错误：

export const login = createAsyncThunk("login", async (oParams, thunkAPI) => {
  try {
    const response = await AuthService.login(oParams);
    return response;
  } catch (e) {
    return thunkAPI.rejectWithValue(e.response || e);
  }
});

原代码失效的本质原因 #

• async函数若未返回Promise，await会直接将其视为已完成的Promise，不会等待内部异步操作
• 原AuthService.login仅同步创建RequestProvider实例，await会立即执行后续逻辑，完全不会等待axios请求完成
• 回调函数内的return response无法被外层async函数捕获，二者属于独立执行上下文

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