問(wèn)題：我在對(duì)接第三方處理一些數(shù)據(jù)返回的時(shí)候會(huì)與本地的接口有異步出現(xiàn)的情況（例如調(diào)高德之類的）；
目標(biāo)：我想讓調(diào)用的XHR按順序一個(gè)個(gè)的執(zhí)行问麸，第一個(gè)http完全執(zhí)行完畢再執(zhí)行第二個(gè)
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<Response> {
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<Response> {
//return this.http.get(url, {search: HttpServiceProvider.buildURLSearchParams(paramMap),withCredentials:true});
return this.http.get(SERVER_URL + url, { search: HttpServiceProvider.buildURLSearchParams(paramMap) });
}
// 默認(rèn)Content-Type為application/json;
public post(url: string, body: any = null): Observable<Response> {
return this.http.post(SERVER_URL + url, body, new RequestOptions({ withCredentials: true }));
}
public put(url: string, body: any = null, options?): Observable<Response> {
return this.http.put(SERVER_URL + url, body, options);
}
public delete(url: string, paramMap?: any): Observable<Response> {
return this.http.delete(SERVER_URL + url, { search: HttpServiceProvider.buildURLSearchParams(paramMap) });
}
public patch(url: string, body: any = null, options?): Observable<Response> {
return this.http.patch(SERVER_URL + url, body, options);
}
public head(url: string, paramMap?: any): Observable<Response> {
return this.http.head(SERVER_URL + url, { search: HttpServiceProvider.buildURLSearchParams(paramMap) });
}
public options(url: string, paramMap?: any): Observable<Response> {
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;
}
}
我想這個(gè)http-service大家再熟悉不過(guò)了吧（SERVER_URL是我本地的ip严卖，我就不放出來(lái)啦）
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返回的數(shù)據(jù)
.do(r => { // 對(duì)返回的數(shù)據(jù)做處理
console.log(r);
})
const obs2 = this.http.get('xxxxxxxxxxxxxxxxxxx' ) // http的返回
.map(r => r.json()) // 以下是處理接口2返回的數(shù)據(jù)
.do(r => { // 對(duì)返回的數(shù)據(jù)做處理
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);
})
}
}
結(jié)果：
image.png
concatAll的學(xué)習(xí)地址：https://rxjs-cn.github.io/learn-rxjs-operators/operators/combination/concatall.html
