4

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

我已完成以下步骤：

  • 在 App.module.ts 中：从“@angular/common/http”导入 { HttpClientModule }；
  • 将 HttpClientModule 添加到导入数组中
  • 在下面的服务文件中（见下文）： import { HttpClient } from "@angular/common/http";
  • 在构造函数中注入 HttpClient 而不是 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,
        });
      });
    });
  }
}

这是更新的代码

4

2 回答 2

7

响应类型现在由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));
  }
于 2017-11-10T20:47:44.677 回答
1

在 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(...)
    )
}

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

于 2018-04-07T15:42:09.713 回答