I am trying to poll an API call to my backend. The idea is that the server will send a 202 error until it has finished processing a job and after so many requests will return a 200 with some results. I don't want the error to kill the stream. The API call is only made once.
"rxjs": "~6.4.0",
"#angular/core": "~8.2.14"
Kick-off code:
onSubmit() {
return this.scraperService.postUrl(this.form.value.url)
.pipe(
switchMap( val => {
return this.scraperService.pollUntilTaskFinished(val);
})
).subscribe( val => console.log(val))
}
Service code:
postUrl(url: string): Observable<any> {
return this.http.post('/api/start', {url})
.pipe(
map((res: { jobId: string }) => {
if (res.jobId) {
return res.jobId;
}
}));
}
pollUntilTaskFinished(jobId): Observable<any> {
return interval(2000)
.pipe(
switchMap(() => this.http.get(`/api/results/${jobId}`)))
.pipe(
catchError(err => this.handleError(err)),
map(res => console.log(res)));
}
handleError(data: HttpErrorResponse) {
if (data.status === 202) {
return of('continue');
}
}
How can I ensure that the interval repeats until I get a 200 with the JSON I need?
If you don't want to dispose the chain you'll have to catch the error before it's propagated to the main chain. This means catching it inside switchMap():
this.http.get(`/api/results/${jobId}`))
.pipe(
catchError(err => this.handleError(err)),
)
Related
I'm trying to implement service, which provides observable if app has connection to my server or not, so when browser online, we ping server with timer. Here is code:
public get $connected(): Observable<boolean> {
return this.hasInternetConnection
.asObservable()
.pipe(
distinctUntilChanged(),
flatMap((connected: boolean) => {
if (!connected) {
return of(connected);
} else {
return timer(5000)
.pipe(
map(() => {
var success = Math.random() > 0.5;
console.log('PING: ' + success);
return success;
})
);
}
})
);
}
hasInternetConnection is just a BehaviorSubject bound to window online and offline events, timer emulates ping to my API server.
The issue is that my subscription $connected catches only first value from timer observable and then doesn't work. After hasInternetConnection subject changes to false and back to true, my subscription again gets first value and then nothing. Here is what I see in console:
PING: true
subscription tap
PING: true
PING: false
PING: true
...
How can I fix that? Thank you!
Full solution:
private hasInternetConnection: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(navigator.onLine);
private connectedSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
private recheckConnectionSubject: Subject<void> = new Subject<void>();
constructor(
private readonly http: HttpClient,
) {
fromEvent(window, 'online')
.pipe(takeUntil(this.destroyed))
.subscribe(() => {
this.hasInternetConnection.next(true);
});
fromEvent(window, 'offline')
.pipe(takeUntil(this.destroyed))
.subscribe(() => {
this.hasInternetConnection.next(false);
});
merge(
this.hasInternetConnection,
this.recheckConnectionSubject,
)
.pipe(
mapTo(this.hasInternetConnection.value),
switchMap((connected: boolean) => {
if (!connected) {
return of(connected);
} else {
return timer(0, 30000)
.pipe(
mergeMapTo(this.http.get(`${environment.apiRoot}/ping`, { responseType: 'text' })
.pipe(
map((res) => {
return true;
}),
catchError(() => {
return of(false);
})
)
),
);
}
})
)
.subscribe(this.connectedSubject);
}
public get $connected(): Observable<boolean> {
return this.connectedSubject.asObservable()
.pipe(
distinctUntilChanged(),
);
}
public resetTimer(): void {
this.recheckConnectionSubject.next();
}
Can someone explain why this promise (runQuery) , which fails into the 'catch' and throws an ErrorObservable, does not get caught in the 'catchError' method, but goes into 'map' method.
( I tried both _throw/ErrorObservable approach, same result )
import { _throw } from 'rxjs/observable/throw';
import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
const runQuery = ( Promise that rejects )
const source$ = fromPromise(
runQuery({ d: 'g' })
.catch(err => {
return new ErrorObservable(err);
//return _throw(err); -- same as above
})
)
.pipe(
map((response: any) => {
//ENTERS HERE as response.error
}),
catchError(e => {
//DOES NOT ENTER
})
);
You are handling your own error in the promise and let it return an ErrorObservable. By doing so you made the promise succeed (although with an error like return value). fromPromise will convert this in an emission instead of error.
Remove the catch case in the fromPromise and it should hit the Observable.catchError
I made a live example to prove my point.
There is no need to handle the promise (when it is still a promise), so this far from recommendable.
.then(data => {
return data;
})
.catch(err => {
return new ErrorObservable(err);
//return _throw(err); -- same as above
}))
Let observables take control of rejections
const source$ = fromPromise(runQuery())
.pipe(
map((response: any) => {
//Make here some transformations
return response;
}),
catchError(e => {
return _throw(e);
}
));
If you want to change the error object or do a console.log() inside the catch in the promise before the observable receives the error you can throw the error:
.then(data => {
return data;
})
.catch(err => {
console.error("Error", err );
err.code = 110; // you may want to change something before passing to observable
throw err;
}))
If you use return error the error or catch pipe of the observable won't work, but using throw it works.
I work in angular 2 Project and use ngrx and rxjs technologies.
Now I have a problem:
I try to declare an Effect.
The effect has http request, and only when it success I want to call other http-request, and so only if it also success - then dispatch an success-action.
I has tested it by throw an error but it always dispatch the action!
See:
#Effect()
createEntity$ = this.actions$.ofType(CREATE_ENTITY)
.switchMap((action: CreateEntity) => {
return this.httpService.getDefaultEntityData(action.payload.type).map((entity) => {
return Observable.throw("testing only");
/*if (entity) {
entity.title = entity.type;
return this.httpService.addEntity(entity);
}*/
})
.catch((error) => Observable.of(new createEntityFailure(error)))
.map(mappedResponse => ({ type: CREATE_ENTITY_SUCCESS, payload: mappedResponse }))
});
How about this:
this.actions$
.ofType(CREATE_ENTITY)
.map((action: CreateEntity) => action.payload)
.switchMap(payload =>
this.httpService.getDefaultEntityData(payload.type)
.mergeMap(entity => this.httpService.addEntity(entity))
// .mergeMap(entity => Observable.throw('error')) // or this for testing
.mergeMap(response => new actions.Action(...))
.catch(error => new actions.Error(...))
);
You can either split this up into multiple actions or just add another API call in the same effect using Observable.forkJoin
#Effect() createEntity$ = this.actions$.ofType(CREATE_ENTITY)
.switchMap((action: CreateEntity) => {
return Observable.forkJoin(
this.httpService.callOne(),
this.httpService.callTwo()
)
.catch((error) => Observable.of(new createEntityFailure(error)))
.map(mappedResponse => ({ type: CREATE_ENTITY_SUCCESS, payload: mappedResponse }))
});
As forkJoin is parallel that won't work for you. You can just switchMap on the first API call and return the second:
#Effect() createEntity$ = this.actions$.ofType(CREATE_ENTITY)
.switchMap((action: CreateEntity) => {
return this.httpService.callOne();
})
.switchMap((response) => {
return this.httpService.callTwo()
.map(secondResponse => ({
type: CREATE_ENTITY_SUCCESS,
payload: {
first: response,
second: secondResponse
}
}))
})
.catch((error) => Observable.of(new createEntityFailure(error)))
});
1) If you returning Observable you probably want swithMap instead of map
2) Action always has been dispatched because you return non error Observable from catch. Changing Observable.of to Observable.throw will throw error further
#Effect()
createEntity$ = this.actions$.ofType(CREATE_ENTITY)
.switchMap((action: CreateEntity) =>
this.httpService.getDefaultEntityData(action.payload.type)
)
.switchMap((entity) => { // <------ switchMap here
return Observable.throw("testing only");
/*if (entity) {
entity.title = entity.type;
return this.httpService.addEntity(entity);
}*/
})
.catch((error) =>
Observable.throw(new createEntityFailure(error)) // <------ throw here
)
.map((mappedResponse) =>
({ type: CREATE_ENTITY_SUCCESS, payload: mappedResponse })
);
I am merging two Observables.
The first one gets the current temperature on init.
The second one polls at a certain interval the API.
If the Api call fails, then the Observable interval is not resumed.
How could I resume it?
getCurrentTemp(): Observable<number> {
return this.http.get(this.environmentService.getTemperatureUrl())
.map((res: Response) => res.json())
.switchMap(() => res.temp);
}
pollCurrentTemperature(): Subscription {
const temp$ = this.getCurrentTemp();
const tempInterval$ = Observable
.interval(3000)
.flatMap(() => this.getCurrentTemp());
return temp$
.take(1)
.merge(tempInterval$)
.subscribe((temp: number) => {
console.log('temp', temp);
}, (err) => {
console.log('error', err);
// When the api fails my interval does not resume. How can I retry it?
});
}
Any ideas? Ty
Use catch.
Catch: recover from an onError notification by continuing the sequence without error
getCurrentTemp(): Observable<number> {
return this.http.get(this.environmentService.getTemperatureUrl())
.map((res: Response) => res.json())
.catch(error => {
console.log('Error occured');
return Observable.empty();
});
.switchMap(() => res.temp);
}
It will catch the error and silently return an empty observable in its place. In effect, the switchmap will skip over the failed api call silently as it will not emit for the empty observable.
Of course, you could have an alternate behaviour on error, but you need to catch it to avoid the problem you are facing.
Using the http status codes you can retrieve an observable only if its a 200 let's say:
getCurrentTemp(): Observable<number> {
return Observable.from(
[
{ value: 1, status: 200 },
{ value: 2, status: 200 },
{ value: 3, status: 200 },
{ value: 4, status: 200 },
{ value: 5, status: 200 },
{ value: 6, status: 400 }])
.switchMap((x: any) => {
if (x.status === 200) {
return Observable.of(x.value);
}
return Observable.onErrorResumeNext();
});
}
pollCurrentTemperature(): Subscription {
const temp$ = this.getCurrentTemp();
const tempInterval$ = Observable
.interval(3000)
.flatMap(() => this.getCurrentTemp());
return temp$
.take(1)
.merge(tempInterval$)
.subscribe((temp: number) => {
console.log('temp', temp);
}, (err) => {
console.log('error', err);
// When the api fails my interval does not resume. How can I retry it?
});
}
The important bit is this return Observable.onErrorResumeNext();
I'm trying to chain promises, but the second one doesn't call the resolve function. What do I do wrong?
function getCustomers(){
let promise = new Promise((resolve, reject) => {
console.log("Getting customers");
// Emulate an async server call here
setTimeout(() => {
var success = true;
if (success) {
resolve( "John Smith"); // got the customer
} else {
reject("Can't get customers");
}
}, 1000);
}
);
return promise;
}
function getOrders(customer) {
let promise = new Promise((resolve, reject) => {
console.log("Getting orders");
// Emulate an async server call here
setTimeout(() => {
var success = true;
if (success) {
resolve("Order 123"); // got the order
} else {
reject("Can't get orders");
}
}, 1000);
}
);
return promise;
}
getCustomers()
.then((cust) => getOrders(cust))
.catch((err) => console.log(err));
console.log("Chained getCustomers and getOrders. Waiting for results");
The code prints "Getting orders" from the second function, but doesn't print "Order 123":
Getting customers
Chained getCustomers and getOrders. Waiting for results
Getting orders
Update. I wanted to insert the print on the console between chained methods that return promises. I guess something like this is not possible:
getCustomers()
.then((cust) => console.log(cust)) //Can't print between chained promises?
.then((cust) => getOrders(cust))
.then((order) => console.log(order))
.catch((err) => console.error(err));
You want to chain a success handler (for your resolve result "Order 123"), not an error handler. So use then instead of catch :-)
getCustomers()
.then(getOrders)
.then((orders) => console.log(orders))
.catch((err) => console.error(err));
None of the promises was rejected, so the console.log(err) in your code was never called.
I wanted to insert the print on the console between chained methods that return promises. I guess something like this is not possible:
getCustomers()
.then((cust) => console.log(cust)) //Can't print between chained promises?
.then((cust) => getOrders(cust))
Yes it is possible, but you are intercepting a chain here. So the second then callback actually is not called with cust, but with the result of the first then callback - and console.log returns undefined, with which getOrders will get some problems.
You'd either do
var customers = getCustomers();
customers.then(console.log);
customers.then(getOrders).then((orders) => …)
or simpler just
getCustomers()
.then((cust) => { console.log(cust); return cust; })
.then(getOrders)
.then((orders) => …)
Here is a code example for Sequential execution for node.js using ES6 ECMAScript. Maybe somebody finds it useful.
http://es6-features.org/#PromiseUsage
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise
var soapClient = easysoap.createClient(params);
//Sequential execution for node.js using ES6 ECMAScript
console.log('getAllFunctions:');
soapClient.getAllFunctions()
.then((functionArray) => {
return new Promise((resolve, reject) => {
console.log(functionArray);
console.log('getMethodParamsByName:');
resolve();
});
})
.then(() => {
return soapClient.getMethodParamsByName('test1'); //will return promise
})
.then((methodParams) => {
console.log(methodParams.request); //Console log can be outside Promise like here too
console.log(methodParams.response);
console.log('call');
return soapClient.call({ //Return promise
method: 'test1',
params: {
myArg1: 'aa',
myArg2: 'bb'
}
});
})
.then((callResponse) => {
console.log(callResponse); // response data as json
console.log('end');
})
.catch((err) => {
throw new Error(err);
});