The RxJS repeatWhen operator implements elegant polling

preface

(Irrelevant content, can be directly skipped)

I have a polling operation on my business, and I recently taught myself RxJS,

I don’t want to compromise nested functions, I don’t want to use setTimeout, I want to write a piece of code that you won’t understand at first glance in the review,

Thinking of holding a poll out should not be difficult….

The result may be that RxJS is used by relatively few people, or it can be used in many places,

So I checked many places and asked many people, but there was no satisfactory answer.

It wasn’t until I found the repeatWhen operator that I had a glimmer of hope, who knew this was the beginning of a new pit…

After continuous attempts, search, review documents, view the source code (in the company does not have access to the Internet, mobile phone hard check…..) .

Finally, I wrote a version of it.

When I got home, I reappeared. Here’s a note. The happiest thing FOR me is to help someone in need.

The body of the

It’s all in the notes

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs'
import { repeatWhen,delay } from 'rxjs/operators'

@Component({
    selector: 'app-test'.templateUrl: './test.component.html'.styleUrls: ['./test.component.css']})export class TestComponent implements OnInit {

    constructor() { }

    ngOnInit(): void {
        let count = 0
        const source = new Observable(observer= > {
            console.log('start'); / / the start tag
            setTimeout(() = > { // Simulate the asynchronous acquisition of back-end data
                console.log('get'); / / get the tag
                const add = 1 // Simulate getting data, such as progress bar progress todo....
                observer.next(add) // Data pass subscribe
                observer.complete() // Complete the request and trigger repeatWhen
            }, 1000);
        })
        source.pipe(
            delay(1000), // The simulation delay is 4 seconds for the back end to request again or the condition is met to end the polling
            repeatWhen((x) = > {
                return new Observable(observer2= > {
                    x.subscribe((a) = > {
                        console.log('atest',a); // The atest flag is always undefined after testing
                        if(count < 5) observer2.next() // Simulate the end condition, count<5 continue polling
                        else observer2.complete() // count>=5 No more polling
                    })
                })
            })
        )
        .subscribe((e:number) = > {
            count = count + e // Simulate getting data for operation, such as progress bar progress assignment todo....
            console.log('end',count); / / end tag
        })

        // start
        // 1 second (request time to background)
        // get 1
        // 1 second (set latency request time)
        // end 1
        // atest undefined
        // start (after one request)

        / /...
        // start
        // 1 second (request time to background)
        // get 5
        // 1 second (set latency request time)
        // end 5
        // atest undefined}}Copy the code