iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 30
0
Modern Web

Angular新手村學習筆記(2019)系列 第 31

Day26.5_rxjs-spy,開發 RxJS 的好工具

[S05E10] rxjs-spy ,開發 RxJS 的好工具
https://www.youtube.com/watch?v=0Q0IJrnk-00&list=PL9LUW6O9WZqgUMHwDsKQf3prtqVvjGZ6S&index=13

本集只有14分鐘
由Mike大神,分享一個測試RxJS的套件
Mike大神blog的文章,寫得非常完整,不用做筆記了
https://wellwind.idv.tw/blog/2018/03/27/rxjs-debugging-with-rxjs-spy/
套件 rxjs-spy
https://www.npmjs.com/package/rxjs-spy

相關文章
rxjs-spy
https://cartant.github.io/rxjs-spy/
Debugging RxJS, Part 1: Tooling
https://blog.angularindepth.com/debugging-rxjs-4f0340286dd3
Debugging RxJS, Part 2: Logging
https://blog.angularindepth.com/debugging-rxjs-part-2-logging-56904459f144

哇哇,一樣是有詳細文章分享的,不太需要做筆記
今天就清鬆過度囉~

有些指令可能過期,請以官網為主

# 安裝
npm install --save-dev rxjs-spy

# 在ts裡引入
import { create } from 'rxjs-spy';
const spy = create();

rxjs-spy,使用前

app.component.ts

import{ HttpClient } from '@angular/common/http';
import{ Component } from '@angular/core';
import { timer } from 'rxjs';
import { switchMap, tap } from 'rxjs/internal/operators';
...
export class AppComponent{
                  0代表從一開始,每5秒跑一次
    post$ = timer(0,5000).pipe(
        switchMap(duration =>
            this.httpClient.get<any>('https://jsonplaceholder.typicode.com/posts/${(duration%10)+1}`)
            ),
            tap(console.log) // tap只是看資料,沒實際影響
            ^^^ 傳統沒用rxjs-spy時,用tap來看資料流(stream)
                但當rxjs的內容很多時,容易下一堆console.log
                (rxjs-spy可以讓我們想顯示時才顯示)
    );
    
    constructor(private httpClient: HttpClient){}
}
{{ (post$ | async)?.title }}

rxjs-spy,使用後

app.component.ts

import{ HttpClient } from '@angular/common/http';
import{ Component } from '@angular/core';
import { timer } from 'rxjs';
import { switchMap, tap } from 'rxjs/internal/operators';
...
export class AppComponent{
    post$ = timer(0,5000).pipe(
        tag('app-timer'), // 替timer()傳回的observable加上tag
        switchMap(duration =>
            this.httpClient.get<any>('https://jsonplaceholder.typicode.com/posts/${(duration%10)+1}`)
            ),
            tag('app-post') // 幫operator加tag
    );
    
    constructor(private httpClient: HttpClient){}
}

然後在Browser的Console工具裡打

  • spy.show()
  • spy.show('app-timer') 顯示某個tag
  • spy.log('app-post') 開始記錄某個observable的運作

在ts裡的控制

  • rxSpy.pause() 暫停observable
const deckPost=rxSpy.pause('app-post');
deckPost.resume(); // 一次將記錄的一次顯示

deckPost.skip(); // 乎略一些累積的資料流

deckPost.clear(); 清空next所累積的資料

上一篇
Day30_Cypress.io(ng conf 2019)
下一篇
Day31_Angular and CSS Grid(ng conf 2019)
系列文
Angular新手村學習筆記(2019)33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言