正文 

当前位置： 首页 > 知识 >

如何在 axios 请求中为对象数组设置正确的类型？

     2023-02-22     29

关键词：

【中文标题】如何在 axios 请求中为对象数组设置正确的类型？【英文标题】：how to set proper types in axios request for array of objects? 【发布时间】：2021-09-21 12:56:17 【问题描述】：

我正在尝试为 api 请求编写 axios 服务，但我无法理解此错误：

类型“AxiosResponse”缺少以下属性 键入“用户 []”：长度、弹出、推送、连接和 26 个更多.ts(2740) const 响应：AxiosResponse

我的代码是这样的：

import axios from 'axios';
import User from 'src/models/User';

const http = axios.create(
  baseURL: process.env.API,
  headers:  'Content-Type': 'application/json' ,
);

export async function getAllUsers(): Promise<User[]> 
  const response = await http.get<User[]>('users/');
  return response;


export async function getSingleUser(itemId: string): Promise<User> 
  const response = await http.get<User>(`/$itemId`);
  return response;

当然，我没有理解一些基本的打字稿概念。你能帮帮我吗？

如果响应将被包装在“数据”属性中，应该怎么做？

【问题讨论】：

【参考方案1】：

您缺少的是 axios 函数（例如 get）返回 AxiosInstance 而不是您期望的实际对象这一事实。您应该访问 AxiosInstance 的 data 属性以获得您期望的值：

export async function getAllUsers(): Promise<User[]> 
  const response = await http.get<User[]>('users/');
  return response.data;

【讨论】：

【参考方案2】：

您应该为http.get() 方法返回res.data，请参阅Response Schema

import axios from 'axios';

interface User 

const http = axios.create(
  baseURL: process.env.API,
  headers:  'Content-Type': 'application/json' ,
);

export async function getAllUsers(): Promise<User[]> 
  const response = await http.get<User[]>('users/').then(res => res.data)
  return response;


export async function getSingleUser(itemId: string): Promise<User> 
  const response = await http.get<User>(`/$itemId`);
  return response;

TypeScript Playground

【讨论】：

如何在 CakePHP 中为 JSON 返回正确的内容类型？

】如何在CakePHP中为JSON返回正确的内容类型？【英文标题】：Howtoreturnthecorrectcontent-typeforJSONinCakePHP?【发布时间】：2010-11-1614:44:51【问题描述】：我正在尝试为通过AJAXGET请求访问的JSON响应设置内容类型标头。我已经关注博客和面... 查看详情

如何在 Core Data 中为多个对象（相同实体类型）生成数组实例？

】如何在CoreData中为多个对象（相同实体类型）生成数组实例？【英文标题】：HowdoIgenerateaninstanceofanarrayformultipleobjects(ofthesameEntitytype)inCoreData?【发布时间】：2016-11-2816:55:48【问题描述】：我对编程很陌生，所以希望我能正确解... 查看详情

React，如何在 axios 请求的对象中对数组进行包含

】React，如何在axios请求的对象中对数组进行包含【英文标题】：React,howtodoanincludeonanarraywithinanaxiosrequestedobject【发布时间】：2020-01-1713:22:34【问题描述】：我正在做一个项目，我有一个可以有多个类别的项目。类别ID作为数组存... 查看详情

如何在数据框中为 Pandas 日期时间对象正确设置 Datetimeindex？

】如何在数据框中为Pandas日期时间对象正确设置Datetimeindex？【英文标题】：HowdoIproperlysettheDatetimeindexforaPandasdatetimeobjectinadataframe?【发布时间】：2015-01-1720:51:13【问题描述】：我有一个熊猫数据框：latlngaltdaysdatetime040.003834116.32146... 查看详情

对象数组作为请求 POST axios 的参数

】对象数组作为请求POSTaxios的参数【英文标题】：arrayofobjectsasparametersonrequestPOSTaxios【发布时间】：2018-09-2116:40:18【问题描述】：我正在使用vue.js开发一个项目并处理我使用Axios的AJAX请求，我想知道是否可以将一个参数作为参数... 查看详情

如何在我的 GraphQL 中为对象中的对象列表定义类型

】如何在我的GraphQL中为对象中的对象列表定义类型【英文标题】：HowtodefineatypeinmyGraphQLforlistofObjectsinanobject【发布时间】：2020-09-2910:32:28【问题描述】：我对graphql还是很陌生，不知道如何在对象中为我的对象列表定义类型，我... 查看详情

在 s3 aws 中为对象创建签名 url 时如何设置内容类型？

