首頁猿問如何將 get .pipe...

如何將 get .pipe takeUntil 與 Angular 中的一個函數與 RxJX

JavaScript

慕桂英546537 2021-11-12 17:14:06

在 Angular 中，每次需要查詢端點時，都需要調用以下代碼：this.service.getSomeData() .pipe(takeUntil(this.onDestroy$)) .subscribe((message: any) => { some code here; }takeUntil 是組件中的一個函數，用于在組件被銷毀時取消訂閱。如何重構上面的代碼，以便每次使用資源時都不需要鍵入所有這些內容？所以最后看起來像這樣（或多或少？）：this.service.getSomeData( (message: any) => { some code here; })

查看完整描述

3 回答

慕俠2389804

TA貢獻1719條經驗獲得超6個贊

通常，在從視圖/dom 卸載某些組件后，不必銷毀/禁用您的服務。將它們視為一層代碼來執行一些數據轉換或獲取。

問：為什么每個人都使用takeUntil(this.destroyed$)或this.subscription.unsubscribe()？

A：Observable只要有至少一個訂閱者就可以生存。因此，如果您有一些長期存在的 observables 在某些操作后沒有立即完成，您將有內存泄漏（Angular 可以多次創建/初始化每個組件）。說到Angular的http，所有的get，post，put和delete后端調用完成后，呼叫結束。這意味著你不必添加unsubscribe在onDestroy鉤或使用takeUntil。

如果您已建立Websocket連接并正在收聽某些消息，則您的流將變得持久，并且訂閱此消息的每個組件都應在onDestroy循環期間取消訂閱。如果你不這樣做，Angular 可以多次初始化你的組件（這通常發生在*ngIf=""語句中）并且多個訂閱被創建但永遠不會被銷毀。這會導致內存泄漏。

不幸的是，這是大多數 Angular 項目的常見問題，可以通過手動unsubscribe/takeUntil或使用在組件銷毀后async自動執行的管道來解決unsubscribe。

反對回復 2021-11-12

拉莫斯之舞

TA貢獻1820條經驗獲得超10個贊

一種選擇是在模板中使用異步管道來管理訂閱

data$ = this.service.getSomeData();

并在您的模板中

<ng-container *ngIf="data$ | async as data">

You can use the template variable data here that magically updates every time data$

emits and no need to unsubscribe as the async pipe manages the subscription for you

</ng-container>

如果 observable 發出的數據不是模板所需的形狀，則使用 map 函數

data$ = this.service.getSomeData().pipe(map(data => functionThatTransformsData(data)));

您可以在此處閱讀我在狀態管理庫中使用的模式https://medium.com/@adrianbrand/angular-state-management-with-rxcache-468a865fc3fb

反對回復 2021-11-12

至尊寶的傳說

TA貢獻1789條經驗獲得超10個贊

我很高興你這么問，我遇到了這個Angular AutoUnsubscribe（我引用這個是因為我發現實現它的邏輯真的很漂亮。）

它相對易于使用，并且適用于所有可聲明對象（顯然是管道、指令和組件。）

現在省略訂閱和取消訂閱部分（我不會建議），它非常簡單，直接。

早些時候你有類似的東西

getSomeData(): Observable<any> {

// for eg

return this.http.get();

}

您必須將其更改為：

getSomeData(callback, onDestroy$): Observable<any> {

this.http.get(...).pipe(takeUntil(onDestroy$)).subscribe(val => callback(val));

}

然后我們將能夠擁有我們最終想要的東西。干杯。

反對回復 2021-11-12

3 回答
0 關注
192 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何將 get .pipe takeUntil 與 Angular 中的一個函數與 RxJX

如何將 get .pipe takeUntil 與 Angular 中的一個函數與 RxJX

3 回答

添加回答