rxjs switchMap操作符
栏目: JavaScript · 发布时间: 6年前
内容简介:在写分页数据请求时,将页数大小和当前页传入后台,就能获取到分页数据了,一开始写了一个方法,将页数和大小传入,返回可观察数据。顺利获取到了数据,但在写删除时,删除最后一条信息时,会出现空数据.
在写分页数据请求时,将页数大小和当前页传入后台,就能获取到分页数据了,一开始写了一个方法,将页数和大小传入,返回可观察数据。
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;
});
}
顺利获取到了数据,但在写删除时,删除最后一条信息时,会出现空数据.
在删除第二页的最后一条数据时,删除后重新请求时还是以第二页请求,就没数据了.
一开始是在删除时判断当前内容是否只有一条,如果只有一条重新请求数据时请求上一页的数据.
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 。
/**
*获取分页数据
*/
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);
}
}));
}
这样一来,在调用的时候就不用担心返回数据为空了,也成功的将逻辑和调用分离了,好维护。
以上所述就是小编给大家介绍的《rxjs switchMap操作符》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- JavaScript骚操作之操作符
- Android RxJava 操作符详解系列:条件 / 布尔操作符
- C语言中点操作符(.)和箭头操作符(->)的不同之处
- JS操作符拾遗
- 浅谈JavaScript位操作符
- TypeScript keyof 操作符
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
解构产品经理:互联网产品策划入门宝典
电子工业出版社 / 2018-1 / 65
《解构产品经理:互联网产品策划入门宝典》以作者丰富的职业背景及著名互联网公司的工作经验为基础,从基本概念、方法论和工具的解构入手,配合大量正面或负面的案例,完整、详细、生动地讲述了一个互联网产品经理入门所需的基础知识。同时,在此基础上,将这些知识拓展出互联网产品策划的领域,融入日常工作生活中,以求职、沟通等场景为例,引导读者将知识升华为思维方式。 《解构产品经理:互联网产品策划入门宝典》适合......一起来看看 《解构产品经理:互联网产品策划入门宝典》 这本书的介绍吧!