iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 11
1
Modern Web

Angular 2 之 30 天邁向神乎其技之路系列 第 11

[Day 11] Angular 2 HTTP 方法--讓我 Call API

前言

網站有了一堆的元素、動畫、圖片、文字,可能看起來很炫很厲害,但是這樣就只能是靜態的網站,想要實現購物車、會員機制、留言板、討論區、投票區、訊息發佈、商品發佈等等功能,進而設計出可與網友進行互動的功能。而要實現這些功能,不外乎就是一直呼叫 API,然後透過後端和資料庫的處理,再將資料傳回給網站。
前端和後端的連結,就是透過 Http 方法,包含 get、post、head、put、patch 和 delete。接下來就來說明如何在 Angular 2 中實現 HTTP 方法。

RxJS

RxJS是一個第三方函式庫,由 Angular 贊助,實現異步觀察模式。Angular 默認就有安裝 RxJS,因為 Observable 模式被廣泛在應用在 Angular 程序。Observable 是一種趨勢。HTTP 客戶端就需要 RxJS,所以我們必須採用額外的步驟開啟 RxJS Observables。
事實上可以只載入需要的部分,不過先全引入吧!
import rxjs-operator into app.component.ts

// Add all operators to Observable
import 'rxjs/Rx';

HTTP 服務

Angular Http client (客戶端) 和伺服器通訊是藉由熟習的 Http 要求/回應 (request/response) 協議。而且 Http client 應該是 Angular 中關於 Http 最常用到的函式庫了。

使用 Http client 的時候,應該將將服務註冊為依賴注入系統中。

直接看範例

GET

import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable }     from 'rxjs/Observable';
@Injectable()
export class HttpClientService {
  constructor (private http: Http) {}
  get(url: string, optionHeader?: {[header: string]: string}): Observable<Response> {
    let headers = new Headers();
    // set option header
    for(let header in optionHeader) {
      let value = optionHeader[header];
      headers.append(header, value);
    }
    return this.http.get(url, {headers: headers,})
                    .map(this.extractData)
                    .catch(this.handleError);
  }
  private extractData(res: Response) {
    let body = res.json();
    return body.data || { };
  }
  private handleError (error: Response | any) {
    // In a real world app, we might use a remote logging infrastructure
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }
}

首先先注入 http 進入 HttpClientService

constructor (private http: Http) {}

url 就是要 call 的 API 位置。
http.get 方法返回的是一個 HTTP 響應 Observable 對象,由 RxJS 庫提供,map()也是 RxJS 的一個操作符。

處理回應

map()函數中,我們會將提取數據映射到 this.extractData 函數

private extractData(res: Response) {
  if (res.status < 200 || res.status >= 300) {
    throw new Error('Bad response status: ' + res.status);
  }
  let body = res.json(); 
  return body.data || { };
}

Response 不能直接用,要先除錯,並將資料轉換成 json 給程式使用。

使用資料

getData() {
  this.HttpClientService.get(url:string)
                        .subscribe(
                          data => this.data = data,
                          error =>  this.errorMessage = <any>error
                        );
}

POST

方法也大同小異

post(url: string, body: any, optionHeader?: {[header: string]: string}): Observable<Response> {
    let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});
    // set option header
    for(let header in optionHeader) {
      let value = optionHeader[header];
      headers.append(header, value);
    }
    let newUrl = this.globalVariablesService.apiURL + url;
    return this.http.post(newUrl, body, {
      headers: headers,
    }).map(this.extractData)
      .catch(this.handleError);
}

另一種寫法

事實上我們也可以這樣寫

export class HttpClientService {
  ...
  get(url: string, optionHeader?: {[header: string]: string}): Observable<Response> {
    let headers = new Headers();
    // set option header
    for(let header in optionHeader) {
      let value = optionHeader[header];
      headers.append(header, value);
    }
    return this.http.get(url, {
      headers: headers,
    }).catch((res: Response) => this.handleError(res));
  }
  ...
}

當其他函數要調用 get 方法時注入,且先不處理成功的資料。

getData(): void {
  let url = 'htts://...'
  this.httpClientService.get(url)
      .subscribe(
        (res : Response) => {
          let data = res.json();
        },
        (err: any) => {
          console.log('err:',err);
        }
    );
}

前一種寫法適合寫明確回傳東西的服務,後者適合寫通用型,可以接受任何資料,最後在轉換。不管哪一種寫法都是將 http 方法和要最後處理的工作做區隔,發生錯誤時可以區分是 http 出錯還是 getData()出錯,取到資料後可以再拿來做其他事情。簡單來說就是將程式做層級化,邏輯根管理都比較容易。

AJAX

當然除了 Angular 官方提供的方法,AJAX 還是一樣受大家愛戴。
沒什麼技術好說的,一樣是異步,而且記得要引入 jQuery。比較麻煩的是 TSlint 看不懂 $,所以可以很作弊的這樣做。declare var $:any;放在 ts 最前面。

$.ajax({
  url: url,
  type: 'POST',
  data:  {'data':JSON.stringify(json)},
  success: function(data: any) {
      console.log(data);
  },
  error: function(XMLHttpRequest: any, textStatus: any, errorThrown: any) {
      console.log(errorThrown);
  }
});

AJAX 就不多說甚麼了,總之也是個方法。


上一篇
[Day 10] Angular 2 動畫 (ANIMATIONS)
下一篇
[Day 12] Angular 2 多語言 ( 1 )
系列文
Angular 2 之 30 天邁向神乎其技之路31

1 則留言

1
duketopmost
iT邦見習生 0 級 ‧ 2018-05-20 07:40:39

請問上面程式碼如何更新到 Angular 6.0 rxjs 6.1

https://update.angular.io/

這網站會教你要改那些地方

我要留言

立即登入留言