如何在Angular 5（或> 4.3）中將Http轉換爲HttpClient？

我有一個使用Http的工作代碼，我想了解如何將其轉換爲使用最新的HttpClient。如何在Angular 5（或> 4.3）中將Http轉換爲HttpClient？

我也做了以下步驟：

：從「@角/普通/ HTTP」進口{HttpClientModule};
添加HttpClientModule到進口陣列
在以下服務文件（見下文）：進口{}的HttpClient從「@角/普通/ 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, 
     }); 
     }); 
    }); 
    } 
}

這裏是更新的代碼現在

來源

2017-11-10 Isak La Fleur

新的HttpClient會自動將您正在返回JSON，所以沒有必要'response.json（）'了。我會建議閱讀文檔（https://angular.io/guide/http）。它應該有你需要的一切。 – LLai

你遇到了什麼錯誤或者你面臨的問題是什麼？ – Aravind

響應類型由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-10 20:47:44 estus

嗨@estus，謝謝你的回答！我爲更改後的代碼創建了一個小提琴（https://jsfiddle.net/u00pvkvs/1/），請參閱此處：我遵循了您的建議，請參閱此處： // Property'items'不存在於類型'Object 」。 –

這是json響應的鏈接https://www.googleapis.com/youtube/v3/search?q=Rio%20de%20Janeiro&key=AIzaSyCIYsOjnkrIjZhVCFwqNJxe1QswhsliciQ&part=snippet&type=video&maxResults=10 –

這就是答案所解釋的。考慮提供一個類似ISearchResultItems的適當類型。你當然可以使用'any'，但這樣會降低安全性。 – estus

如何在Angular 5（或> 4.3）中將Http轉換爲HttpClient？

回答

相關問題