We can abort the $timeout and $interval by using '$destroy' when the route changes. How can we abort the pending $http requests like $interval and $timeout?
Check out this article, it has some valuable information. Throughout the research I made, there is no magical solution unfortunately. You'll have to get your hands dirty and code a bit for some results.
Related
This is a general question about AngularJS.
AngularJS does not raise an event to notify when the digest cycle has ended. AngularJS suggests using $timeout as a solution to queue your work to be run after the current digest cycle (also waits for DOM rendering to be completed by the browser).
Does anyone know how to know if $scope.$apply() and $scope.$digest() have ended without using $timeout?
You can use $scope.$digest(), before your business logic function or $scope.$apply(function(){/*your business*/}) but this method like timeout function.
I have watch a few courses on Angular and have found there are different ways to manage data from an Http request.
Using Observables, .map(), .subscribe()
Using Promises, .toPromise(), .then(), .catch()
I have used toPromise() in my application as I find it similar to the AngularJS Http services.
In what scenario would I need to use Observables?
If you like the reactive programming style and want to be consistent within your application to always use observables even for single events (instead of streams of events) then use observables. If that doesn't matter to you, then use toPromise().
One advantage of observables is, that you can cancel the request.
See also Angular - Promise vs Observable
I think as long as the response is not a data stream that you're going to use, then you'd better use the .toPromise() approach, because it's meaningless to keep listening to a response that you don't need and it's not even going to change.
UPDATE
.toPromise() is now deprecated in RxJS 7, they replaced it with something better firstValueFrom and lastValueFrom.
So your code should look like this:
await lastValueFrom(httpRequest$)
For more info about this check these links:
https://rxjs.dev/deprecations/to-promise
https://www.youtube.com/watch?v=3aeK5SfWBSU
Default http requests in angular emits observables. It can be converted to promise by calling toPromise(). But it is not required. Angular unsubscribes the http request once it gets resolved by calling
`_xhr.removeEventListener('load', onLoad);
_xhr.removeEventListener('error', onError);
_xhr.abort();`
Observables are cancellable, but promises are not.
The open request remain even after the component gets destroyed leading to memory leakage, which can be prevented by unsubscribing the observable or calling the destroy method once the component gets destroyed. Ways to unsubscribe to prevent memory leaks
Conclusion, better to use observables with memory leak prevention techniques.
We are using Angular JS promises heavily and its one of the recommend practice from Angular team also. I feel that its just a syntax sugar on the top of Callback. But not sure about it. Can anybody give me few examples where Angular.js promises are better than javascript callbaks?
Promises can be chained and avoid the 'pyramid of doom'. They also have a defined way of handling results like success and failures, which with callbacks is not the case.
if you have multiple ajax calls and on each success of those calls sometimes you have to call the same ajax method again. Coding such scenario becomes ugly with callbacks.
Promise handles that very elegantly.
I have a controller, which calls a factory that performs $http requests. They are not in a ui-router resolve.
I've noticed a behavior which I consider strange - ui-router would not switch states while these requests are still in-transit. I understand how this makes sense with resolves, but why would it happen with arbitrary $http requests?
I'm using the newish reloadOnSearch: false feature, I thought it was worth mentioning
You can skip model dirty checking in $timeout service by setting the third parameter called invokeApply to false (see documentation).
Is it possible to achieve the same result with the $http service?
I need to call a legacy third-party restful webservice several times, but must reduce the amount of refreshes on the UI...
No, but you can use jQuery.ajax or any other ajax library to make http requests out of the digest loop.
In fact, $http will not send any request outside the digest loop. This is from the angular comments:
The $http service will not actually send the request until the next $digest() is
executed. Normally this is not an issue, since almost all the time your call to $http will
be from within a $apply() block.
If you are calling $http from outside Angular, then you should wrap it in a call to
$apply to cause a $digest to occur and also to handle errors in the block correctly.