05.http-module.md

Http Module

在一個 webapp 之中，從後端或是其他 API Service 抓取資料，是非常重要的一環

可參考官方文件: https://angular.io/api/http/Http

Import http module

在 webapp 中使用任何 package 之前，都必須要先去 module 做宣告設定

/* app.module.ts */

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {HttpModule} from '@angular/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule // 要在這裡 import HttpModule
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

Use in component / service

當我們在 module 做宣告設定 HttpModule 之後，就可以在 component 或是 service 裡面來來使用 http 方法與 API 溝通了

在這裡，我們建立一個 postServcie 來處理跟 API 溝通的 http 部分

建立一個 post service

方法如同之前所述，使用 cli 幫我們建立就好了

ng g s PostService

接著在 service 中 import HttpModule 的 Http

/* post.servcie.ts */

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';

@Injectable()
export class PostService {
  constructor(private http: Http) { }
}

使用 Promise

由於 JavaScipt 是單一同步的執行，因此在非同步的傳輸中，常常需要使用 callback 來確保資料流有依照所想的邏輯來進行。

Promise 物件代表一個將完成（或失敗）的一個非同步操作，所產生的值。

from mozilla 詳細想了解可參考： https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise

因此我們必須多 import Promise

import 'rxjs/add/operator/toPromise';

Get data form remote API

在 http 模組中有著一些常用的方法，像是 get, post 等等，我們就以 get 來作為範例，宣告一個 getData() 的方法，並且回傳 Promise

    getData = () => {
        return this.http.get(this.getPostsURI)
             .toPromise()
             .then(response => response.json())
             .catch(this.handleError);
    }

完整 post.servcie.ts

/* post.servcie.ts */

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';

@Injectable()
export class PostService {
    private getPostsURI = 'http://xxx/api/get';
    constructor(private http: Http) { }
    getData = () => {
        return this.http.get(this.getPostsURI)
             .toPromise()
             .then(response => response.json())
             .catch(this.handleError);
    }
    private handleError(error: any): Promise<any> {
        console.error('An error occurred', error); // for demo purposes only
        return Promise.reject(error.message || error);
    }
}

這樣在 component 之中，就可以使用這個 service 的方法來抓取遠端資訊了！

this.postService.getData();