Angular $http transformResponse and cache - angularjs

Is the response from an Angular $http request cached before or after any transformResponse functions have been applied?
Use case:
My client's REST API returns a lot of metadata (most of which I don't need) so I don't want to cache the entire response. I'd like to apply a specific transformResponse for each different API end-point that copies only the fields I need into a new object\array and dispose of the original. I would then like the new object to automatically be cached. This should be nice and easy if the return data from transformResponse is cached.

Apparently is cached before transforming, as you can see in $http#717 sendReq is called before transformResponse, and in $http#958 you can see sendReq does the caching
Maybe you can be sure by doing a test

Related

Prevent same requests from being sent simultaneously when using Angular resource

I have a few components in one page.
Each of them fetches the same data from the server.
As a result, when the page loads, these components send the same request multiple times.
Is there any way to prevent this? Like caching the promise of the first request and returning that to the next coming requests (before the promise resolved)?
In order to make sure that the request is sent only once, you can keep track of the first HttpPromise you create, and on subsequent calls of the function, return that same promise.
This SO link might be what you're looking for.
When calling the $http service you can additionally supply a cache object. If you do so any additional requests will use the cached value. If the same cache is used then additional requests made before the first is resolved will not call the server but wait for the response.
$http.get(url, {cache:cacheObj})
Where cacheObj is from $cacheFactory

AngularJS/Router minimize API calls

Would it be possible to make all the API calls once when the user lands on the page from the url and store all the data as cache and then use the cache to render the state changes from Angular router?
I can see it being implemented by a service that populates the rootscope but would this method be recommended instead of calling the API multiple times?
You can use use $http and set cache to true.
Should be enough for your needs.
From documentation:
The default cache value can be set by updating the $http.defaults.cache property or the $httpProvider.defaults.cache
property.
When caching is enabled, $http stores the response from the server
using the relevant cache object. The next time the same request is
made, the response is returned from the cache without sending a
request to the server.
Take note that:
Only GET and JSONP requests are cached. The cache key is the request
URL including search parameters; headers are not considered. Cached
responses are returned asynchronously, in the same way as responses
from the server. If multiple identical requests are made using the
same cache, which is not yet populated, one request will be made to
the server and remaining requests will return the same response. A
cache-control header on the response does not affect if or how
responses are cached.

Preventing similar POST requests with AngularJS

I am currently building a dashboard page with multiple widgets. Those widgets retrieve their data with REST calls ($resource). A few widgets make similar calls and I don't want to DDOS our server so I am looking for a way to make a call only once and resolve all similar requests with the same response.
Since I am restricted to using POST requests only, I cannot use the cache option that $resource offers. This seems to be doing exactly what I want but only for GET requests.
I was thinking along the lines of using a http interceptor to queue similar POST requests, fire only one of them and resolving them all when the first one gets its response.
However, I cannot seem to put the pieces together so any help is appreciated. I am open to other options.
Kind regards,
Tim
Services in AngularJS are singletons, so a solution would be to store the response in the service, as a variable. Then next time you'll do the request, previously check if the variable is null, if it's not you wrap it in a promise and returned it. If it's null, then you do the request, and store the response for the next call.
You can also either use this in your request service or in your interceptor service.
I hope I helped !
Refactor your widgets to depend on a service (singleton).
This service should either poll the server via XHR, or get server push via websocket for updates.
If polling, look into server side caching and etags.

I want my AngularJS response interceptor to have access to the un-transformed response

I have an $http response interceptor, and I want to have access in the interceptor function to the raw response object--not the return value of transformResponse. Is this possible?
A little background: every response gets wrapped in a JSON object containing various metadata such as API version, detailed status information, etc. My transformResponse method strips out this wrapper and returns only the actual response payload, because I don't want the various controllers and services to be using this metadata.
However, I would like to have interceptors that do things like complain if the API version is incorrect, or handle various abnormal status conditions, so they need access to that metadata.

Setting the JSONP callback function in AngularJS

I'm trying to fetch data from a web API via Angular $resource service. The service exposes JSONP interface, but does not allow setting the callback name. Everything works well, my requests goes out, the data returns, the script is injected and then it fails because the callback function is not defined.
Angular documentation is very sparse on this, but it seems that the default callback function Angular sets up is: JSON_CALLBACK, and there's no info how to change that so that it matches the function returned by the foreign API.
Thanks.
I don't think that there is any provision to override that callback.
$resource is high level Restful api based on $http service.
You can use $http apis which returns http promise object and letting you write your success callback wherein you can process data returned from ajax request.
e.g. http://docs.angularjs.org/api/ng.$http#jsonp

Resources