ng-book札記——HTTP

Angular擁有自己的HTTP庫，可以用於調用外部API。

在JavaScript世界里有三種方式可以實現非同步請求，Callback，Promise與Observable。Angular傾向於使用Observable方式。

HTTP庫屬於Angular中獨立的模塊，這意味著當使用時需要導入它。

import {
    // The NgModule for using @angular/http
    HttpModule,

    // the class constants
    Http,
    Response,
    RequestOptions,
    Headers
} from '@angular/http';

舉個基本的HTTP請求例子：

import { Component, OnInit } from '@angular/core';
import {Http, Response} from '@angular/http';

@Component({
    selector: 'app-simple-http',
    templateUrl: './simple-http.component.html'
})
export class SimpleHttpComponent implements OnInit {
    data: Object;
    loading: boolean;

    constructor(private http: Http) {
    }

    ngOnInit() {
    }

    makeRequest(): void {
        this.loading = true;
        this.http.request('http://jsonplaceholder.typicode.com/posts/1')
        .subscribe((res: Response) => {
            this.data = res.json();
            this.loading = false;
        });
    }
}

http.request返回一個Observable，通過subscribe訂閱變化。

如果是想要用GET方式請求API的話，可以使用HTTP庫中的http.get方法。

@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
                });
            });
        });
    }
}

如果要用POST方式的話，也有http.post方法。

makePost(): void {
    this.loading = true;
    this.http.post(
    'http://jsonplaceholder.typicode.com/posts',
        JSON.stringify({
            body: 'bar',
            title: 'foo',
            userId: 1
        }))
        .subscribe((res: Response) => {
            this.data = res.json();
            this.loading = false;
    });
}

當然還有http.put，http.patch，http.delete以及http.head方法。