導(dǎo)語(yǔ)

最近在開發(fā)新feature，周五需要版本合并，上線?？墒菑腄evTool Network請(qǐng)求記錄來(lái)看，每次界面加載完畢，異步條件觸發(fā)，filter api 都是調(diào)用2遍。

根據(jù)日志，定位帶有嫌疑code位置。 code多請(qǐng)求一次，對(duì)服務(wù)器、用戶體驗(yàn)都是不能接受的，版本是不可能上線的。

思路

問(wèn)題可不可以本地復(fù)現(xiàn)？

可以,那就好辦了

是不是，條件觸發(fā)了2遍 ？

注釋掉一個(gè)觸發(fā)條件

# 留下的代碼大致如下
private searchCondition$ = new Subject();
this.searchCondition$.next({
...(searchParam || {} ) 
...param,
});

...解構(gòu)是2次，是不是這里導(dǎo)致的？

可是...解構(gòu)代碼是同步操作，之后才執(zhí)行到next。多添加一個(gè)...試試，不過(guò)還是只有2次調(diào)用

 this.searchCondition$.next({
   ...(searchParam || {} ) 
   ...param,
   ...{a:1,}
 });

既然next異步觸發(fā)不行，代碼也不復(fù)雜，就重寫直接同步調(diào)用

this.requestData({
   ...(searchParam || {} ) 
   ...param,
 });

經(jīng)過(guò)測(cè)試，還是調(diào)用2次，那么問(wèn)題就不是出現(xiàn)在發(fā)的地方

那就是監(jiān)聽(tīng)的地方，觸發(fā)了2遍

查看界面監(jiān)聽(tīng)也就是subscribe()的地方

# 在html自定義組件中存在兩處這樣的代碼
<cus-component [dataset]="dataset$ | async "> </cus-component>
# 這是ts監(jiān)聽(tīng)地方
this.dataset$ = this.getDataLine(searchParam).pipe(
   switchMap((res) => {
       ...
       return of(res)
   }),
)

上述代碼，通過(guò)注釋掉一處html引用，編譯后發(fā)現(xiàn)，調(diào)用次數(shù)變?yōu)?.故出現(xiàn)問(wèn)題的代碼就算定位到了。那么怎么fix？

修改代碼，不監(jiān)聽(tīng)http請(qǐng)求返回，直接把得到的數(shù)據(jù)返回給界面展示

 const sub = this.getDataLine(searchParam).pipe(
    tap((res) => {
        ...
        this.dataset$ = of(res)
    }),
 )
 //添加subscribe句柄管理，在component destory時(shí)候，銷毀釋放
 this.subs?.add(sub);

添加配置，屏蔽掉多次調(diào)用結(jié)果

//設(shè)置利用最后一次的值
 shareReplay(1)

拓展：

Expression Changed After Checked

原因：

只有開發(fā)環(huán)境才有，用于提示html綁定的變量多次修改了，界面還沒(méi)來(lái)及更新。

解決辦法：

• 方法一：把code修改的地方，添加上setTimeout，延遲去刷新界面
• 方法二： 針對(duì)code，改用Observable， html界面使用上async

You provided an invalid object

TypeError: You provided an invalid object where a stream was expected. 
You can provide an Observable, Promise, Array, or Iterable

可能原因：

最直接的從錯(cuò)誤字面意思來(lái)，就是提供的對(duì)象，是一個(gè)不可用的對(duì)象，需要fix

解決辦法

直接在報(bào)錯(cuò)的時(shí)候，debug，跳轉(zhuǎn)到報(bào)錯(cuò)的位置，查看stack里面的內(nèi)容，里面會(huì)清晰告訴你那里有錯(cuò)誤。

常見(jiàn)的解決辦法

• 判定返回的對(duì)象是否undefined
• 添加? or if等支持， 判定對(duì)象的方法調(diào)用,譬如 chart.draw() , chart不能為null，undefined.

總結(jié)

通過(guò)查看文檔、debug，把控制臺(tái)的錯(cuò)誤一個(gè)個(gè)fix了，版本最終部署上線。出現(xiàn)錯(cuò)誤，不要怕，不過(guò)上線上晚了，確實(shí)有點(diǎn)影響哈~ 。

到此這篇關(guān)于Rxjs監(jiān)聽(tīng)精確使用版本上線的文章就介紹到這了,更多相關(guān)Rxjs監(jiān)聽(tīng)版本上線內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！