RTK Query自定义$.ajax() baseQuery时错误对象为空求助

你的问题核心是自定义baseQuery返回的错误对象不符合RTK Query的结构要求，导致Hook无法正确识别错误并返回空对象。以下是具体修复步骤：

1. 错误对象必须包含status字段 #

RTK Query要求错误对象必须包含status（HTTP状态码），仅返回data会被视为无效错误，进而被忽略。你需要从jqXHR中获取状态码并添加到错误对象中。

2. 修正Promise处理逻辑 #

不需要用Promise.resolve()包裹$.ajax调用，jQuery的$.ajax本身返回一个thenable对象，可以直接作为Promise返回。

3. 完善BaseQueryFn的类型定义 #

确保BaseQueryFn的泛型参数匹配输入输出类型，避免类型不兼容导致的隐性问题。

修正后的AjaxBaseQuery.ts代码 #

import { BaseQueryFn } from '@reduxjs/toolkit/query/react';

// 定义输入输出的类型约束
type BaseQueryArgs = {
  url: string;
  method?: string;
  params?: Record<string, string>;
  options?: JQuery.AjaxSettings;
};

export const ajaxBaseQuery = ({ baseUrl = '' }: { baseUrl?: string }): BaseQueryFn<BaseQueryArgs, unknown, unknown> => {
  return ({ url, method = 'GET', params, options }) => {
    const ajaxOptions: JQuery.AjaxSettings = {
      url: `${baseUrl}${url}`, // 替换为你的getUrl拼接逻辑
      type: method,
      data: params,
      ...options,
    };

    return $.ajax(ajaxOptions)
      .then((response) => ({ data: response }))
      .catch((xhr: JQuery.jqXHR) => ({
        error: {
          status: xhr.status, // 必须添加HTTP状态码
          data: xhr.responseJSON || xhr.responseText, // 兼容不同错误响应格式
        },
      }));
  };
};

补充说明 #

• 确保成功响应时返回{ data: 你的响应数据 }结构，之前的getSuccess函数需符合此要求。
• 查询接口（builder.query）默认请求方式建议用GET而非PUT，避免请求方式不匹配导致的异常。
• 组件中需正确解构错误对象：

  export default function GameScoresView(): JSX.Element {
    const { data, error, isError } = useGetSomeListQuery();
    
    if (isError) {
      console.log('错误详情:', error); // 现在能正确获取错误数据
    }
    // ...
  }
  

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