Angular 2（九）： 服务

Angular的http服务返回的是Observable(可观察数据流)，通过订阅来获取可用数据。

订阅方式有：手动订阅(subscript)、异步管道订阅(async)

手工订阅

1
<div *ngFor="let prod of products">{{prod.name}}</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
products:Array<any> = [];
dataSource:Observable<any>;
constructor(private http:Http){
    this.dataSource = this.http.get('/products')
        //由于返回的数据格式是Response，过需要转成JSON
        .map((res)=>res.json())
};
ngOnInit():void{
    this.dataSource.subscript(
        (data)=> this.products = data;
    )
}
  • http请求的发送并不是由get方法触发的，而是subscribe；
  • get方法只是定义了一个http请求，请求的发送是通过订阅完成的；

异步管道订阅

1
<div *ngFor="let prod of products | async">{{prod.name}}</div>
1
2
3
4
5
6
products:Observable<any> = [];
constructor(private http:Http){
    this.products = this.http.get('/paoducts')
    .map((res)=>res.json());
}

添加Headers

在定义https请求时，需要添加headers的时候，如下：

1
2
3
4
5
6
7
constructor(private http:Http){
    let myHeaders:Headers = new Headers();
    myHeaders.append("Autor","tuluffy");
    
    this.products = this.http.get('/products',{headers:myHeaders})
        .map((res)=>res.json());
}

其他

有些时候Angular启动的端口地址和服务器端口地址不一致，导致所有的http请求失败。我们需要做端口转发。

  • 新建转发配置文件，proxy.conf.json：
    1
    2
    3
    4
    5
    {
        "/api":{
            "target":"http://localhost:8080"
        }
    }

即：将以”/api”开头的请求地址转发到”http://localhost:8080“

  • 修改package.json的start项

    1
    start:"ng serve --proxy-config proxy.conf.json"

  • 修改请求的地址

    1
    2
    3
    this.http.get('/products').map((res)=>res.json())
    改为
    this.http.get('/api/products').map((res)=>res.json())