HTTP 5를 HttpClient로 변환하는 방법 (또는> 4.3)?

Question

나는 Http를 사용하는 작업 코드를 가지고 있으며 이것을 최신 HttpClient를 사용하여 변환하는 방법을 배우고 싶습니다. App.module.ts에서

• : 나는 다음과 같은 단계를 수행 한

  "각도/일반/HTTP @" 에서 가져 오기를 {HttpClientModule};

• 은 아래의 서비스 파일에 수입 배열
• 에 HttpClientModule를 추가 (아래 참조) : 수입 {HttpClient를} "각도/일반/HTTP @"에서 을;
생성자에서 HTTP 대신
• 를 주입 HttpClient를 (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

응답 유형은 이제 json에 responseType 옵션, 기본 설정에 의해 제어되는 업데이트 된 코드입니다. 그러면 .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, 
     }), 
); 
}); 

이 Http 인스턴스와의 혼동을 피하기 위해 httpClient에 서비스 인스턴스의 이름을 변경하는 것이 유리하다.

서비스를 사용하려는 후에는 해당 서비스를 구독하십시오.

youtube는 구성 요소에 삽입 된 YoutubeSearchService입니다.

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