回调函数、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)); )