不废话,间接上论断,js
中observable
不能间接应用async/await
这种流程管制标识,举个例子
observable:Observable<any> = new Observable; constructor() { this.observable = Observable.create((item:any)=>{//一秒钟后输入后果 setTimeout(()=>{ item.next('后果'); item.complete(); },1000) }) } ngOnInit() { console.log(1); let startTime = new Date().getTime() this.observable.subscribe((res)=>{ let endTime = new Date().getTime() let result = Math.floor(new Date(endTime-startTime).getTime()/1000); console.log(res,' 耗时',result,'秒') }) console.log(2) }
不言而喻,执行后果是
那么,我想像promise
那样应用async/await
是否能够呢?
对ngOnInite()
办法进行稍加改变,加上async/await
async ngOnInit() { console.log(1); let startTime = new Date().getTime() await this.observable.subscribe((res)=>{ let endTime = new Date().getTime() let result = Math.floor(new Date(endTime-startTime).getTime()/1000); console.log(res,' 耗时',result,'秒') }) console.log(2) }
啊哈,不好,编辑器提醒了
不行邪,运行看看
正如下面说的,流程管制并没有起作用,Observable
不反对间接的流程管制。
解决办法有两个,首先说一个简略状况下的解决办法
第一种、转为promise
操作如下
async ngOnInit() { console.log(1); let startTime = new Date().getTime() await this.observable.toPromise().then((res)=>{ let endTime = new Date().getTime() let result = Math.floor(new Date(endTime-startTime).getTime()/1000); console.log(res,' 耗时',result,'秒') }) console.log(2) }
间接利用.toPromise()
办法将其转为promise
,这样async/await
就起作用了,当然,也要应用promise
中的then
办法才行。
能够看到,当初程序会期待promise
执行结束当前才会输入2,也就是流程管制失效了。
留神 有些敌人手动写observable
的时候,没有在外面写complete
,这样执行toPromise
的时候,并不会运行then
外面代码,因为promise
在底层代码实现之前是不会进行解析的,也就是手写observable
中肯定要记得写complete
当然,转换成promise
并不能解决所有问题,比方上面这种状况
当用户点开页面的时候,须要同时收回50个申请,然而用户很可能在所有数据申请完结之前就会跳走,所以很可能20-30个申请都是有效申请,那么,有效申请就须要间接勾销掉
咱们晓得promise
是不可能勾销曾经收回的申请的,你能够通过throw
或者reject
触发promise
的catch
操作,然而这只是代表你不在对发出请求的后果关怀,申请仍然存在,后果仍然会返回。
除非用户在所有申请实现之前点击了浏览器的进行加载按钮,
那申请就会从pending
状态变成了cancel
或者,应用subscribe
,这也是其比照promise
的劣势之一
勾销subscribe
申请很简略:
单个申请的状况下
this.observable.subscribe((res)=>{}).unsubscribe()
间接在前面加上unsubscribe
就行,这个申请会变成cancel
状态,不会再占用申请资源
那么, 回到下面的问题,简化一下就是,我可不可以,即能勾销曾经收回的申请,又能控制代码的流程呢?答案是必定的,只有把promise
和observable
一起搭配应用就行
第二种解决办法、 终极版代码如下
observableArray:Subscription=new Subscription; observable:Observable<any> = new Observable; constructor() { this.observable = Observable.create((item:Observer<any>)=>{ setTimeout(()=>{ item.next('实现'); item.complete(); },1000) }) } async ngOnInit() { console.log(1); let startTime = new Date().getTime() await new Promise((resolve,reject)=>{ this.observableArray.add(this.observable.subscribe((res)=>{ resolve(true) let endTime = new Date().getTime() let result = Math.floor(new Date(endTime-startTime).getTime()/1000); console.log(res,' 耗时',result,'秒') })) }) console.log(2) } ngOnDestroy(): void { this.observableArray.unsubscribe() }
运行后果为
思路就是通过promise
控制代码流程,而后利用对象接管Observable
,管制申请的勾销与否
这样,即能够依照本人的志愿随时勾销曾经收回的申请,同时,也能控制代码的流程