I'm new to Angular 2 so maybe this is trivial - I'm trying to figure out how to cancel an Rx.Observable interval call that happens every 2 seconds. I subscribe to the Rx.Observable with this:
getTrainingStatusUpdates() {
this.trainingService.getLatestTrainingStatus('train/status')
.subscribe(res => {
this.trainingStatus = res;
if (this.trainingStatus == "COMPLETED") {
//Training is complete
//Stop getting updates
}
});
}
This is how my Rx.Observable interval call is handled in my service.ts file (this is called by the function above from a different file):
getLatestTrainingStatus(url: string) {
return Rx.Observable
.interval(2000)
.flatMap(() => this._http.get(url))
.map(<Response>(response) => {
return response.text()
});
}
As you can see in the subscription method, I simply want to stop the interval calls (every 2 seconds) when 'trainingStatus' is 'COMPLETED'.
That's possible with the unsubscribe option.
Every .subscribe() returns a subscription object. This object allows you to unsubscribe to the underlying Observable.
getTrainingStatusUpdates() {
// here we are assigning the subsribe to a local variable
let subscription = this.trainingService.getLatestTrainingStatus('train/status')
.subscribe(res => {
this.trainingStatus = res;
if (this.trainingStatus == "COMPLETED") {
//this will cancel the subscription to the observable
subscription.unsubscribe()
}
});
}
getTrainingStatusUpdates() {
this.trainingService.getLatestTrainingStatus('train/status')
.do(res => this.trainingStatus = res)
.first(res => res == "COMPLETED")
.subscribe(/* Do stuff, if any */);
}
You don't have to unsubscribe / stop the interval. It will be stopped when res == "COMPLETED"
Related
I am looking to stop loader only after for loop finish whole execution,
I have a loop in which I am calling metadata service to get all data for the condition checks and based on the condition I am calling save service.
I would like to wait until all save services finish before stopping the loader and showing a common success message and handle the error.
save(data) {
data.forEach(element => {
if(element.isCreatable){
forkJoin(this.http.getMetaData(element)).subscribe(values => {
//condition checks
//20 lines of code to check condition
//if condition fulfills call save service
if (condition) {
forkJoin(this.http.submitData(val)).subscribe(res => {
if (res) {
//success message
//stop loader
}
});
}
});
}
});
}
Update: Thanks BizzyBob, I Tried the answer provided but it is throwing the error "You provided undefined where a stream was expected."
function save1(data) {
forkJoin(
data
.filter(val => val.isCreatable)
.map(e => {
console.log(e); //coming as object
this.http.getMetaData(e).pipe(
switchMap(meta => {
//20 lines of code to check condition
if (condition) {
return this.http.submitData(meta);
} else {
return EMPTY;
}
})
);
})
).subscribe({
complete: () => console.log('stop loader')
});
}
You could create an observable that does both steps; get the metadata and calls submitData() if necessary. For a single element, it would look something like this:
const saveElementIfNecessary$ = getElement().pipe(
switchMap(element => this.http.getMetaData(element)),
switchMap(meta => condition ? this.http.submitData(meta) : EMPTY)
);
saveElementIfNecessary$.subscribe();
Here we use switchMap to transform one observable to another. Notice inside switchMap we pass a function that returns an observable. We do not need to subscribe, as switchMap handles this automatically.
Since you want to only call submitData() when the condition it true, we can simply return EMPTY (which is an observable that immediately completes without emitting anything) when the condition is false.
Since forkJoin takes an array of observables, you can map the array of elements to an array of observables like the above, that do both steps. Then, you can simply turn off your loader after the forkJoin observable completes:
forkJoin(data.map(e => this.http.getMetaData(e).pipe(
switchMap(meta => condition ? this.http.submitData(meta) : EMPTY)
))).subscribe({
complete: () => console.log('stop loader')
});
You can use async and await as follow
async save(data) {
await Promise.all(data.map(async element => {
if (element.isCreatable) {
await this.http.getMetaData(element).pipe(switchMap(values => {
//condition checks
//20 lines of code to check condition
//if condition fulfills call save service
if (condition) {
return this.http.submitData(val).pipe(tap(res => {
if (res) {
//success message
//stop loader
}
}));
}
return EMPTY;
})).toPromise();
}
}));
In Angular a page makes multiple http calls on multiple actions, let's say button clicks. But when the last "DONE" button is pressed I want to make sure that all those requests are finished before it progresses. I tried to use forkJoin with observables but it triggers requests itself which is not what I want to do, I want other actions to trigger requests and just to make sure that async requests are finished when "DONE" is clicked. With promises I would just push promises to array and then do Promise.all(allRequests).then(()=>{})
observables: Observable<any>[];
onBtn1Click(){
let o1 = this.service.doAction1();
this.observables.push(o1);
o1.subscribe(resp => {
//do action1
});
}
onBtn2Click(){
let o2 = this.service.doAction2();
this.observables.push(o2);
o2.subscribe(resp => {
//do action2
});
}
onDoneClick(){
// I would like something like this just that it wouldn't trigger the requests but make sure they are completed.
forkJoin(this.observables).subscribe(()=>{
//Proceed with other things
});
}
Unless someone comes up with an elegant approach, the following should do it.
I'm creating an object to hold hot observable for each cold observable from the HTTP request. The request would emit to it's corresponding hot observable using RxJS finalize operator. These hot observables could then be combined using forkJoin with a take(1) to wait for the source requests to complete.
private httpReqs: { [key: string]: ReplaySubject<boolean> } = Object.create(null);
onBtn1Click() {
this.httpReqs['btn1'] = new ReplaySubject<boolean>(1);
this.service.doAction1().pipe(
finalize(() => this.httpReqs['btn1'].next(true))
).subscribe(resp => {
// do action1
});
}
onBtn2Click() {
this.httpReqs['btn2'] = new ReplaySubject<boolean>(1);
this.service.doAction1().pipe(
finalize(() => this.httpReqs['btn2'].next(true))
).subscribe(resp => {
// do action2
});
}
onDoneClick(){
forkJoin(
Object.values(this.httpReqs).map(repSub =>
repSub.asObservable().pipe(
take(1)
)
)
).subscribe(() => {
// Proceed with other things
});
}
Using shareReplay
If you multicast, any subscriber who subscribes to a completed stream gets the complete notification. You can leverage that.
The various share operators have an implicit refCount that changes its default every few RxJS versions. The current version for shareReplay(n) is pretty intuitive, but you may need to set refCount:false on older versions, or even use multicast(new ReplaySubject(1)), refCount()
onBtn1Click(){
let o1 = this.service.doAction1().pipe(
shareReplay(1)
);
this.observables.push(o1);
o1.subscribe(resp => {
//do action1
});
}
This is the smallest change that should get your code working the way you'd like
Scan to count activity
You can avoid forkJoin entirely if you just count currently active operations.
count = (() => {
const cc = new BehaviorSubject<number>(0);
return {
start: () => cc.next(1),
stop: () => cc.next(-1),
value$: cc.pipe(
scan((acc, curr) => acc + curr, 0)
)
}
})();
onBtn1Click(){
this.count.start();
this.service.doAction1().pipe(
finalize(this.count.stop)
).subscribe(resp => {
//do action1
});
}
onDoneClick(){
this.count.value$.pipe(
first(v => v === 0) // Wait until nothing is currently active
).subscribe(() => {
//Proceed with other things
});
}
I am trying to take a rxjs source observable, representing a network connection that pushes me data, and reconnect (by resubscribing to the source observable) if I have not received data within a timeout period. I can certainly write this in a somewhat hacky way, but is there a good way to write this concisely with rxjs?
I ultimately wrote an operator. I think there is a better way to do this, but seeing as how no one else has an idea either, here's the pipeable operator that I wrote:
import { Observable, Subscription } from "rxjs";
export function retryAfterTimeout<T>(timeout: number, allowCompletion = false): (obs: Observable<T>) => Observable<T> {
return source => new Observable<T>(observer => {
let sub: Subscription | undefined;
let timer: number | undefined;
function resetTimer() {
if (timer) clearTimeout(timer);
timer = window.setTimeout(() => resub(), timeout);
}
function resub() {
if (sub) sub.unsubscribe();
sub = source.subscribe({
next(x) {
resetTimer();
observer.next(x);
},
error(err) {
observer.error(err);
},
complete() {
if (allowCompletion)
observer.complete();
else
resub();
}
});
}
resub();
resetTimer();
return () => {
if (sub) sub.unsubscribe();
if (timer) window.clearTimeout(timer);
};
});
}
I know how to emit a value to the observer and subscribe to them using observable, as shown here
var observable = new Observable(observer => {
observer.next(1);
observer.next(2);
observer.next(3);
}).subscribe((success) => {
console.log(success);
})
but if I want to do the same thing with the function, ie. I have something like this, then how can I achieve it
var observable = new Observable(observer => {
observer.next(function () {
setTimeout(() => {
1
}, 1000)
})
observer.next(function () {
setTimeout(() => {
2
}, 1000)
})
observer.next(function () {
setTimeout(() => {
3
}, 1000)
})
}).subscribe((success) => {
console.log(success);
})
is it possible, all I have to do is call a series of async functions, how can I do it
UPDATE
i want to call a series of asnc fuctions in a sequence, ie. the second should be called only after the completion of the first functions operation and so on and so forth
You can do something like this. This is just the fundamental here. You can call your async instead of emitting static values.
var ParentObservable = new Observable();
ParentObservable.subscribe((res) => {
//res is your response from async calls
//Call asyncCall again from here
})
function asyncCall(){
this.http.get("your URL").map((res)=> res.json()).subscribe((res)=>{
ParentObservable.next(res);
})
}
I'm trying to use RxJS for a simple short poll. It needs to make a request once every delay seconds to the location path on the server, ending once one of two conditions are reached: either the callback isComplete(data) returns true or it has tried the server more than maxTries. Here's the basic code:
newShortPoll(path, maxTries, delay, isComplete) {
return Observable.interval(delay)
.take(maxTries)
.flatMap((tryNumber) => http.get(path))
.doWhile((data) => !isComplete(data));
}
However, doWhile doesn't exist in RxJS 5.0, so the condition where it can only try the server maxTries works, thanks to the take() call, but the isComplete condition does not work. How can I make it so the observable will next() values until isComplete returns true, at which point it will next() that value and complete().
I should note that takeWhile() does not work for me here. It does not return the last value, which is actually the most important, since that's when we know it's done.
Thanks!
We can create a utility function to create a second Observable that emits every item that the inner Observable emits; however, we will call the onCompleted function once our condition is met:
function takeUntilInclusive(inner$, predicate) {
return Rx.Observable.create(observer => {
var subscription = inner$.subscribe(item => {
observer.onNext(item);
if (predicate(item)) {
observer.onCompleted();
}
}, observer.onError, observer.onCompleted);
return () => {
subscription.dispose();
}
});
}
And here's a quick snippet using our new utility method:
const inner$ = Rx.Observable.range(0, 4);
const data$ = takeUntilInclusive(inner$, (x) => x > 2);
data$.subscribe(x => console.log(x));
// >> 0
// >> 1
// >> 2
// >> 3
This answer is based off: RX Observable.TakeWhile checks condition BEFORE each element but I need to perform the check after
You can achieve this by using retry and first operators.
// helper observable that can return incomplete/complete data or fail.
var server = Rx.Observable.create(function (observer) {
var x = Math.random();
if(x < 0.1) {
observer.next(true);
} else if (x < 0.5) {
observer.error("error");
} else {
observer.next(false);
}
observer.complete();
return function () {
};
});
function isComplete(data) {
return data;
}
var delay = 1000;
Rx.Observable.interval(delay)
.switchMap(() => {
return server
.do((data) => {
console.log('Server returned ' + data);
}, () => {
console.log('Server threw');
})
.retry(3);
})
.first((data) => isComplete(data))
.subscribe(() => {
console.log('Got completed value');
}, () => {
console.log('Got error');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.min.js"></script>
It's an old question, but I also had to poll an endpoint and arrived at this question. Here's my own doWhile operator I ended up creating:
import { pipe, from } from 'rxjs';
import { switchMap, takeWhile, filter, map } from 'rxjs/operators';
export function doWhile<T>(shouldContinue: (a: T) => boolean) {
return pipe(
switchMap((data: T) => from([
{ data, continue: true },
{ data, continue: shouldContinue(data), exclude: true }
])),
takeWhile(message => message.continue),
filter(message => !message.exclude),
map(message => message.data)
);
}
It's a little weird, but it works for me so far. You could use it with the take like you were trying.
i was googling to find a do while behavior, i found this question. and then i found out that doWhile takes in a second param inclusive boolean. so maybe you can do?:
takeWhile((data) => !isComplete(data), true)