angular 11 处理 http 响应

Question

我猜这可能是基础知识，但我是一个完整的 angular 和可观察的初学者。尝试遵循 angular 官方 Heroes 教程，该教程最终使用内存中 api 来模拟真实服务器；我正在将我的示例与真实后端挂钩，但不确定如何正确处理从服务器返回的数据。

我有一个HeroService，有一个获取所有英雄的方法。我正在使用 angular 的 HttpClient 并通过设计我的服务器 returns 一个带有 results 属性的单个对象，它本身是一个数组。如何将响应中的 results 属性转换为 Hero[] 的 Observable？顺便说一句，results 属性中的每个元素与定义的 Hero 界面具有相同的形状。

getHeroes(): Observable<Hero[]> {
    var res: Hero[] = []
    return this.http.get("https://my_heroes_url", this.httpOptions)
            .pipe(x => x['results'] as Hero[]);
    
  }

Answer 1

使用map RxJS operator:

import { map } from 'rxjs/operators';

getHeroes(): Observable<Hero[]> {
  return this.http.get("https://my_heroes_url", this.httpOptions)
            .pipe(map(x => x['results'] as Hero[]));
}

有关 RxJS 运算符的更多信息，请考虑查看 RxJS manual on operators。

angular 11 处理 http 响应

angular 11 handle http response

observable

rxjs

angular