关于sap:SAP-电商云-UI-ActiveCartService-的-isStable-API-里的-EMPTY-操作符

33次阅读

共计 2084 个字符，预计需要花费 6 分钟才能阅读完成。

isStable API 源代码如下：

return this.activeCartId$.pipe(switchMap((cartId) => this.multiCartService.isStable(cartId)),
      debounce((state) => (state ? timer(0) : EMPTY)),
      distinctUntilChanged());

EMPTY 操作符：间接发送 complete 事件。

看一个简略的例子：

import {EMPTY} from 'rxjs';

EMPTY.subscribe({next: () => console.log('Next'),
  complete: () => console.log('Complete!'),
});

// Outputs
// Complete!

console.log('fire');
EMPTY.subscribe((value) => console.log('value:', value));

咱们永远不会在 console 里看到 Next 或者 value 的打印，因为 EMPTY 不 emit 任何数据，只有 complete 的 event.

这里引入 debounce 是为了防止 flicker spinner.
当数据加载十分快时，如果用户看到只有几分之一秒的 spinner 动画一闪而过，这是很不好的用户体验。

防止这个用户交互问题的形式之一，是引入 非闪动加载器(Non-flicker loader).

这个 loader 须要满足的需要：

如果加载工夫少于 1 秒——咱们基本不会显示 loader；
如果加载工夫超过一秒——咱们开始显示加载器并在屏幕上放弃 至多 1 秒。

例如，咱们的数据加载须要 1.2 秒。第 1 个 1 秒钟咱们什么都不显示，1 秒钟过后呈现一个加载器。又过了 0.2 秒后，咱们收到数据，但咱们将 spinner 在屏幕上 再放弃 0.8 秒，此这个 spinner 不会呈现闪动景象。

理论代码：

readonly load$ = new Subject<void>();

readonly cancel$ = new Subject<void>();

readonly data$ = this.load$.pipe(switchMapTo(nonFlickerLoader(this.dataService.load())),
  map(value => value ?? 'Loading...'),
  startWith('No data'),
  takeUntil(this.cancel$),
  repeat(),);

这里咱们有两个 triggering subject 来开始和勾销加载。假如咱们的 nonFlickerLoader 在应该批示加载时收回 null，而在咱们应该显示它的工夫点，收回理论被加载的数据。咱们应用 repeat 操作符，所以咱们能够屡次触发它。

当初让咱们持续编写 nonFlickerLoader 函数。首先咱们定义接口。咱们应用通用 <T> 因为咱们不晓得咱们将取得的响应类型：

function nonFlickerLoader<T>(
  data$: Observable<T>,
  delay: number = 1000,
  duration: number = 1000
): Observable<T | null> {// ...}

这个函数承受数据 Observable 和两个可选参数来示意咱们在显示加载批示之前期待多长时间以及应该显示该 spinner 的最小持续时间。

函数具体的实现代码，首先创立一个 loading Observable：

const loading$ = timer(delay, duration).pipe(map(i => !i),
  takeWhile(Boolean, true),
  startWith(false),
)

这个 $loading 是一个标记位，通知咱们 spinner 是否应该显示。

map 将除了第一个 emit 值 false 之外的所有值全副转换成 false.
takeWhile 只容许第一个 emit 值通过。

map 将除第一个之外的所有发射设置为 false。takeWhile 用于仅在延迟时间到期后和持续时间过来后的第二次发射时让第一次发射通过。请留神，咱们应用第二个参数让布尔条件失败的假值在实现流之前通过。咱们还 startWith(false) 因为咱们只想在给定提早后显示加载批示。

留神 timer 的第二个参数：

// RxJS v6+
import {timer} from 'rxjs';

/*
  timer takes a second argument, how often to emit subsequent values
  in this case we will emit first value after 1 second and subsequent
  values every 2 seconds after
*/
const source = timer(1000, 2000);
//output: 0,1,2,3,4,5......
const subscribe = source.subscribe(val => console.log(val));

上面的代码含意是，1 秒之后发射整数 1，而后每隔 2 秒发射一个递增的整数序列。

正文完