之前遇到一个需求改进，就是页面按钮点击后向后台请求数据，loading出现， 当数据请求成功之后，返回200 ，loading消失，但是我这里的后台数据相当不稳定，长期出现500,404等各类问题，导致 Observable监听返回失败，loading就一直在那里转，导致错误的兼容性不好，所以我决定将其与数据请求的过程脱钩，不论请求是否成功，点击按钮之后一段时间，loading自动取消（中途尝试过很多http统一处理，但是因为太过于耗费页面性能，且涉及内存监听过多，最终放弃），我使用“优雅的rxjs" 来完成这个工作：

untils 中 统一方法:

 * 页面loading触发及定时取消  * @type {{loadWait: (num?: number): Observable<boolean>}}  */ export const loadWait = (num = 100) => {   return timer(0, num)     .pipe(take(2))     .pipe(       map(val => {         return !Boolean(val);       }),     ); };

 

在主页面 将以下代码加入http请求函数中：

loadWait().subscribe(val => {       this.loading = val;       this.cdr.detectChanges();     });

 参数可填写指定等待时间，这个需要根据页面的数据量来判断，一般都在100mm以内完成，而且会因为各类原因自动延长loading出现的时间，页面的性能也没有多大的损害。