如何为来自 axios.get 的响应使用类型

Posted 2023-02-22

【中文标题】如何为来自 axios.get 的响应使用类型

【英文标题】：how to use a type for the response from axios.get

【发布时间】：2019-12-28 22:41:14

【问题描述】：

我有一个通过 Axios 获取数据的简单代码：

const response= await axios.get("blabla");

现在我正在尝试使用打字稿。

当我将类型添加到 get 方法时，它会起作用：

const response= await axios.get<Todo[]>("blabla");

但我需要的是这样的：

const response:Todo[] = await axios.get("blabla");

但如果我这样做，我会在response.data 上收到错误消息：类型“Todo[]”上不存在属性“数据”

所以 2 个问题： 1）为什么第一种方法没有发生？ 2）第二种方式怎么做？

【问题讨论】：

response 不是Todo[] 类型。改为这样做：const response: Todo[] = (await axios.get(...)).data

@dziraf 照你说的做了，但还是有同样的问题

您确定 BE 返回的正是Todo 的列表吗？

是的，我 100% 确定

@rickdenhaan 您能否发布一个包含代码的完整答案？确实感谢您的帮助

【参考方案1】：

axios.get() 返回一个AxiosResponse<any> 对象，其中response.data 是any。

axios.get<Todo[]>() 返回一个AxiosResponse<Todo[]> 对象，其中response.data 是Todo[]。

所以你可以输入response：

const response: AxiosResponse<Todo[]> = await axios.get("blabla");

【讨论】：

response.page, response.status 呢？不会以这种方式输入。我只是这样工作的：http.get<Breweries[], responseData<Breweries[]>>('/breweries') 但看起来太冗长了。

@AlexanderKim 你在使用 Axios 吗？一个 Axios 响应对象 does not have 一个 .page 属性。

是的，确实，对不起，我在 nuxt 插件中使用 axios：axios.nuxtjs.org/usage/#-shortcuts，因此我很困惑。