如何在 Angular 5（或 >4.3）中将 Http 转换为 HttpClient？

Question

我有一个使用 Http 的工作代码，我想了解如何将其转换为使用最新的 HttpClient。

我已经完成了以下步骤：

在 App.module.ts 中：导入 { HttpClientModule } 来自 "@angular/common/http";
将 HttpClientModule 添加到导入数组中
在下面的服务文件中（见下文）：import { HttpClient } 来自“@angular/common/http”；
在构造函数（将 Http 替换为 HttpClient。

现在，下面的步骤我搞不定（如何重写return this.http.get(queryUrl)..）

有什么想法吗？

...

代码使用 Http:

import { Injectable, Inject } from "@angular/core";
import { Http, Response } from "@angular/http";
import { Observable } from "rxjs/Observable";
import { SearchResult } from "../models/search-results.model";

export const YOUTUBE_API_KEY = "AIzaSyCIYsOjnkrIjZhVCFwqNJxe1QswhsliciQ";
export const YOUTUBE_API_URL = "https://www.googleapis.com/youtube/v3/search";

@Injectable()
export class YoutubeSearchService {
  constructor(
    private http: Http,
    @Inject(YOUTUBE_API_KEY) private apiKey: string,
    @Inject(YOUTUBE_API_URL) private apiUrl: string,
  ) {}

  search(query: string): Observable<SearchResult[]> {
    const params: string = [
      `q=${query}`,
      `key=${this.apiKey}`,
      `part=snippet`,
      `type=video`,
      `maxResults=10`,
    ].join("&");
    const queryUrl = `${this.apiUrl}?${params}`;

    return this.http.get(queryUrl).map((response: Response) => {
      return (<any>response.json()).items.map(item => {
        // console.log("raw item", item); // uncomment if you want to debug
        return new SearchResult({
          id: item.id.videoId,
          title: item.snippet.title,
          description: item.snippet.description,
          thumbnailUrl: item.snippet.thumbnails.high.url,
        });
      });
    });
  }
}

这是更新后的代码

Answer 1

响应类型现在由 responseType 选项控制，默认为 json。这消除了 .map((response: Response) => response.json()) 行。

HttpClient 方法是通用的，响应对象类型默认为 Object。可以提供更强类型的类型：

return this.httpClient.get(queryUrl).map(response => {
  return response.items.map(
    item =>
      new SearchResult({
        id: item.id.videoId,
        title: item.snippet.title,
        description: item.snippet.description,
        thumbnailUrl: item.snippet.thumbnails.high.url,
      }),
  );
});

将服务实例重命名为 httpClient 以避免与 Http 实例混淆是有益的。

当你想使用该服务后，你订阅它。

假设youtube是组件中注入的YoutubeSearchService。

  queryYoutube() {
    this.youtube.search("Rio de Janeiro").subscribe(data => console.log(data));
  }

Answer 2

在 angular 5 中，您可以使用 .pipe 中的 .map 函数两次来执行与之前 angular 版本相同的操作：

getCoinRankings () : Observable<Coinobject[]>{
  return this.http.get<Coinobject[]>(this.coinmarketcapAPI)
    .pipe(
      map(x => x.map(data => new Coinobject(data))),
      tap(coinrankings => console.log(`fetched coinrankings`)),
      catchError(this.handleError('getCoinrankings',[]))
    )
}

x = request.json() -> 整个 json 响应数据 = json 数组中的单个项目。在我的示例中，我使用了一个构造函数，该构造函数可以手动将 json 映射到所需的属性，但您也可以这样做。

return this.httpClient.get<Object[]>(queryUrl).pipe(
    map(response => response.map(data => new SearchResult{
        id: item.id.videoId,
        title: item.snippet.title,
        description: item.snippet.description,
        thumbnailUrl: item.snippet.thumbnails.high.url,
      })),
    tap(...),
    catchError(...)
    )
}

并不是说废弃模块的用户会伤害您的应用程序……（但请随时纠正我）

如何在 Angular 5（或 >4.3）中将 Http 转换为 HttpClient？

How to converting Http to HttpClient in Angular 5 (or >4.3)?

angular

typescript

angular4-httpclient