这三种方法的简单实例, 帮助理解
// 第一种: 回调函数异步获取数据
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));
)