】在s3aws中为对象创建签名url时如何设置内容类型？【英文标题】：howdoIsetcontent-typewhencreatingasignedurlforanobjectins3aws?【发布时间】：2015-02-1620:20:00【问题描述】：我想创建一个带有自定义内容类型的签名网址，我正在尝试这个：s3... 查看详情

Typescript：如何正确处理 axios 请求？

】Typescript：如何正确处理axios请求？【英文标题】：Typescript:HowdoIhandeaxiosrequestsproperly?【发布时间】：2022-01-2320:36:09【问题描述】：我对TS/JS中的请求有点陌生。我正在制作一个生成唯一ID调用“键”的函数。在我的函数中，我必... 查看详情

如何在 React Native 中为 useRef 钩子设置 Typescript 类型？

】如何在ReactNative中为useRef钩子设置Typescript类型？【英文标题】：HowdoyousettheTypescripttypeforuseRefhookinReactNative?【发布时间】：2020-04-0813:21:10【问题描述】：如何正确键入ReactNativeTextInput的useRef？使用下面的代码，我得到以下错误。... 查看详情

在 Swift 中为对象设置动画？

...我正在将一个对象过渡到视图中，我需要它滑入或淡入。如何在我的程序中获得这种类型的动画？我在没有IB（接口生成器）的情况下以编程方式制作了所有视图元素有没有我可以参考的文档？我找不到。【问题讨论】：与Objecti... 查看详情

Axios 获取请求不会正确的 URL

】Axios获取请求不会正确的URL【英文标题】：AxiosGetRequestnotgoingtoCorrectURL【发布时间】：2021-12-0319:40:33【问题描述】：我将代理设置为http://localhost:8000/api（适用于其他请求）在反应中，我正在使用axios进行获取请求：constres=username... 查看详情

如何在 firebase 函数中使用 Axios 正确发送 Post 请求？

】如何在firebase函数中使用Axios正确发送Post请求？【英文标题】：howtoproperlysendaPostrequestwithAxiosinafirebasefunction?【发布时间】：2022-01-2106:47:36【问题描述】：我正在尝试使用axios发送一个帖子请求，我想知道是否有人有一些意见。l... 查看详情

如何在 H2 中为该表获取正确的二维数组？

】如何在H2中为该表获取正确的二维数组？【英文标题】：HowdoIgettheright2dimensionalarrayforthistableinH2?【发布时间】：2011-11-2107:19:43【问题描述】：这是我的H2表。|第1步|时间||第2步|时间||第3步|时间||第4步|时间||第5步|时间||第1步|时... 查看详情

如何在 vuejs 中使用 axios 从数组中发布多个请求？

】如何在vuejs中使用axios从数组中发布多个请求？【英文标题】：Howtopostfromarraymutiplerequestwithaxiosinvuejs?【发布时间】：2018-06-2902:41:25【问题描述】：我尝试使用axios从数组发布到apiphp文件并一一获取响应，而不仅仅是一个请求。... 查看详情

如何在 DataFlow Block 中为每个线程创建对象，但不是每个请求的对象？

】如何在DataFlowBlock中为每个线程创建对象，但不是每个请求的对象？【英文标题】：HowtocreateobjectperthreadinDataFlowBlockbutnotobjectperrequest?【发布时间】：2021-07-2004:01:03【问题描述】：我有一个代码示例varoptions=newExecutionDataflowBlockOpti... 查看详情

如何强制 Grails 在 MySQL 中为 Map 字段使用正确的列类型

】如何强制Grails在MySQL中为Map字段使用正确的列类型【英文标题】：HowtoforceGrailstousepropercolumntypeinMySQLforMapfield【发布时间】：2011-01-0106:53:00【问题描述】：我在Grails1.1.2+MySQL中有一个问题。我的域类SomethingcontainsfieldMap<String,Map&... 查看详情

如何在 Javascript 中为 websocket 的请求标头设置 cookie？

】如何在Javascript中为websocket的请求标头设置cookie？【英文标题】：HowtosetcookieinrequestheaderforwebsocketinJavascript?【发布时间】：2017-03-1917:15:54【问题描述】：我正在使用Angular2，我的后端使用请求标头中的Cookie对websocket请求进行身份... 查看详情

如何在状态挂钩中从获取请求中设置数据（对象数组）？

】如何在状态挂钩中从获取请求中设置数据（对象数组）？【英文标题】：Howtosetdata(arrayofobjects)fromgetrequestinastatehook?【发布时间】：2020-11-1405:10:29【问题描述】：您好，我在我的App组件中使用axios获取数据，然后在我的SearchResult... 查看详情