angular 的 http 多了 Request, Headers, Response ,這些都是游覽器的“新特性” Fetch API.
Fetch API 和以前的 xmlhttprequest 主要功能是一樣的，就是發請求.
不同的地方是Fetch 是基於 promise 的，而且可以配合 service worker, stream, cache 之類的 "新特性" 打出連環計.
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 服務器. 不過我沒有用 ^^".
例子 :
一、request
注意: get,post,put,delete 最終也是會調用 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...
});
二、具體方法
1.get
1.1、參數和請求頭
代碼
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());
});
1.2、get CSV
let options = new RequestOptions({ responseType: ResponseContentType.Text });
this.http.get("/demo.csv", options).toPromise().then((response) => {
console.log(response.text());
});
2.POST
2.1、普通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...
});
2.2、上傳文件
<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 會幫我們寫好的.
三、攔截
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 {
}