将 Observable 映射到对象数组答案

【问题标题】：Mapping Observable to array of objects将 Observable 映射到对象数组
【发布时间】：2018-09-22 08:23:27
【问题描述】：

我有 rest api，它返回我的 json 数组和数据。在客户端，我使用此代码从请求创建对象。

public getNews(): Observable<News[]> {

return this.http.get(this.baseUrl + '/news')
  .pipe(
    catchError(this.handleError('getNews', []))
  )
  .map(res => {
    let response: any = res;
    return response.map((item) => new News(item));
  });
}

this.restProvider.getNews().subscribe((news: News[]) => {
  this.news = news;
});

但是当响应不是数组而是单个元素时，我该如何解决问题？或者响应是错误的，例如来自 API 的意外数据？

目前在这些情况下，我的应用程序会抛出此错误：

response.map 不是函数

【问题讨论】：

标签： angular typescript ionic-framework

【解决方案1】：

当响应是单个对象或数组时，显然不是一致的行为并且会使事情复杂化。我假设后端不受您的控制。

您可以先检查响应类型以确定它是数组还是对象。您可以使用Array.isArray()。然后如果响应不是一个数组，你转换它，像这样const res = [response]

从那时起，getNews() 应该总是返回一个数组

【讨论】：

【解决方案2】：

代码，总是返回数组：

public getNews(): Observable<News[]> {

return this.http.get(this.baseUrl + '/news')
  .pipe(
    catchError(this.handleError('getNews', []))
  )
  .map(res => {
    if(Array.isArray(res)) {
       return res.map((item) => new News(item));
     } else {
       return [new News(res)];
     }
  });
}

【讨论】：

【解决方案3】：

以下代码应该可以帮助您处理错误：

this.restProvider.getNews().subscribe((news: News[]) => {
  this.news = news;
}, (err) => {
console.log(err);
});

只需要在订阅函数中添加error参数即可。

现在开始您的第一个问题：如果响应是单个对象怎么办？ -> 函数的签名将始终强制它返回一个数组。该错误将在订阅端生成。一个简单的解决方案是更改响应的数据类型。

this.restProvider.getNews().subscribe((news:any) => {
  this.news = news;
});

【讨论】：