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

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

我已完成以下步骤：

• 在App.module.ts中：从导入{HttpClientModule} “@angular/common/http”
• 将HttpClientModule添加到导入阵列中
• 在下面的服务文件中（请参见下文）：导入{HttpClient} 来自“@angular/common/http”
• 将HttpClient而不是Http注入 构造函数（用HttpClient替换Http）

现在，我无法正确执行以下步骤（如何重写

返回此.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,
        });
      });
    });
  }
}

import{Injectable，injecte}来自“@angular/core”；
从“@angular/Http”导入{Http，Response}；
从“rxjs/Observable”导入{Observable}；
从“./models/search results.model”导入{SearchResult}；
export const YOUTUBE_API_KEY=“aizasyciysojnkrijzhvcfwqnjxe1qswsliciq”；
导出常量YOUTUBE\u API\u URL=”https://www.googleapis.com/youtube/v3/search";
@可注射（）
导出类YoutubeSearchService{
建造师(
私有http:http，
@注入（YOUTUBE_API_KEY）私有apiKey:string，
@注入（YOUTUBE_API_URL）私有apiUrl:string，
) {}
搜索（查询：字符串）：可观察{
常量参数：字符串=[
`q=${query}`，
`key=${this.apiKey}`，
`part=代码段`，
`类型=视频`，
`maxResults=10`，
].加入（“&”）；
常量queryUrl=`${this.apiUrl}？${params}`；
返回此.http.get（queryUrl）.map（（响应：响应）=>{
return（response.json（））.items.map（item=>{
//log（“原始项”，项）；//如果要调试，请取消注释
返回新的搜索结果({
id:item.id.videoId，
标题：item.snippet.title，
描述：item.snippet.description，
缩略图url:item.snippet.thumbnails.high.url，
});
});
});
}
}

---

下面是更新后的代码响应类型现在由

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是组件中注入的youtube搜索服务

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

---

在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',[]))
    )
}

getCoinRankings（）：可观察{
返回this.http.get（this.coinmarketcapAPI）
.烟斗(
map（x=>x.map（data=>newcoinObject（data）），
轻触（coinrankings=>console.log（`fetched coinrankings`）），
catchError（this.handleError（'getCoinrankings'，[]））
)
}

x=request.json（）->整个json响应 data=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(...)
    )
}

返回这个.httpClient.get（queryUrl.pipe）(
map（response=>response.map（data=>newsearchresult{
id:item.id.videoId，
标题：item.snippet.title，
描述：item.snippet.description，
缩略图url:item.snippet.thumbnails.high.url，
})),
点击（…），
捕获错误（…）
)
}

---

并不是说一个已卸载模块的用户会对您的应用程序造成意外伤害…（但请随意更正）

新的HttpClient自动假定您正在返回json，因此不再需要

response.json（）

。我建议您阅读文档（）.它应该有你所需要的一切。你犯了什么错误？或者你面临什么问题？嗨@estus，谢谢你的回答！我创造了一把小提琴（）对于更改后的代码，请参阅以下内容：我遵照您的建议，请参见此处：//属性“项目”不存在于“对象”类型。这里是一个JSON响应的链接，这就是答案的答案。考虑提供一个合适的类型，比如iSeCurReultEMS。当然，您可以使用<代码>任何< /代码>，但这将是ELMITETE类型的安全性。