在ionic里面使用rxjs的concatAll()进行XHRs的异步变同步处理

问题：我在对接第三方处理一些数据返回的时候会与本地的接口有异步出现的情况（例如调高德之类的）；

目标：我想让调用的XHR按顺序一个个的执行，第一个http完全执行完毕再执行第二个

http-servive.ts

import { HttpClient } from '@angular/common/http';
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';
import { Injectable } from '@angular/core';


import { Observable } from "rxjs"
import { UtilsProvider } from "../utils/utils"
import { SERVER_URL } from "../constants/constants"
import { ModalController } from 'ionic-angular';

@Injectable()
export class HttpServiceProvider {

  constructor(public http: Http,public modalCtrl:ModalController) {
    console.log('Hello HttpServiceProvider Provider');
  }

  public postFormData(url: string, paramMap?: any): Observable {
    let headers = new Headers({
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
      'Accept': 'application/json;charset=utf-8'
    });
    return this.http.post(SERVER_URL + url, HttpServiceProvider.buildURLSearchParams(paramMap).toString(), new RequestOptions({ headers: headers, withCredentials: true }))
  }


  public get(url: string, paramMap?: any): Observable {

    //return this.http.get(url, {search: HttpServiceProvider.buildURLSearchParams(paramMap),withCredentials:true});
    return this.http.get(SERVER_URL + url, { search: HttpServiceProvider.buildURLSearchParams(paramMap) });
  }

  // 默认Content-Type为application/json;
  public post(url: string, body: any = null): Observable {

    return this.http.post(SERVER_URL + url, body, new RequestOptions({ withCredentials: true }));
  }

  public put(url: string, body: any = null, options?): Observable {

    return this.http.put(SERVER_URL + url, body, options);
  }

  public delete(url: string, paramMap?: any): Observable {

    return this.http.delete(SERVER_URL + url, { search: HttpServiceProvider.buildURLSearchParams(paramMap) });
  }

  public patch(url: string, body: any = null, options?): Observable {

    return this.http.patch(SERVER_URL + url, body, options);
  }

  public head(url: string, paramMap?: any): Observable {

    return this.http.head(SERVER_URL + url, { search: HttpServiceProvider.buildURLSearchParams(paramMap) });
  }

  public options(url: string, paramMap?: any): Observable {

    return this.http.options(SERVER_URL + url, { search: HttpServiceProvider.buildURLSearchParams(paramMap) });
  }

  public static buildURLSearchParams(paramMap): URLSearchParams {
    let params = new URLSearchParams();
    for (let key in paramMap) {
      let val = paramMap[key];
      if (val instanceof Date) {
        val = UtilsProvider.dateFormat(val, 'yyyy-MM-dd hh:mm:ss')
      }
      params.set(key, val);
    }
    return params;
  }

}

我想这个http-service大家再熟悉不过了吧（SERVER_URL是我本地的ip，我就不放出来啦）

about.ts

import { Http } from '@angular/http';
import { concatAll  } from 'rxjs/operators';
import { of } from 'rxjs/observable/of';


export class AboutPage {

  constructor(
public navCtrl: NavController, 
public http: HttpServiceProvider,
  ) { }

  ionViewDidEnter() {

    const obs1 = this.http.get('xxxxxxxxxxxxxxxxxxx' )   // http的返回
      .map(r => r.json())    // 以下是处理接口1返回的数据
      .do(r => {                  // 对返回的数据做处理
        console.log(r);

      })
    const obs2 = this.http.get('xxxxxxxxxxxxxxxxxxx' )  //  http的返回  
      .map(r => r.json())    // 以下是处理接口2返回的数据
      .do(r => {                  // 对返回的数据做处理
        console.log(r);

      })

    const source = of(obs1, obs2);    // of 需要引入（import { of } from 'rxjs/observable/of';）
    const example = source.pipe(concatAll())    // concatAll 需要引入（import { concatAll  } from 'rxjs/operators';），pipe()并不是angular的管道，是rxjs新版的东西

    example.pipe()
      .subscribe(
        r => {
          console.log('------------------------------------------------------------------');
          console.log(r);

        })
  }
}

结果：

image.png

concatAll的学习地址：https://rxjs-cn.github.io/learn-rxjs-operators/operators/combination/concatall.html