狐的傳說
2021-06-11 17:41:33
我在 Angular 應用程序中有以下代碼,html 看起來像這樣。<ng-multiselect-dropdown (onSelect)="onSubstringSelect($event)"></ng-multiselect-dropdown>那onSubstringSelect是在組件的 .ts 部分:onSubstringSelect(item: any) { const dataPois = this.getPois(data); alert("2nd alert " + dataPois); // etc}getPois(data): any[] { this.api.getPois(data).subscribe((result: any) => { alert("1st alert"); return result.pois; } }, (error: any) => { console.error('error', error); return {}; }); return null;}我期待我首先擁有alert("1st alert");然后alert("2nd alert " + dataPois); 但是該警報首先執行。為什么?
2 回答

當年話下
TA貢獻1890條經驗 獲得超9個贊
這是因為 Rx Streams 是異步的。當你設置你的流時,它確實設置了它;但是直到有什么東西在聽這個之前什么都不會運行。在 Rx 世界中,這稱為subscribing.
當您將流交給AsyncPipeusing 時stream$ | async;它將訂閱并且設置流中的所有功能將開始按順序運行。
這乍一看似乎違反直覺,但實際上很有意義。如果您希望console.log按照您希望的順序運行,請按順序添加tap() operators或重新定義您的流以符合您的期望。
當你這樣做時:
function A() {
const stream$ = this.http.get('my-stream-url').pipe(
tap(() => { console.log('stream is live!') })
)
console.log('But this will show up first, because nothing is listening to the stream$ yet!')
return stream$
}
您可以看到流將如何保持停滯,直到有人開始收聽subscribing.
添加回答
舉報
0/150
提交
取消