异步程序处理方式

callback回调函数

function getData(fn) {
  setTimeout(() => {
    const data = '张三';
    fn(data);
  }, 1000)
}

getData((data) => {
  console.log(data);
})

Promise

function getData() {
  return new Promise(resolve => {
    setTimeout(() => {
      const data = '张三';
      resolve(data);
    }, 1000)
  })
}

getData().then(data => console.log(data));

RXJS

• 优势：可中途取消、一次订阅可持续执行

function getData() {
  return new Observable(observer => {
    setTimeout(() => {
      const data = '张三';
      observer.next(data);
    }, 1000)
  })
}

const sub = getData().subscribe(data => console.log(data));
sub.unsubscribe(); // 可取消

function getIntervalData() {
  return new Observable(observer => {
    setInterval(() => {
      const data = '张三';
      observer.next(data);
    }, 1000)
  })
}
getIntervalData().subscribe(data => console.log(data)); // 持续执行

• 工具函数：map、filter

function getData() {
  return new Observable(observer => {
    setInterval(() => {
      const data = '张三';
      observer.next(data);
    }, 1000)
  })
}

this.getData().pipe(
  filter((data: number) => {
    if (data % 2 === 0) {
      return true;
    }
  }),
  map(value => {
    return value * 2;
  })
).subscribe(data => console.log(data));