AngularJS 4(四)【HTTP 服務】

提供 HTTP 服務

HttpModule並不是 Angular 的核心模組。 它是 Angular 用來進行 Web 訪問的一種可選方式，並位於一個名叫 @angular/http 的獨立附屬模組中，並作為 Angular 的 npm 包之一而釋出出來。

註冊 HTTP 服務

我們的應用將會依賴於 Angular 的http服務，它本身又依賴於其它支援類服務。 來自@angular/http庫中的HttpModule儲存著這些 HTTP 相關服務提供商的全集。

我們要能從本應用的任何地方訪問這些服務，就要把HttpModule新增到AppModule的imports列表中。 這裡同時也是我們引導應用及其根元件AppComponent的地方。

import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import { HttpModule } from '@angular/http';

@NgModule({
    imports: [FormsModule, BrowserModule, HttpModule]
})

HTTP 服務的使用

Angular 的 http.get 返回一個 RxJS 的Observable物件。Observable（可觀察物件）是一個管理非同步資料流的強力方式。

import { Component} from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';

@Component({
  selector: 'app-root',
  template: '<h1>{{title}}</h1>',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{
    constructor(private http: Http) {
    } 

    ngOnInit() {
        this.http.get('api').subscribe((res) => {
            console.log(res.json());
        });
    }     
}

結果處理 - promise 方式

可以利用 toPromise 操作符把 Observable 物件直接轉換成 Promise 物件。不幸的是 Angular 的 Observable只是一個骨架實現，並沒有一個 toPromise 操作符。所以要先從 RxJS 庫中匯入 。然後在 promise 的 then() 回撥中，我們呼叫 HTTP 的 Reponse 物件的 json 方法，用以提取出其中的資料。

import { Component} from '@angular/core';
import { Http } from '@angular/http';
//貌似現在最新本已一起打包釋出了，所以並不需要這一步
import 'rxjs/add/operator/toPromise';

@Component({
  selector: 'app-root',
  template: '<h1>{{title}}</h1>',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{
    constructor(private http: Http) {
    } 

    ngOnInit() {
        this.http.get('api').toPromise().then(response => {
            console.log(response.json());
        }).catch((error) => {
            console.log(error);
            return Promise.reject(error);
        });    
    }       
}

傳引數

import { Component} from '@angular/core';
import { Http, Response, Headers, RequestOptions, URLSearchParams, RequestOptionsArgs, RequestMethod } from '@angular/http';
//貌似現在最新本已一起打包釋出了，所以並不需要這一步
import 'rxjs/add/operator/toPromise';

@Component({
  selector: 'app-root',
  template: '<h1>{{title}}</h1>',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{
    constructor(private http: Http) {
    } 

    ngOnInit() {
      //get
        this.http.request('api', new RequestOptions({
          method: RequestMethod.Get,
          search: {name: ''}
        })).toPromise().then(response => {
            console.log(response.json());
        }).catch((error) => {
            console.log(error);
            return Promise.reject(error);
        });   

      //get
        this.http.request('api', new RequestOptions({
          method: RequestMethod.Post,
          body: {name: ''},
          headers: new Headers({
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
          })
        })).toPromise().then(response => {
            console.log(response.json());
        }).catch((error) => {
            console.log(error);
            return Promise.reject(error);
        });          
    }       
}