Question

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

我已完成以下步骤：

：从中导入{HttpClientModule} “@角/普通/ HTTP”;
将HttpClientModule添加到导入数组
在以下服务文件中（见下文）：import {HttpClient} 来自“@ 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,
        });
      });
    });
  }
}

这是更新后的代码

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

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

<form action="{{ route('signup') }}" method="post" id="userform">
     {{ csrf_field() }}

     <div class="form-group">
        <label for="fullname">Your Full Name</label>
        <input class="form-control" type="text" name="fullname" id="fullname">
     </div>

     <div class="form-group">
         <label for="email">Your E-Mail</label>
         <input class="form-control" type="text" name="email" id="email">
     </div>

     <div class="form-group">
         <label for="password">Your Password</label>
         <input class="form-control" type="password" name="password" id="password">
     </div>
     <button type="submit" class="btn btn-primary">Submit</button>
 </form>

x = request.json（） - ＆gt;整个json的回应 data = json数组中的单个项目。在我的例子中，我使用了一个构造函数，它将json手动映射到所需的属性，但你也可以这样做。

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

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

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

2 个答案: