5分钟GET H5 - 被玩坏了的异步处理 RxJS（一）

知识点 GET：什么是异步，用什么工具处理异步
建议玩家等级：学生党，大前端码农，有志于大前端的其它码农
阅读此文先解锁技能：Angular 成功运行 Hello World

PART 1: 同步(Sync) vs 异步(Async)
举个🌰：技术宅小明上班第一天早上起床后做了3件任务，

1. 打开自动煮蛋器，并一直等待煮蛋完成，用时8分钟
2. 打开自动咖啡机，并一直等待咖啡完成，用时2分钟
3. 打开自动面包机，并一直等待面包完成，用时6分钟

总共用时：8+2+6=16分钟，于是小明上班迟到了😭

上班第二天早上，小明调整了任务策略，

1. 打开自动煮蛋器，然后不管它，8分钟后，鸡蛋完成
2. 打开自动咖啡机，然后不管它，2分钟后，咖啡完成
3. 打开自动面包机，然后不管它，6分钟后，面包完成

总共用时：8分钟，小明成功把早起这件事的时间效率提升了50%

理解同步(Sync)：小明第一天执行每件任务，会一直等待当前任务完成，才退出任务执行下一件任务
理解异步(Async)：小明第二天执行每件任务，开启当前任务后就立刻退出该任务，并执行下一件任务
敲黑板：异步是提升效率利器，系统效率如此，生活效率亦如此

PART 2: 被观察者(Observable) vs 观察者(Observer)
接着举小明的🌰，来理解程序猿世界里的小明和煮蛋器长什么样子

图 1
理解观察者(Observer)：小明是观察者。小明观察煮蛋器
理解被观察者(Observable)：煮蛋器是被观察者。煮蛋器被小明观察，完成煮蛋后发出消息通知小明
理解订阅(Subscribe)：小明订阅煮蛋器。小明打开煮蛋器，等同于给了自己一个确定的通知预期，煮蛋器完成后会通知自己
敲黑板：观察者 订阅 被观察者，被观察者 发送消息通知 观察者

PART 3: RxJS 帮你实现
配合 图1 重点理解 next()

import { Observable } from 'rxjs';

console.log('[5分钟GET H5] - 被玩坏了的异步处理 RxJS');

// 煮蛋器
const eggMachine: Observable<any> = Observable.create((xiaoMing: Observer<any>) => {
  console.log('8点' + this.minute + '分 煮鸡蛋');
  this.minute += 8;
  xiaoMing.next('8点' + this.minute + '分 [鸡蛋完成]');
});

// 面包机
const toastMachine: Observable<any> = Observable.create((xiaoMing: Observer<any>) => {
  console.log('8点' + this.minute + '分 烤面包');
  this.minute += 6;
  xiaoMing.next('8点' + this.minute + '分 [面包完成]');
});

// 咖啡机
const cafeMachine: Observable<any> = Observable.create((xiaoMing: Observer<any>) => {
  console.log('8点' + this.minute + '分 煮咖啡');
  this.minute += 2;
  xiaoMing.next('8点' + this.minute + '分 [咖啡完成]');
});

配合 图1 重点理解 subscribe()

// 同步
console.log('[5分钟GET H5] - 同步的第一天：');
this.minute = 0;
eggMachine.subscribe((message: Observer<any>) => {
  console.log(message);

  cafeMachine.subscribe((message: Observer<any>) => {
    console.log(message);

    toastMachine.subscribe((message: Observer<any>) => {
      console.log(message);
    });
  });
});

// 异步
console.log('[5分钟GET H5] - 异步的第二天：');
this.minute = 0;
eggMachine.subscribe((message: Observer<any>) => {
  console.log(message);
});

this.minute = 0;
cafeMachine.subscribe((message: Observer<any>) => {
  console.log(message);
});

this.minute = 0;
toastMachine.subscribe((message: Observer<any>) => {
  console.log(message);
});

Part Final: Do It Yourself
此刻应有掌声，恭喜你只花5分钟GET了知识点：

1. 同步和异步
2. 观察者和被观察者
3. 大前端鄙视链技术之一RxJS入门

下载本文源代码 亲自调试一下

---

想转载就转载吧，知识是无界的~