Angular 使用 RxJS 优化处理Http请求

Angular自带有http模块能够方便的进行Http请求。没必要像Vue那样安装配置axios。

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: 'app/app.component.html'
})
export class AppComponent {

  constructor(private http: HttpClient) { }
  
  ngOnInit() {
    // 发起一个get请求
    this.http.get('/api/people/1').subscribe(json => console.log(json));
  }
}

复制代码

注意：上面的this.http.get... 处理HTTP最好放到单独的Service文件中，再注入到Component。这里为了演示没有这么作。

优化有顺序依赖的多个请求

有些时候咱们须要按顺序发起多个请求，根据第一个请求返回的结果中的某些内容，做为第二个请求的参数，好比下面代码。

ngOnInit() {
    this.http.get('/api/people/1').subscribe(character => {
      this.http.get(character.homeworld).subscribe(homeworld => {
        character.homeworld = homeworld;
        this.loadedCharacter = character;
      });
    });
  }
复制代码

上面的嵌套写法可读性不那么好，咱们能够使用RxJS提供的mergeMap操做符来优化上述代码

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { mergeMap } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: 'app/app.component.html'
})
export class AppComponent {
  homeworld: Observable<{}>;
  constructor(private http: HttpClient) { }
  
  ngOnInit() {
    this.homeworld = this.http.get('/api/people/1')
    .pipe(
      mergeMap(character => this.http.get(character.homeworld))
    );
  }
}
复制代码

mergeMap 操做符用于从内部的 Observable 对象中获取值，而后返回给父级流对象。 能够合并 Observable 对象

处理并发请求

forkJoin 是 Rx 版本的 Promise.all()，即表示等到全部的 Observable 都完成后，才一次性返回值。

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { forkJoin } from "rxjs/observable/forkJoin";

@Component({
  selector: 'app-root',
  templateUrl: 'app/app.component.html'
})
export class AppComponent {
  loadedCharacter: {};
  constructor(private http: HttpClient) { }
  
  ngOnInit() {
    let character = this.http.get('https://swapi.co/api/people/1');
    let characterHomeworld = this.http.get('http://swapi.co/api/planets/1');

    forkJoin([character, characterHomeworld]).subscribe(results => {
      // results[0] is our character
      // results[1] is our character homeworld
      results[0].homeworld = results[1];
      this.loadedCharacter = results[0];
    });
  }
}
复制代码

在线演示

错误处理请求

使用 catchError 处理observable中的错误，须要返回一个新的 observable 或者直接抛出error

例1 ，在请求方法内部处理错误，若请求失败返回一个默认值，看起来用户也感知不到发生了错误

// http.service.ts
  getPostDetail(id) {
    return this.http
    .get<any>(`https://jsonplaceholder.typicode.com/posts/${id}`)
      .pipe(
        // catchError 须要 returning a new observable or throwing an error.
        catchError(err => {
          // 若是发生错误，用缺省值，(尝试修改成错误地址)
          return of({
            userId: 1,
            id: 1,
            title: '-occaecati excepturi optio reprehenderit-',
            body: '-eveniet architecto-'
          });
        })
    )
  }
  // component 中调用
  getPostDetail() {
    this.postDetail$ = this.service.getPostDetail(1)
    .subscribe(val => {
      console.log(val);
    });
  }

复制代码

例2 直接把错误抛出来，在外部处理错误，好比来个弹窗，提示告诉用户

getPostDetail(id) {
    return this.http
    .get<any>(`${this.endpoint}/posts2/${id}`)
      .pipe(
        // catchError  returning a new observable or throwing an error.
        catchError(err => {
          throw err;
        })
      )
  }

// 改造调用方法
  getPostDetail() {
    this.postDetail$ = this.service.getPostDetail(1)
      .subscribe(
        (next) => {
        },  
       // 这里接收内部抛出的错误
        err => {
          // 能够加入本身的错误处理逻辑，搞个弹窗，notify等
          console.log(err);
        }
      )
  }
复制代码

参考

使用 RxJS 处理多个 Http 请求