Angular HTTP服务

使用@angular/http

要使用Angular的HTTP库，我们首先需要导入HttpModule在，这是一个便于使用的模块集合。

...
import { HttpModule } from '@angular/http';
...
@NgModule({
  imports: [
  HttpModule
  ],
})

在组件中使用HTTP服务

import { Http, Response } from '@angular/http';
...
export class HttpComponent {
  constructor(private http: Http){
    
  }

  makeGet(): void {
    this.http.get('http://jsonplaceholder.typicode.com/posts/1')
      .subscribe((res: Response) => {
        this.data = res.json();
      });
  }
}

发起HTTP请求的方式非常简明：调用this.http.get并传入URL作为GET请求的参数。

http.get会返回一个Observable对象。我们可以使用subscribe订阅变化(类似于在一个promise上使用then)。

当http.get从服务器返回一个流时，他就会发出一个Response对象。我们用json方法提取出响应体并解析成一个Object，然后将这个Object赋值给this.data。

.subscribe同样可以处理失败和流完结的情况，只要分别在第二和第三个参数中传入一个函数就可以了。

发送一个POST请求

使用@angular/http发起POST请求与发起GET请求非常类似，仅仅多了一个额外的参数：请求体。

makePost(): void {
  this.http.post(
    'http://jsonplaceholder.typicode.com/posts/1',
    JSON.stringify({
      body: 'bar',
      title: 'foo',
      userId: 1
    }))
    .subscribe((res: Response) => {
      this.data = res.json();
    });
}

PUT/PATCH/DELETE/HEAD请求

http.put和http.patch分别用于PUT和PATCH请求，并且它们都带有一个URL和一个请求体。

http.delete和http.head分别用于DELETE和HEAD请求，并且它们都带有一个URL（没有请求体）。

转载于:https://my.oschina.net/u/3057435/blog/1189296