rxjs处理http请求超时

博客原文地址

使用场景

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

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();

 

转载于:https://www.cnblogs.com/stardee/p/9623055.html