Question

我意识到Http获取并接收JSON数据。这很酷，但我希望返回一个带有部分数据的可观察数据。实际，这是我的回复JSON数据：

message "Success"
hero    
  id    2
  name  "Spider-Man"

我想在英雄对象中只返回英雄数据。实际上这是我的代码，但是thehero对象是假的：

search(id: number|string): Observable<Hero> {
return this.http.get<Hero>(`http://localhost:3000/api/v1/heroes/${id}`, {headers: httpOptions});}

我不知道是否必须使用拦截器或实现其他操作。

先谢谢。

Answer 1

您希望界面确定包含Hero的实际响应（或者在从响应中提取英雄时使用括号表示法以避免错误）更多相关信息：Typechecking the response。

因此，如果您不选择使用括号表示法，请创建一个界面....

interface MyResponse {
  message: string;
  hero: Hero;
}

然后，您指定收到类型为MyResponse的回复，并使用hero从回复中提取map，如其他答案所示：

return this.http.get<MyResponse>(`http://localhost:3000/api/v1/heroes/${id}` ....}
  .map(res => res.hero as Hero) // here!

Answer 2

您需要使用.map运算符，以允许修改流程：

...
return this.http.get<Hero>(`http://localhost:3000/api/v1/heroes/${id}`, {headers: httpOptions})
  .map( response => response.hero as Hero );
...

或使用最新的rxjs（＆gt; 5.x）

import { map } from 'rxjs/operators';
...
return this.http.get<Hero>(`http://localhost:3000/api/v1/heroes/${id}`, {headers: httpOptions})
  .pipe( map( response => response.hero as Hero ) );
...

Answer 3

您可以使用observable的map()运算符来提取响应的子集：

search(id: number|string): Observable<Hero> {
  return this.http.get<any>(`http://localhost:3000/api/v1/heroes/${id}`, 
     {headers: httpOptions})
     .map(resp => resp["hero2"] as Hero);
}

如何使用HttpClient Angular获取部分数据或处理

3 个答案: