首页 文章

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

提问于
浏览 次
3

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

我已完成以下步骤：

App.module.ts中的

  • ：从"@angular/common/http"导入;

  • 将HttpClientModule添加到imports数组中

  • 在以下服务文件中（见下文）：从"@angular/common/http"导入;

  • 在构造函数中注入HttpClient而不是Http（用HttpClient替换Http .

现在，以下步骤我无法正确（如何重写 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,
        });
      });
    });
  }
}

这是更新的代码

angular typescript angular4-httpclient

2 回答

  • 5

    响应类型现在由 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));
  }
    回复于
  • 0

    在角度5中，您可以使用.pipe内部的.map函数两次执行与上一个角度版本相同的操作：

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

    并不是一个破旧的模块的用户会伤害你的应用程序offcourse ...（但随意纠正我）

    回复于

相关问题