4

Angular 正在从 HttpModule 转换为 HttpClientModule 并弃用前者，详见Angular 4 中 HTTP 和 HTTPClient 的区别？.

但是https://angular.io/tutorial/toh-pt6的 Angular 教程使用 HttpModule，而https://angular.io/guide/http的基础信息使用 HttpClientModule，详见https://github.com/角度/角度/问题/19280。本教程使用内存服务器，而基础使用真正的 Web 服务器，使比较变得更加困难。

我尝试使用真实的 Web 服务器在 Angular 教程代码中从 HttpModule 切换到 HttpClientModule，并让某些部分正常工作，但其他部分不工作。将 hero.services.ts 中的 getHeroes 方法之一从

  getHeroes(): Promise<Hero[]> {
    return this.http.get(this.heroesUrl)
      .toPromise()
      .then(response => response.json().data as Hero[])
      .catch(this.handleError);
  }

到

  getHeroes(): Promise<Hero[]> {
    return this.httpClient.get(this.heroesUrl)
      .toPromise()
      .then(data => data['heroes'] as Hero[])
      .catch(this.handleError);
  }

虽然可能有一些方法可以改进，这个版本可能有我还没有发现的问题。

但我没有看到 hero-search.service.ts 中的搜索方法的等价物

  search(term: string): Observable<Hero[]> {
    return this.http
      .get(`api/heroes/?name=${term}`)
      .map(response => response.json().data as Hero[]);
  }

应该可以不用 map，但是你不能使用与上面相同的方法，因为有一个 Observable 而不是 Promise，你会得到如下错误：

Type 'Observable<Object>' is not assignable to type 'Observable<Hero[]>'.

有没有人将 Angular 教程中的 Heroes 演示转换为使用 HttpClientModule 或知道如何转换上面的搜索代码？

4

2 回答 2

4

虽然 HttpClient 将 JSON 响应解析为一个对象，但它不知道该对象是什么形状。因此，您可以指定响应的类型：

return this.http
    .get<{ data: Hero[] }>(`api/heroes/?name=${term}`)
    .map(res => res.data);

请注意，您可以为此创建接口：

interface ItemsResponse {
  data: Hero[];
}

return this.http
  .get<ItemsResponse>(`api/heroes/?name=${term}`)
  .map(res => res.data);

如果您怀疑什么类型的响应将是或不想创建界面，那么只需使用any：

return this.http
  .get<any>(`api/heroes/?name=${term}`)
  .map(res => res.data);

TOH-HttpClientModule 示例

也可以看看

于 2017-09-20T21:09:51.797 回答
0

重写您的组件，他们在 httpClient 中删除了 response.json，不再需要调用 response.json()。如果数据不是正确的响应名称，请打开控制台并查找返回对象的正确名称。

search(term: string): Observable<Hero[]> {
return this.http
  .get(`api/heroes/?name=${term}`)
  .map(response => {
         console.log(response);
         return response['data'] as Hero[]
   });

}
于 2017-09-20T20:50:12.517 回答