回调函数、Promise和Rxjs三种异步获取数据的方法（简单例子,帮助初学者理解）

这三种方法的简单实例， 帮助理解

// 第一种： 回调函数异步获取数据
function getCallbackData(callback) {
  let username = "abc";
  setTimeout(() => {
    callback(username);
  }, 1000);
}

// 第二种： Promise异步获取数据
function getPromiseData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let username = "PromiseData";
      resolve(username);
    }, 3000);
  });
}

//第三种： Rxjs, 写法和Promise很像， 但是要比Promise强大一些
// HINT: 这个Rxjs 是第三方库中的，在Angular框架中是已经集成了
function rxjsData() {
    return new Observable ((observed) => {
        setTimeout(() => {
            let username = 'observable name';
            observed.next(username);
        }, 2000);
    });
}


// 回调函数的调用
function main() {
  let name = getCallbackData((data) => {
    console.log(`通过回调函数拿到的值为: ${data}`);
  });
  console.log(name);
}

// Promise的调用
function main1() {
  let name = getPromiseData().then((data) => {
    console.log(`通过Promise拿到的值为: ${data}`);
  });
}

// Rxjs
function main2(){
    let name = rxjsData().subscribe(value => console.log(value));
}

main();

main1();

main2();

拓展：

比较一下Rxjs和Promise的区别

一、在Rxjs中的订阅是可以取消的， 就比如：

let message = this.bookService.getBookData().subscribe(data => console.log(data));
message.unsubscribe();

这样的话在订阅中的内容就不会执行

二、setInterval方法
setInterval方法在Promise中只能运行第一次， 而在Rxjs中则可以正常循环执行

Rxjs对订阅的数据处理：

let streamData = this.bookService.getBookdData();
streamData.pipe(
  map(value => value * value)
  ,
  filter(value => value % 2 === 0)
  }
  .subscribe(data => console.log(data));
)