angular2 HttpClient

2017-12-27

angular2

Get和Post 一般用法

getTest

  getTest() {
    this.httpClient.get(`${this.base_url}/topics`)
    .subscribe(data => {
      console.log(data);
    }, error => {
      console.log(error);
    })
  }

postTest

  postTest() {
    const accesstoken = this.accesstoken;
    this.httpClient.post(`${this.base_url}/accesstoken`, {
      accesstoken
    }).subscribe(data => {
      console.log(data);
    }, error => {
      console.log(error);
    })
  }

几个常见的配置项

params

通过params可配置get参数。

const params = new HttpParams();
params.append('page', '1');
params.append('tab', 'ask');
params.append('limit ', '30');
params.append('mdrender ', 'false');
this.httpClient.get(`${this.base_url}/topics`, {
    params
})

responseType

通过responseType可配置以那种格式解析响应内容，默认是json。

const responseType = 'text';

this.httpClient.get(`${this.base_url}/topics`, {
    responseType
})

observe

通过observe可配置订阅的时候是否获取完整的响应，如果值为response，会返回完整的响应体，包括响应状态，响应头等等。如果值为body，只会返回响应内容。默认值是body。

const observe = 'response';

this.httpClient.get(`${this.base_url}/topics`, {
    observe
})

headers

通过headers可配置自定义的响应头。

let headers = new HttpHeaders();
headers = headers.set('Authorization', 'my-auth-token');
this.httpClient.get(`${this.base_url}/topics`, {
    headers
})

拦截器

要实现拦截器，需新建一个类实现HttpInterceptor接口，实现HttpInterceptor接口，需要实现intercept函数，我们可以在里面对请求和响应做统一处理。

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class NoopInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // 更改请求信息
        const temp = req.clone({
            headers: req.headers.set('common', 'commonheader')
        });
        return next.handle(temp).map(event => {
            // 更改响应信息
            if (event instanceof HttpResponse) {
                return event.clone({
                    body: `${event.body}test`
                });
            } else {
                return event;
            }
        });
    }
}

拦截器类实现好后，需要在主模块中注册。HTTP_INTERCEPTORS是一个InjectionToken，multi为true表示，通过该token取到的注入值是一个数组。我们可以用自己的拦截器类对其进行扩展。如果有多个拦截器，拦截器按注册的顺序执行。

@NgModule({
  ...
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: NoopInterceptor,
      multi: true
    }
  ],
  ...
})
export class HttpModule { }

流程控制

取消请求

在订阅一个请求后我们会得到一个subscriber,调用其unsubscribe()方法可以取消订阅,从而取消请求.

const subscriber = this.httpClient.get(`${this.base_url}/topics`)
.subscribe(data => {
    console.log(data);
}, error => {
    console.log(error);
})
subscriber.unsubscribe()

在一个请求执行完成之后,用该请求的数据,开始另外一个请求.

思路:先使用map操作符将第一个请求的响应数据转换成另外一个请求对象,这样得到的是一个高阶Observable,然后再用mergeAll将高阶Observable转换成低阶Observable.

const req1 = this.httpClient.get(`${this.base_url}/topics`);
const req2 = this.httpClient.get(`${this.base_url}/topics`);
req1.map(data => req2).mergeAll().subscribe(data => {
    console.log(data);
});

使用mergeMap操作符简写.

const req1 = this.httpClient.get(`${this.base_url}/topics`);
const req2 = this.httpClient.get(`${this.base_url}/topics`);
req1.mergeMap(data => req2).subscribe(data => {
    console.log(data);
});

在一个请求执行完之后,执行另外一个请求

思路:Observable的静态方法concat会确保传入的Observable按顺序执行,并依次emit每一个请求的数据.

const req1 = this.httpClient.get(`${this.base_url}/topics`);
const req2 = this.httpClient.get(`${this.base_url}/topics`);
Observable.concat(req1, req2).subscribe(data => {
    console.log(data);
})

在两个请求执行完成之后做一些操作.

思路:Observable的静态方法forkJoin会等待所有的Observable按执行完成后,一次emit所有数据.

const req1 = this.httpClient.get(`${this.base_url}/topics`);
const req2 = this.httpClient.get(`${this.base_url}/topics`);
Observable.forkJoin(req1, req2).subscribe(data => {
    console.log(data);
})

避免请求重发

思路: switchMap会在接收到一个新的Observable时,取消所有之前未完成的Observable.

const req1 = this.httpClient.get(`${this.base_url}/topics`);
this.subject = new Subject().switchMap(() => req1);
this.subject.subscribe(data => {
    console.log(data);
});
this.subject.next();