Angular中处理异步方法。
当外部去调用此方法接收的返回值,由于是异步,方法执行完毕了,也没有产生返回值,所以得到的result是undifined
解决:
1.在此异步的方法添加一个回调函数,在回调函数中值,并带出 。
服务中定义的方法:
getCallBack02(callback){//callbanck为回调函数,他的参数既是带出的值
setTimeout(() => {
var result="resultCallBack";
callback(result+"callback回调函数");
}, 1000);
}
组件处理业务代码(展示异步方法处理的结果):
this.reuqest.getCallBack02(
//回调函数,回调函数带的结果赋值给此函数的形参
(result)=>{
console.log(result);
}
);
2.通过Promise方法处理异步
服务中定义的方法:
getCallBack03(){
//实例化 promise方法,参数resolve:方法执行成功所返回,reject:方法执行失败所返回
return new Promise((resolve)=>{
setTimeout(() => {
var result="resultCallBack--promise";
resolve(result);
}, 5000);
})
}
组件处理业务代码(展示异步方法处理的结果):
//调用通过promise处理的异步方法,返回的是promise对象,通过其中then方法获取返回值
var promise=this.reuqest.getCallBack03();
promise.then((data)=>{
console.log(data);
})
3.通过Rxjs处理
在服务引入: import { Observable } from 'rxjs';
1.引入Observable import { Observable } from 'rxjs';
2.实例化 Observable 传入异步方法 通过Observable.next(结果)方法返回结果
服务中定义的方法:
getObservable(){
return new Observable((observable)=>{
setTimeout(() => {
var result="resultCallBack--rxjs的Observable";
observable.next(result);
}, 5000);
})
}
组件处理业务代码(展示异步方法处理的结果):
//调用通过rxjs处理的异步方法
var observable=this.reuqest.getObservable();
let chehui= observable.subscribe((data)=>{
console.log(data);
//在rxjs中可以撤回subscribe操作
})
//撤回
setTimeout(() => {
chehui.unsubscribe();
console.log("撤回了。。。。 ");
}, 2000);
rxjs可以操作返回值的结果:
引入import{map,filter} from 'rxjs/operators'
//可以通过rxjs 的map filter进行结果处理 删选
/* var observableNum=this.reuqest.getObservableIntervalNum();
let streamNum= observableNum.pipe(
filter((value)=>{ //value是异步方法的结果,待处理的值
if(value%2==0){ //判断是否是偶数 true 就将其返回
return true;
}
})
)
.subscribe((data)=>{
console.log(data);
//在rxjs中可以撤回subscribe操作Num
})
*/
//map 可以继续操作结果
var observableNum=this.reuqest.getObservableIntervalNum();
let streamNum= observableNum.pipe(
filter((value)=>{ //value是异步方法的结果,待处理的值
if(value%2==0){ //判断是否是偶数 true 就将其返回
return true;
}
}),
map((value)=>{ //value是异步方法的结果,待处理的值
return value+20;
})
)
.subscribe((data)=>{
console.log(data);
//在rxjs中可以撤回subscribe操作Num
})
}
rxjs可以循环的带出数据
//通过rxjs处理异步方法可以通过延时器 多次执行 promise则不行
getObservableInterval(){
var count:number=0;
return new Observable
setInterval(() => {
count++;
var result="resultCallBack--rxjs的Observable"+count;
observable.next(result);
}, 5000);
})
}