reactjs - Egenskapen 'results' finns inte på typen 'AxiosResponse' med axios

Jag försöker göra ett API-anrop med async/await med TypeScript och få åtkomst till results-arrayen i svaret. Men det ger felet Property 'results' does not exist on type 'AxiosResponse'

Svarformat är:

data: {
  results: []
}

axios.ts

import axios from "axios";

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

api.ts

import axios from "./axios";
import { shuffleArray } from "../utils";

export type Question = {
    category: string;
    correct_answer: string;
    difficulty: string;
    incorrect_answers: string[];
    question: string;
    type: string;
}

export type QuestionAnswers = Question & { answers: string[] }

export type Difficulty = "easy" | "medium" | "hard"

export const fetchQuestions = async (amount: number, difficulty: Difficulty) => {
    try {
        const { results } = await axios.get(`api.php?amount=${amount}&difficulty=${difficulty}&type=multiple`)
        return results.map((query: Question) => (
            {
                ...query,
                answers: shuffleArray([query.correct_answer, query.incorrect_answers])
            }
        ))
    } catch (error) {
        throw error;
    }
}

Jag försökte åtgärda felet genom att definiera ett gränssnitt för svar

interface QuestionResponse {
  results: Question[]
}

// and in api request
axios.get<QuestionResponse>(endpoint)

Hur kan jag åtgärda detta fel?

Svar #1

Axios svarsschema ser ut som följer:

{
  data: {},
  status: 200,
  statusText: 'OK',
  headers: {},
  config: {},
  request: {}
}

Det betyder att dina results kommer att vara tillgängliga under data.results. Ditt API-anrop bör se ut så här:

const { data } = await axios.get(`api.php?amount=${amount}&difficulty=${difficulty}&type=multiple`)

Svar #2

Den primära återgången av dess data i fallet med gränssnittet kommer att vara datatypen, men returnerar fortfarande data: INTERFACE | ANY

const { data } = await axios.get(`api.php?amount=${amount}&difficulty=${difficulty}&type=multiple`)
        return data.results.map((query: Question) => (...

så data om du gör nedanstående har du just skrivit in ditt svar data

const {data} = await axios.get<QuestionResponse>()....

Relaterade artiklar