1、回调函数
2、事件监听/发布订阅
3、Promise
4、Rxjs
为了方便演示,可新建一个服务为request,最后在app.module中引入及注入该服务。具体见Angular服务的使用
随后在组件中引入该服务
服务中:
getData(): any {
return 0;
}
组件中:
const data = this.request.getData();
console.log('同步', data);
若不使用回调函数,则服务中如下:
getCallbackData(cb): any {
setTimeout(() => {
const username = 'wangyue';
return username
}, 1000);
}
组件中:
console.log(this.request.getCallbackData)
输出结果为undefined。因为setTimeout内是异步的,先执行同步的 getCallbackData(cb): any {setTimeout()};console.log(this.request.getCallbackData);再执行定时器内语句。同步的时候就以及console了,所以console出来的是undefined。
可用回调函数解决该问题。
服务中:
getCallbackData(cb): void {
setTimeout(() => {
const username = 'wangyue';
cb(username);
}, 1000);
}
组件中:
// 回调函数解决异步
this.request.getCallbackData((para) => {
console.log('callback异步', para);
});
传入的是一个回调函数,在该函数内做数据处理。
Promise也可解决异步,避免回调地狱。
服务中:
// promise解决异步
getPromiseData(): any{
return new Promise((resolve, reject) => {
setTimeout(() => {
const key = '123456';
resolve(key);
}, 1000);
});
}
组件中:
const promiseData = this.request.getPromiseData().then((value) => {
console.log('promise获取异步', value);
});
}
服务中
import {
Observable} from 'rxjs'; // 引入Obeservable
// observe解决异步,和promise写法很像
getRxjsData(): any {
return new Observable((observe) => {
setTimeout(() => {
const admin = 'admin';
observe.next(admin);
// observe.error('fail');
}, 1000);
});
}
组件中:
// rxjs异步,返回的是rxjs对象,写法和promise非常像
this.request.getRxjsData().subscribe((ad) => {
console.log('rxjs获取异步, ad');
});
rxjs在angular已集成,所以无需安装,直接引入
通过返回对象的subscribe获得数据
用法和promise很像
rxjs相比promise更强大
提供多种工具函数
promise无法中途撤回,rxjs可以。
例如:显现过一秒撤回操作。
首先将之前服务中的getRxjsData中定时器的事件改为3000ms
随后改外部,组件中
const stream = this.request.getRxjsData(); // observe对象
const d = stream.subscribe((ad) => {
console.log('rxjs获取异步, ad');
});
setTimeout(() => {
d.unsubscribe(); // 取消订阅
}, 1000);
}
查看控制台发现不打印,因为取消了
例如要求:每隔两秒钟返回一次数据,如果用promise只执行一次,rxjs有该功能。
服务中
getMutiRxjsData(): any {
return new Observable((observe) => {
setInterval(() => {
const city = 'beijing';
observe.next(city);
}, 1000);
});
}
组件中
this.request.getMutiRxjsData().subscribe((city) => {
console.log('多次获得数据', city);
});
可以的,promise无法封装一个源源不断执行的方法。
Angular6之前的方法有map和filter,在angular6以后使用rxjs以前的方法要安装rxjs-compat模块。
map和filter是对返回数据进行处理。
这里不详细说了,用es6也可处理。