rxjs switchMap操作符

ZadarrienChina 2019-07-01

在写分页数据请求时,将页数大小和当前页传入后台,就能获取到分页数据了,一开始写了一个方法,将页数和大小传入,返回可观察数据。

service:
/**
     *获取分页数据
     */
    getMajorByPage(page: number, size: number): Observable<Page<Major>> {
        const params = {
            page: page.toString(),
            size: size.toString()
        };
        return this.http.get<Page<Major>>(this.baseUrl + '/page', {params: params});
    }
组件:
queryPage() {
        this.majorService.getMajorByPage(this.page - 1, this.size)
            .subscribe((data) => {
                this.majorList = data.content;
                this.total = data.totalElements;
                this.page = data.number + 1;
                this.size = data.size;
            });
    }

顺利获取到了数据,但在写删除时,删除最后一条信息时,会出现空数据.

rxjs switchMap操作符

rxjs switchMap操作符

在删除第二页的最后一条数据时,删除后重新请求时还是以第二页请求,就没数据了.

一开始是在删除时判断当前内容是否只有一条,如果只有一条重新请求数据时请求上一页的数据.

deleteMajor(majorId: number) {
        this.majorService.deleteMajor(majorId).subscribe(() => {
            this.allChecked = false;
            this.indeterminate = false;
            if (this.majorList.length === 1) {
                this.page--;
            }
            this.reload();
        });
    }

这样解决了问题,但在多选删除时又没有用了,于是想写一个一劳永逸的方法,在获得请求数据时,判断内容是否为空,如果内容为空,并且请求的不是第一页就重新请求:

queryPage() {
        this.majorService.getMajorByPage(this.page - 1, this.size)
            .subscribe((data) => {
                if (data.content.length === 0 && data.number !== 0) {
                    this.page--;
                    this.majorService.getMajorByPage(this.page - 1, this.size);
                } else {
                    this.majorList = data.content;
                    this.total = data.totalElements;
                    this.page = data.number + 1;
                    this.size = data.size;
                }
            });
    }

每一次调用这个方法,都要对请求回来的数据判断,写完之后感觉太麻烦了,想到这是一个可观察数据,有很多操作符可以对数据进行操作,如果有操作符能在数据返回时进行判断,再返回我们想返回的可观察数据就好了.

去搜了一下,找到一个操作符,switchmap:

switchMap 和其他打平操作符的主要区别是它具有取消效果。在每次发出时,会取消前一个内部 observable (你所提供函数的结果) 的订阅,然后订阅一个新的 observable 。
看了下大致用法,就是能更换observable,可以满足我的需求,修改了一下服务层的代码,也能完成需求:
/**
     *获取分页数据
     */
    getCollegeByPage(page: number, size: number): Observable<Page<Major>> {
        const params = {
            page: page.toString(),
            size: size.toString()
        };
        return this.http.get<Page<Major>>(this.baseUrl + '/page', {params: params})
            .pipe(switchMap((majorPage) => {
                if (majorPage.content.length === 0 && majorPage.number !== 0) {
                    return this.getCollegeByPage(page - 1, size);
                } else {
                    return of(majorPage);
                }
            }));
    }

这样一来,在调用的时候就不用担心返回数据为空了,也成功的将逻辑和调用分离了,好维护。

相关推荐