进度条

作者 @barryrowe

本食谱演示了动态进度条的创建、模拟多个请求的管理，并在每个请求完成后更新总体进度。

进度条 - 图1

示例代码

(
StackBlitz
)

  1. import { Observable } from 'rxjs/Observable';
  2. import { of } from 'rxjs/observable/of';
  3. import { empty } from 'rxjs/observable/empty';
  4. import { fromEvent } from 'rxjs/observable/fromEvent';
  5. import { from } from 'rxjs/observable/from';
  6. import {
  7.   delay,
  8.   switchMapTo,
  9.   concatAll,
  10.   count,
  11.   scan,
  12.   withLatestFrom,
  13.   share
  14. } from 'rxjs/operators';
  16. const requestOne = of('first').pipe(delay(500));
  17. const requestTwo = of('second').pipe(delay(800));
  18. const requestThree = of('third').pipe(delay(1100));
  19. const requestFour = of('fourth').pipe(delay(1400));
  20. const requestFive = of('fifth').pipe(delay(1700));
  22. const loadButton = document.getElementById('load');
  23. const progressBar = document.getElementById('progress');
  24. const content = document.getElementById('data');
  26. // 请求完成后更新进度条
  27. const updateProgress = progressRatio => {
  28.   console.log('Progress Ratio: ', progressRatio);
  29.   progressBar.style.width = 100 * progressRatio + '%';
  30.   if (progressRatio === 1) {
  31.     progressBar.className += ' finished';
  32.   } else {
  33.     progressBar.className = progressBar.className.replace(' finished', '');
  34.   }
  35. };
  36. // 通知更新的简单辅助函数
  37. const updateContent = newContent => {
  38.   content.innerHTML += newContent;
  39. };
  41. const displayData = data => {
  42.   updateContent(`<div class="content-item">${data}</div>`);
  43. };
  45. // 模拟5个不同时长的请求
  46. const observables: Array<Observable<string>> = [
  47.   requestOne,
  48.   requestTwo,
  49.   requestThree,
  50.   requestFour,
  51.   requestFive
  52. ];
  54. const array$ = from(observables);
  55. const requests$ = array$.pipe(concatAll());
  56. const clicks$ = fromEvent(loadButton, 'click');
  58. const progress$ = clicks$.pipe(switchMapTo(requests$), share());
  60. const count$ = array$.pipe(count());
  62. const ratio$ = progress$.pipe(
  63.   scan(current => current + 1, 0),
  64.   withLatestFrom(count$, (current, count) => current / count)
  65. );
  67. clicks$.pipe(switchMapTo(ratio$)).subscribe(updateProgress);
  69. progress$.subscribe(displayData);
html
  1. <div class="progress-container">
  2.   <div class="progress" id="progress"></div>
  3. </div>
  5. <button id="load">
  6. Load Data
  7. </button>
  9. <div id="data">
  11. </div>

感谢 @johnlinquist 对本示例的帮助！

使用到的操作符