angular2 學習筆記 ( Http 請求)

更新 : 2017-06-08 

 

總覺得 angular 的 http 怎么就多了 Request, Headers, Response 這些麻煩東東呢. 

原來這些都是游覽器的“新特性” Fetch API. 其實很久了，只是我不知道而已，哈哈。 

Fetch API 和以前的 xmlhttprequest 主要功能是一樣的，就是發請求.

不同的地方是Fetch 是基於 promise 的，而且可以配合 service worker, stream, cache 之類的 "新特性" 打出連環計. 

它也是有不足的地方，比如沒辦法 abort 和 progress (不確定目前有了沒有 /.\)

有興趣的朋友可以多留意這些 "新特性" 哦. 

 

 

refer : 

https://angular.cn/docs/ts/latest/guide/server-communication.html

https://xgrommx.github.io/rx-book/index.html

http://wiki.jikexueyuan.com/project/android-weekly/issue-145/introduction-to-RP.html

 

概念上沒什么太多的區別.

下面記入一些例子和小區別 : 

 

不同的地方 : 

1.不支持 ng1 的 interceptor 攔截和 transformations (要自己實現可以試着繼承 http 服務來擴展)

2.默認結合rxjs (也可以很容易的轉化回熟悉的 Promise)

 

提醒: 

1.XSRF 和 ng1 一模一樣 

2.ng 有一個內存 WebAPI 服務 ( in-memory web api service )，可以模擬后端的 Web API 服務器. 不過我沒有用 ^^".

 

例子 :  

1.Headers and Params 

let headers = new Headers({ "myHeader": "myValue" });
headers.append("Accept", "application/json");
let params = new URLSearchParams();
params.set('myParam', 'myValue');
let options = new RequestOptions({ headers: headers, search: params });
this.http.get("/api/products", options).toPromise().then((response) => {
    console.log(response.json());
}); 

 

2.POST

let body = JSON.stringify({
    code : "mk200"
});
let headers = new Headers({ 'Content-Type': 'application/json' }); //其實不表明 json 也可以, ng 默認好像是 json
let options = new RequestOptions({ headers: headers });
this.http.post("/api/products", body, options).toPromise().then((response) => {
    //do something...
});

 

3.get CSV 

let options = new RequestOptions({ responseType: ResponseContentType.Text });
this.http.get("/demo.csv", options).toPromise().then((response) => {
    console.log(response.text());             
}); 

 

4.by request 

let options = new RequestOptions({
    method: RequestMethod.Post,
    url: "/api/products",
    headers: new Headers({ 'Content-Type': 'application/json' }),
    body: JSON.stringify({ code: "mk200" })
});
this.http.request(new Request(options)).toPromise().then((response) => {
    //do something...
});

 

5. Upload file 

<input type="file" (change)="onFileChanged($event.target.files)" placeholder="Upload file" accept="image/*">

onFileChanged(fileList: FileList) {
    if (fileList.length > 0) {
        let file: File = fileList[0];
        let formData: FormData = new FormData();
        formData.append('uploadFile', file, file.name);            
        let headers = new Headers({ 
            "Accept": "application/json"
        });
        let options = new RequestOptions({ headers });
        this.http.post("https://localhost:44372/api/uploadFile", formData, options)
            .map(res => res.json())
            .catch(error => Observable.throw(error))
            .subscribe(
                data => console.log('success' + data),
                error => console.log(error)
            )
    }
}

ng 支持 formData, 關鍵就是別自己去寫 Content-Type header, ng 會幫我們寫好的. 

 

攔截

不像 ng1 那樣，ng 並沒有給我們一個攔截的接口, 不過我們可以通過簡單的繼承+override 來達到目的. 

refer : http://stackoverflow.com/questions/34934009/handling-401s-globally-with-angular-2

import { Injectable } from '@angular/core';
import { Http as NgHttp, XHRBackend, RequestOptions, Request, RequestOptionsArgs, Response } from "@angular/http";

import { Observable } from "rxjs/Observable";

@Injectable()
export class Http extends NgHttp {
    constructor(backend: XHRBackend, defaultOptions: RequestOptions) {
        super(backend, defaultOptions);
    }
    get(url: string, options?: RequestOptionsArgs): Observable<Response>
    {
        console.log("in");
        return super.get(url,options);
    }

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {　　　　 
        console.log("in2");
        return super.request(url, options).catch((error: Response) => {
            console.log(error);           
            return Observable.throw(error);
        });
    }
}

get,post,put,delete 最終也是會調用 request 方法, 所以我們可以在 request 做大部分的攔截. 

typescript 中 override 父類方法不需要寫什么 virtual, override 之類的, 直接寫方法就可以了, 內部通過 super.method() 來調用父類方法, 不是 super() 哦.

我們有 2 個選擇來調用這個 http, 第一就是聲明我們的 service, 其二是覆蓋 ng 的 Http service.

import { Http as StoogesHttp } from "./http.service";
import { Http } from "@angular/http";

@NgModule({
    imports: [StoogesModule, DebugRoutingModule],
    exports: [],
    declarations: [DebugComponent],
    providers: [{ provide : Http, useClass : StoogesHttp }] //這樣就覆蓋掉了. 可以參考我寫的 angular2 依賴注入
})
export class DebugModule { 
  
}