Implementing complex timeout with RxJS

Question

I'm making an HTTP request and I want to use timeout for alerting the user.

The end goal is to give the user 2 messages- one after 5 second delay and another after 5 more seconds(10 second since the HTTP request was sent).

Ideally it should look something like this:

Observable.fromPromise(SendHTTPRequest)
.timout(5000).subscribe(null,timeout => console.log("It's been 5 seconds"));
.timout(5000).subscribe(null,timeout => console.log("It's been 10 seconds"));

off course this code can't be done so my question is how can it be done :)

Thanks!

Do you want the request to fail after the 10 seconds, or just to get notified? — Ophir Bushinsky
– Ophir Bushinsky, Commented Feb 17, 2018 at 23:31

Ophir Bushinsky · Accepted Answer · 2018-02-18 14:56:27Z

1

The timeout operator is used to throw an error after a certain time has passed, thus killing the Observable. This is not the desired outcome for your case, if I understood your question correctly.

If indeed all you want is to notify the user twice - after 5, and 10 seconds, I would use an interval Observable, with an interval of 5 seconds, that will start at the same time as the http request. This Observable will terminate either when the request is finished, or when 2 emissions are fired (since you wanted only 2 notifications).

const httpRequest$ = Observable.fromPromise(SendHTTPRequest)
    .share();

const interval$ = Observable.interval(5000)
    .takeUntil(httpRequest$)
    .take(2)
    .map(x => (x + 1) * 5)
    .subscribe(seconds => console.log("It's been " + seconds + " seconds"));

httpRequest$.subscribe(response => doSomethingWithResponse(response));

edited Feb 18, 2018 at 14:56

answered Feb 18, 2018 at 0:07

Ophir Bushinsky

1,42912 silver badges13 bronze badges

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

3 Comments

Miller Over a year ago

Nice answer! But one question - isn't it the case that takeUntil will add a second subscriber to SendHTTPRequest and thus cause the http call to be issued twice?

Miller Over a year ago

looking at the source code takeUntil does seem to subscribe to the notifier github.com/ReactiveX/rxjs/blob/master/src/internal/operators/… ... if httpRequest$ is a cold observable then I believe .share() will be needed

Ophir Bushinsky Over a year ago

Actually, you are right @Miller, it does seem that the takeUntil subscribes to the notifier

John · Accepted Answer · 2018-07-08 18:14:08Z

0

import { of,interval } from 'rxjs';
import { groupBy, mergeMap, toArray, map,merge, reduce, concatMap, delay, concat, timeout, catchError, take } from 'rxjs/operators';


const obs$ = of('coucou');
const obs2$ = interval(5000).pipe(take(1), map(() => of('hello')));
const obs3$ = interval(5000).pipe(take(1), map(() => of('world'))); 

const result$ = obs$.pipe(concat(obs2$.pipe(concat(obs3$)))); 
const subscribe = result$.subscribe(val => console.log(val + ' ' + new Date().toLocaleTimeString()));

Will print:

coucou 20:10:15
[object Object] 20:10:20
[object Object] 20:10:25

answered Jul 8, 2018 at 18:14

John

4,6519 gold badges47 silver badges59 bronze badges

Collectives™ on Stack Overflow

Implementing complex timeout with RxJS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related