In my angular app I have an http interceptor that will perform some operation fn(x) on every response from the server. The problem I have encountered is that the angular $http service will still hit the interceptor when it is returning a response from its own cache. So, because one of my $http calls is using cache = true in it's config, I end up executing fn(x) on calls that do not reach the server.
Is there any lower level way in angular to determine whether the response actually came from the server rather than from angular's cache?
Related
I have an angular application. From frontend I can set some value. This value is something like config, which can be changed.
It is simple string variable. How to attach this config to each REST request ?
I ask mainly about approach.
Maybe pass it via headers is good idea ?
For angular 1.x, write an Interceptor:
For purposes of global error handling, authentication, or any kind of
synchronous or asynchronous pre-processing of request or
postprocessing of responses, it is desirable to be able to intercept
requests before they are handed to the server and responses before
they are handed over to the application code that initiated these
requests
For angular 2.x / 4.x, RequestOptions should be the key to solve your problem. Set base url for angular 2 http requests
I'm using angular2, my solution is create a Service and inject "Http" dependency, then write two methods "get", "post", these methods add an entry to header before calling "Http", in other component / service, I just inject this Service class, then call its "get" or "post".
Your code should be somewhat like this If your working in angular 1.3 or less
The data should be sent as body data to server
var basecall = Restangular.all('url');
bascall.post($scope.config).then(function(data){
})
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
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.
What happens if I make the same $http request - same params, etc- simultaneously in the app? Does one wait for the others' response?
And if I make them back to back. If the first one is not resolved yet, do the others wait for that?
There is a limit for browsers request count See Max parallel http connections in a browser?
Think each request independent , angularjs $http service return a promise object and you register its success and error callbacks.
Read more about from here https://docs.angularjs.org/api/ng/service/$http
See my plunk below. If I call multiple calls I see them parallel in network tab. But this doesn't cause a conflict because we have different promises and their callbacks will be different. call 1 promise instance1 ... call N promise instance N
http://plnkr.co/edit/XUboyUiAs7KFcRhUu3LP?p=preview
in angular js how to gat data from data base using $HTTP
how to solution my problem give me dital and program dital spat by spat examination and program
You cannot get data from database using $http. You have to make web services in php, django,node etc then you have to call web service using $http.post or $http.get based on method which is created by you.
Web service frameworks are...
http://www.slimframework.com/
http://www.django-rest-framework.org/
using $http service, you can only make http request to http server.In this service you can only mention the path/url of file or api(in case of REST API) from where you have to make ajax call.You can't use sql query from remote database.If you want to get data from database using $http then you can call an API which resides in server.That API will take your request and pass it to Stored procedures(PL/SQL) and stored procedures interact with database with SQL queries to get desired data and provide to API and then API make response with data to you which you can get in success callback.