如何使用 Angular 中的 observables 在 API http 请求的所有页面中获取数据？

Posted 2023-03-13

【中文标题】如何使用 Angular 中的 observables 在 API http 请求的所有页面中获取数据？

【英文标题】：How to get data in all the pages of an API http request using observables in Angular?

【发布时间】：2019-07-12 04:39:00

【问题描述】：

我正在向 API 发出 http.get 请求以获取数据。 API 使用分页并包含 30 个条目/页。它还在响应标头链接中提供有关下一页和最后一页的信息以及相应的链接（如果适用，还包括上一页和第一页）。

链接头包含分页信息：

<https://api.example.com/user?page=2>; rel="next", 
<https://api.example.com/user?page=10>; rel="last"

response.body 中的 JSON 对象

[
  
    userId: 1,
    name: 'John',
    created_at: "2015-10-13T03:10:43Z",
  ,
  
    userId: 2,
    name: 'Jane',
    created_at: "2019-02-15T13:37:03Z",
  
....
]

我正在使用 Angular 6 并尝试通过随后的 http.get 调用来积累数据。我曾尝试对后续数据使用数组方法 push()。但是由于 typeof resp.body 是对象，所以它不起作用。

userData: any[];

getData(url: string) 
    this.http.get(url, observe: 'response');
        .subscribe((resp) => 
        this.userData.push(resp.body);

错误信息：TypeError: Cannot read property 'push' of undefined

userData 应该包含从 http.get 请求接收到的可迭代数据数组。

【问题讨论】：

Cannot read property 'push' of undefined javascript的可能重复

【参考方案1】：

你不能.push 到一个未初始化的数组。

尝试这样做：

userData = [];

【参考方案2】：

userData: any[] = [];

userData 未初始化导致此错误。试试空Array。

【参考方案3】：

如上一个答案中所述，您应该先初始化数组，然后才能对其使用 push()。

但是，如果我理解得很好，您会收到每个响应的用户数组。通过在每个响应上使用 push，您将获得一个数组数组。 您应该使用 concat 合并两个数组或在响应上使用 foreach 然后推送。

我还建议您使用接口或类，并尽量避免使用任何

interface UserData 
  userId: number;
  name: string;
  created_at: string;


userData: UserData[] = [];

getData(url: string) 
  this.http.get(url, observe: 'response')
    .subscribe((resp) => 
      resp.body.forEach((user: UserData) => 
        this.userData.push(user);
      );
    );

【讨论】：

初始化数组并 concat 以正确的方式解决问题。但是我还是不明白接口的使用。您能否对此有所了解或指出正确的方向？

使用接口只是最佳实践。如果您使用它们，您的 IDE 将为您提供更多帮助、提示和自动完成功能。使用“any”可能看起来更方便，因为它可以让你做你想做的事，但它会使代码更难理解并增加出错的风险。

【参考方案4】：

先初始化数组再push，如下代码如下。

userData: any[] = [];

getData(url: string) 
  this.http.get(url, 
   observe: 'response'
  );
  .subscribe((resp) => 
     // this.userData = [];
     this.userData.push(resp.body);