TypeScript中axios报results不存在于AxiosResponse类型解决方法

Axios 请求返回的默认响应对象是固定结构：

interface AxiosResponse<T = any> {
  data: T; // 后端实际返回的响应体存在这个字段里
  status: number;
  statusText: string;
  headers: any;
  config: AxiosRequestConfig;
  request?: any;
}

你给axios.get传入的泛型QuestionResponse，是用来标注上面结构里data字段的类型，不是整个响应对象的类型。你之前直接在响应对象顶层解构results，但results实际是嵌套在data字段下的，自然会报属性不存在的错误。
另外原代码里还有个隐藏逻辑bug：shuffleArray([query.correct_answer, query.incorrect_answers])会把整个incorrect_answers数组作为单个元素塞进新数组，最终得到嵌套结构的答案列表，需要展开incorrect_answers。

两种方案选其一即可：

方案1：不改动现有axios封装，调整解构层级 #

直接从响应对象中先解构出data，再从data里取results，修改fetchQuestions的请求逻辑：

// 注意QuestionResponse要放在能被引用到的作用域里
interface QuestionResponse {
  results: Question[]
}

export const fetchQuestions = async (amount: number, difficulty: Difficulty) => {
    try {
        // 泛型标注data的类型，先解构出data
        const { data } = await axios.get<QuestionResponse>(`api.php?amount=${amount}&difficulty=${difficulty}&type=multiple`)
        return data.results.map((query) => (
            {
                ...query,
                // 修正数组嵌套的bug，展开错误答案数组
                answers: shuffleArray([query.correct_answer, ...query.incorrect_answers])
            }
        ))
    } catch (error) {
        throw error;
    }
}

方案2：修改axios全局封装，统一返回响应体数据 #

如果不想每次写请求都多解构一层data，可以在axios.ts配置文件里加响应拦截器，直接返回后端响应的data字段：

import axios from "axios";

const request = axios.create({
    baseURL: process.env.API_ENDPOINT,
    headers: {
        "Content-type": "application/json"
    }
});

// 响应拦截器直接剥离外层AxiosResponse结构，返回后端实际数据
request.interceptors.response.use(
    (res) => res.data,
    (err) => Promise.reject(err)
);

export default request;

改完封装后，业务层await拿到的直接就是后端返回的data对象，这时候你之前的泛型写法可以直接生效，不需要额外解构data：

// 此时泛型直接标注await的返回值类型
const { results } = await axios.get<QuestionResponse>(`api.php?amount=${amount}&difficulty=${difficulty}&type=multiple`)

同样记得修正shuffleArray里的数组展开问题。

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