1、回调函数

/* 利用回调函数执行异步操作 */  getCallBackData(callback) {  // 把函数作为参数传递进去    setTimeout(() => {      let data = 'this is callback data';      callback(data);  // 将异步数据作为参数传递给函数    }, 1000)  }
/* 函数的调用获取 callback data */  this.getCallBackData((result) => {    console.log(result);  // 回调函数只能在传入函数（参数）中处理  });

2、Promise

/* Promise */getPromiseData() {    return new Promise((resolve, reject) => {      setTimeout(() => {        const data = 'this is Promise data';        resolve(data); /*将异步数据及相关操作封装在 Promise对象中，通过resolve返回*/      }, 3000)    })  }

/*  获取 promise data */const promiseData = this.getPromiseData()promiseData.then(x => {    console.log(x);  })

3、Rxjs

/* rxjs */getRxjsData() {  return new Observable(observer => {    setTimeout(() => {      const data = 'this is rxjs data';      observer.next(data);  /* 将异步数据及相关操作封装在 Observable 中，通过next返回*/    }, 3000);  })}

 /* 获取 rxjs data */const rxjsData = this.request.getRxjsData();const stream = rxjsData.subscribe(x => { /*将 subscribe 返回的subscription赋值给一个变量，取消订阅要通过返回的subscription来取消*/    console.log(x);  });

注意：不管是通过 Promise 的 resolve返回，还是通过 getRxjsData 的 observer 返回，返回的时间用户都不能马上得到，必须分别使用 then 和 subscribe 来订阅

4、Rxjs取消订阅

/* 取消订阅 3s后返回rxjs data,但是刚过1s，我想取消，不想订阅了 */setTimeout(() => {    stream.unsubscribe();     /*promise创建之后动作无法撤回，而Observable可以撤回发出的动作*/}, 1000)

5、rxjs订阅后多次执行

getMutipleRxjsData() {    return new Observable(observer => {      let count = 0;      setInterval(() => {        observer.next(count++);        /*对于 promise来说，最终结果要么是resolve或者reject,而且都只能触发一次，如果在同一个promise对象上多次调用resolve方法，则会抛出异常*/        /*而Observable不一样，它可以通过next方法源源不断的触发下一个值*/      }, 1000);    })}
/* rxjs 多次执行 */this.getMutipleRxjsData().subscribe(x => {      console.log(x);})

本文完~

学习更多技能

请点击下方公众号