如何让Axios直接返回响应数据而非AxiosResponse包装对象？

当然可以！每次都写.then(res => res.data)确实有点啰嗦，咱完全可以通过自定义Axios实例+响应拦截器来搞定这个问题，还能完美适配TypeScript的类型推导，让代码清爽不少。

方法1：创建带响应拦截的自定义Axios实例 #

核心思路是给Axios实例加个响应拦截器，自动把response.data返回，省去手动提取的步骤：

import axios, { AxiosInstance, AxiosResponse } from 'axios';

// 先创建一个自定义的Axios实例（可以配置baseURL、超时时间等）
const apiClient: AxiosInstance = axios.create({
  baseURL: '/', // 替换成你的API基础地址
  timeout: 10000,
});

// 添加响应拦截器：直接返回response.data，跳过AxiosResponse包裹
apiClient.interceptors.response.use(
  (response: AxiosResponse) => response.data,
  (error) => {
    // 这里可以统一处理请求错误，比如弹窗提示、打日志
    console.error('请求出错:', error);
    return Promise.reject(error);
  }
);

方法2：封装通用请求方法（可选但更易用） #

如果想让类型推导更顺手，可以封装一个通用的GET方法，直接返回指定类型的Promise：

// 通用GET请求，传入类型T就直接返回Promise<T>
const get = async <T>(url: string): Promise<T> => {
  return apiClient.get<T>(url);
};

// 现在你的请求方法就可以简化成这样，完全不用碰response.data了！
const fetchPuppies = (): Promise<Puppy[]> => get<Puppy[]>('/puppies');
const fetchKittens = (): Promise<Kitten[]> => get<Kitten[]>('/kittens');

直接用自定义实例的写法 #

要是不想额外封装，直接用自定义实例的get方法也能行，TypeScript会自动帮你推导类型：

const fetchPuppies = (): Promise<Puppy[]> => apiClient.get<Puppy[]>('/puppies');

小提醒 #

• 别忘处理错误：拦截器里一定要写错误处理逻辑，不然请求失败时容易出现未捕获的异常。
• 类型安全依然在线：虽然拦截器返回的是data，但Axios的泛型get<T>还是会正确标记data的类型，TypeScript会帮你做好类型检查，不用担心类型丢失。

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