博客原文地址

使用场景

用户进行一个操作请求后台而长时间未响应，我们希望给用户一个信息展示（请求超时，网络不好…）.

RxJS实现

关于RxJS请看这里

我这个功能的实现主要使用 delay，race两个操作符。
* delay 通过给定的超时或者直到一个给定的时间来延迟源 Observable 的发送。延迟时间(以毫秒为单位的数字)或 Date 对象(发送延迟到这个时间点)。
* race 返回 Observable，该 Observable 是源 Observable 和提供的 Observables 的组合中 第一个发出项的 Observable 的镜像。

具体实现过程代码（使用angualr和ionic）如下：
我封装成了service方便使用。主要看timeoutDeal方法。
service.ts

import { Injectable } from "@angular/core";
import { delay, map, race } from "rxjs/operators";
import { Observable } from "rxjs/Observable";
import { AlertController, LoadingController } from "ionic-angular";@Injectable()
export class HttpTimeoutService {loading: any;timer: any;timers:any[]=[];constructor(private loadingCtrl: LoadingController,private alertCtrl: AlertController) {}// **参数name和参数mes相同showLoading(name) {const self = this;let obj={name:name,timer:undefined,loading:undefined};const timer = setTimeout(() => {let loading = this.loadingCtrl.create();loading.present();obj.loading=loading;}, 500);obj.timer=timer;this.timers.push(obj);}clearTimer(name) {const self = this;for(let i=0;i<this.timers.length;i++){if(this.timers[i].name===name){if(this.timers[i].loading){this.timers[i].loading.dismiss();}clearTimeout(this.timers[i].timer);this.timers.splice(i,1);return;}}}timeoutDeal(mes) {const self = this;let TIME_OUT = 6000;let cancel$ = Observable.of(null).pipe(delay(TIME_OUT),map(_ => {// throw 'error';self.clearTimer(mes);self.alertCtrl.create({title: '连接超时',message: '当前网络不稳定，请寻找一个稳定网络！',buttons: ['确定']}).present();throw mes + 'timeout!'  // 重要}));return cancel$;}}

pipe是 Observable 中有一个内置的 pipe 方法 (Observable.prototype.pipe)，它可以用类似于之前的链式调用的方式来组合操作符。RxJS 5.5版本之后。

使用：

...
import 'rxjs/add/operator/race';
import 'rxjs/add/operator/delay';
export class HomePage extends BasePage {...constructor(private httpTimeoutService: HttpTimeoutService,private smartSellerHomepageService: SmartSellerHomepageServiceProxy,....this.httpTimeoutService.showLoading('getFirstPageInfo');this.smartSellerHomepageService.getFirstPageInfo(moment()).race(this.httpTimeoutService.timeoutDeal('getFirstPageInfo')).subscribe(res => {this.httpTimeoutService.clearTimer('getFirstPageInfo');// console.log(res);this.firstPageInfo = res;}, error => {}, ()=>{this.httpTimeoutService.clearTimer('getFirstPageInfo'););...

```````11月28日更新````````

最近新项目中使用rxjs版本是v6以上

Observable.of的用法改了使用
import { of } from 'rxjs'
race 最好的用法：
import { race } from 'rxjs'

race($a, $b).subscribe();