Angular RxJS function not calling HTTP request

Question

I have an angular store where I try to call some code, that is supposed to perform an HTTP request in an interval. This is supposed to call and HTTP endpoint and update the state of an angular store every 5 seconds.

All my console.log statements are called correctly in the interval, but in the network tab of my browser there are no outgoing requests being sent.

I have tried with both switchMap and mergemap, but neither of them are calling the endpoint correctly.

   updateLeaderBoardState(filterBy: CompetitionFilteringOptions) {
    const poll = of({}).pipe(
        switchMap(_ => {
            console.log('polling from server ');
            const httpRes = this.endpoint.listLeaderboards(this.storeRequestStateUpdater, filterBy);
            console.log(httpRes);
            return httpRes;
        }),
        map((leaderboards: LeaderboardV2[]) => {
            console.log(leaderboards);
            const currentUser = leaderboards[0].entries.find(entry => entry.userName === 'petar.vuksanovic' || entry.userName === "legenden420");
            currentUser.me = true;
            const currentUserPoints = currentUser.points;
            console.log(currentUserPoints);
            return {
                leaderboards,
                currentUserPoints
            };
        }),
        delay(5000),
        repeat(),
    );
    poll.subscribe(next => {
        const {leaderboards, currentUserPoints} = next;
        this.setState(({
            ...this.state,
            leaderboards,
            currentUserPoints
        }));
        });
    }

How can I make the request call correctly and not just return the previous state?

UPDATE:

I refactored my code based on the example provided in the comments. But there is still no HTTP request fired

    updateLeaderBoardState(filterBy: CompetitionFilteringOptions) {
     interval(5000).pipe(
        mergeMap(_ => {
            console.log('polling from server ');
            const httpRes = this.endpoint.listLeaderboards(this.storeRequestStateUpdater, filterBy);
            const otherHttp = this.endpoint.testRequest();
            console.log(otherHttp);
            console.log(httpRes);
            return httpRes
        }),
        map((leaderboards) => {
            console.log(leaderboards);
            const currentUser = leaderboards[0].entries.find(entry => entry.userName === 'petar.vuksanovic' || entry.userName === "legenden420");
            currentUser.me = true;
            const currentUserPoints = currentUser.points;
            console.log(currentUserPoints);
            return {
                leaderboards,
                currentUserPoints
            };
        }),
    ).subscribe(next => {
        const {leaderboards, currentUserPoints} = next;
        console.log(next);
        this.setState(({
            ...this.state,
            leaderboards,
            currentUserPoints
        }));
        });
    }

Does this answer your question? How to make an http call every 2 minutes with RXJS? — Philipp Meissner
– Philipp Meissner, Commented Oct 21, 2021 at 12:18
Unfortunately it is not possible to use Oberservable.interval() anymore.. — Kristoffer Tølbøll
– Kristoffer Tølbøll, Commented Oct 21, 2021 at 12:21
Uhm, yes it is. Import interval and use it as the rxjs5+ example suggests. — Philipp Meissner
– Philipp Meissner, Commented Oct 21, 2021 at 12:29
Did you try repeatWhen( (s) => s.pipe(delay(5000)) ) as first operation in your pipe ? — Gilsdav
– Gilsdav, Commented Oct 21, 2021 at 12:33

Antoine · Accepted Answer · 2021-10-21 12:47:24Z

1

I try with a similar code

ngOnInit(): void {
    const poll = of({}).pipe(
      switchMap(_ => {
        const httpRes = this.testService.test();
        console.log(httpRes);
        return httpRes;
      }),
      map(res => {
        console.log(res);
        return res;
      }),
      delay(5000),
      repeat()
    )

    poll.subscribe(res => {
      console.log(res);
    });
  }

that work fine so i have few question.
Your console.log(leaderboards); show something with data ?
If it's the case, you probably have filter on your network console but your call is trigger correctly.
If it's not the case, this.endpoint.listLeaderboards(this.storeRequestStateUpdater, filterBy); return an observable ?

answered Oct 21, 2021 at 12:47

Antoine

1012 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kristoffer Tølbøll Over a year ago

Could it be because it is inside a store, and therefore not calling the requests by default?

Antoine Over a year ago

i think the problem is your this.endpoint.listLeaderboards(this.storeRequestStateUpdater, filterBy); try to do this.endpoint.listLeaderboards(this.storeRequestStateUpdater, filterBy).subscribe(res => {console.log(res)}) outside of your function, just to trigger http call.

Collectives™ on Stack Overflow

Angular RxJS function not calling HTTP request

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related