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 { 

}