来自 rxjs5 的 Rxjs6：在 REST API 方法中处理 Observables答案

【问题标题】：Rxjs6 from rxjs5: Handling Observables in REST API method来自 rxjs5 的 Rxjs6：在 REST API 方法中处理 Observables
【发布时间】：2018-07-31 03:30:02
【问题描述】：

我是 rxjs 和 Angular 的新手，我刚刚发现（感谢我的 WebStorm 给了我大量红色错误消息）rxjs5 与版本 6 大不相同。

所以我关注了这个tutorial，它指导用户使用 rxjs 组装 API 服务。问题是，它是为第 5 版编写的。

这是一个用版本 5 编写的示例 API 路由：

public getAllTodos(): Observable<Todo[]> {
  return this.http
   .get(API_URL + '/todos')
   .map(response => {
     const todos = response.json();
     return todos.map((todo) => new Todo(todo));
   })
   .catch(this.handleError);
}

阅读文档后，我已经将 version 6 路线重写到这一点：

public getAllTodos(): Observable<Todo[]> {
  return this.http
   .get(API_URL + '/todos')
   .pipe(
     map(response => {
      return response.map((todo) => new Todo(todo));
     }),
     catchError(this.handleError)
  );
}

问题是，我得到了：

“对象”类型上不存在属性“地图”。

我猜这与响应不是 json 格式有关，尽管响应似乎没有 .json() 方法。

【问题讨论】：

pipe ( tap(v => console.log(v))) 是你的朋友。检查您在那个阶段可观察到的任何内容并相应地调整代码。
对于 Angular，惯用方式（使用 HttpClient）是 return this.http.get<Todo[]>(url).pipe( map( res => res.map(todo => new Todo(todo)), catchError(handleErr) ); - 注意通用的 get。

标签： angular rxjs6

【解决方案1】：

您出错的原因是，如果您没有指定response 变量的类型，则假定它是一个对象。由于map 是一个数组函数，您需要将响应的类型指定为数组：

this.http.get<any[]>(...).pipe(...); // Preferred

或：

this.http.get(...).pipe(map((response: any[]) => ...)...);

请注意，您应该将上面的 any 替换为您的 API 返回的实际类型（字符串、对象等）。

【讨论】：