I read about the Angular '$cacheFactory' but could not find any documentation on setting an expiration date for cached content.
What if I want to cache all GET requests for 30 seconds, how to I define this in the '$cacheFactory' or do I need to extend the functionality myself.
for TTL 1h, see below example
add factory:
.factory('cacheInterceptor', ['$cacheFactory', function($cacheFactory) {
var http_ttl_cache = {};
return {
request: function(config) {
var N;
if (config.timeToLive) {
config.cache = true;
N = config.timeToLive;
delete config.timeToLive;
if (new Date().getTime() - (http_ttl_cache[config.url] || 0) > N) {
$cacheFactory.get('$http').remove(config.url);
http_ttl_cache[config.url] = new Date().getTime();
}
}
return config;
}
};
}])
then init in config push your interceptor.
An interceptor is simply a regular service factory that is registered to that array.
.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {
$httpProvider.interceptors.push('cacheInterceptor');
example of request
$http.get('/permissions.json', {timeToLive: Constant.timeToLive}).then(function(result){
Constant is:
.constant('Constant', {
url: {
logout: '/auth/logout'
},
timeToLive: 60*60*1000
})
I faced the problem too. The default $cacheFactory have no time to live (TTL).
You will need to implement this yourself. But before, you could give a look around, to see if someone already did it :
This one look pretty complete - http://jmdobry.github.io/angular-cache/
If you really want to implement your own solution (by implementing your own $cacheFactory) and need some help, feel free to ask.
Hope it gave you some clue.
I think #miukki answer's is great. Adding my modification to the request of #Vil
I modified the 'request' function of the 'cacheInterceptor' to use $timeout instead of relying on Date. It allows TTL to be more global for requests, So if one request sets a TTL and the 2nd doesn't but data is still in cached, it will still be used.
.factory('cacheInterceptor', ['$cacheFactory', '$timeout', function($cacheFactory, $timeout) {
var ttlMap = {};
return {
request: function(config) {
if (config.ttl) {
var ttl = config.ttl;
delete config.ttl;
config.cache = true;
// If not in ttlMap then we set up a timer to delete, otherwise there's already a timer.
if (!ttlMap[config.url]) {
ttlMap[config.url] = true;
$timeout(ttl)
.then(function() {
$cacheFactory.get('$http').remove(config.url);
delete ttlMap[config.url];
});
}
}
return config;
}
};
}])
Related
I am working with interceptors, and they intercept all requests but I have certain routes where I don't want to interfere with the request/response
app.service('WizardService', ['$http', function($http) {
var base_url = '/api';
var service = {};
service.postStep1 = function (){
return $http.post(base_url+'/step-1');
};
service.postStep2 = function (data){
return $http.post(base_url+'/step-2', data);
};
service.postStep3 = function (data){
return $http.post(base_url+'/step-3', data);
};
return service;
}]);
For step 1 and 2, I want to use InteceptorA and Step 3 I want to use InterceptorB. What is the cleanest way to do this?
What Cloves answered is good but if there are multiple routes then it will be hard to assign multiple if conditions based on the URL. Also, if the URL changes, you need to modify in the interceptor as well.
I guess the cleanest way of achieving this is the config. Let's start with your service:
app.service('WizardService', ['$http', function($http) {
var base_url = '/api';
var service = {};
service.postStep1 = function (){
return $http.post(base_url + '/step-3', null, {interceptMe: 'A'});
};
service.postStep2 = function (data){
return $http.post(base_url + '/step-2', null, {interceptMe: 'A'});
};
service.postStep3 = function (data){
return $http.post(base_url + '/step-3', null, {interceptMe: 'B'});
};
service.postStep4 = function (data) {
// no interception
return $http.post(base_url + '/step-3');
};
return service;
}]);
Now, register the interceptor (I'm just showing you the main logic of interceptor):
$httpProvider.interceptors.push(['$rootScope', function($rootScope, $q) {
return {
'request': function (config) {
if (config.interceptMe) {
if (config.interceptMe === 'A') {
// do something for interceptor type A
} else if (config.interceptMe === 'B') {
// do for type B
}
}
return config;
}
}
});
Implement a single interceptor, as shown in the documentation for the $http service.
If you need to intercept requests, in the 'requests' callback, inspect the config.url and use something like regex matching. Example:
// register the interceptor as a service
$provide.factory('myInterceptor', function() {
return {
'request': function(config) {
if (/step-1$/.test(config.url)) doSomething1();
if (/step-2$/.test(config.url)) doSomething2();
if (/step-3$/.test(config.url)) doSomething3();
return config;
}
}
}
First off, there's nothing in the $http service and its use of the $httpProvider.interceptors property to help accomplish what you're looking for.
Referring to v1.5.6 source.
.interceptors is a plan array (line 375):
var interceptorFactories = this.interceptors = [];
And they're ultimately just pushed (or unshifted) into the promise chain, depending on whether it's a request or response.
Line 986:
// apply interceptors
forEach(reversedInterceptors, function(interceptor) {
if (interceptor.request || interceptor.requestError) {
chain.unshift(interceptor.request, interceptor.requestError);
}
if (interceptor.response || interceptor.responseError) {
chain.push(interceptor.response, interceptor.responseError);
}
});
So, other than rolling your own alternative to the $http service (not something I'd recommend in this case), you'll have to work within the confines of what you can do within a http interceptor itself. In other words, the interceptor (or interceptors) will have to manage filtering routes itself.
I see 3 slightly different ways you could go about this.
A single interceptor to act as a 'marshal' to call logic based on the route.
Multiple interceptors, each with their own route filtering logic.
Multiple interceptors with configured / injected rout filtering logic.
Which of these methods works best for you will depend on a few factors, like:
Quantity of interceptors
Complexity of route filtering (your example could be a simplified one)
Likelihood that filtering rules will change independently of interceptor logic
A note on singletons
Keep in mind that services are singletons. They're created once, and re-used. Per Angular doco:
Each component dependent on a service gets a reference to the single instance generated by the service factory.
So, while there's undoubtedly some overhead in $http going through a long promise chain if you've got multiple interceptors registered, it's not as taxing as it might first seem. That said, you've mentioned in comments that you might be registering as many as 100 interceptors, and I cannot comment on the specific performance impact that may or may not have.
1 - Single Interceptor
Cloves answer already provided an example for this, as did Shashank's. Something like this:
function SingleInterceptor() {
var service = {
request: request
};
return service;
function request(config) {
if (config.url === base_url + '/step-1') {
step1Logic();
}
if (config.url === base_url + '/step-2') {
step2Logic();
}
// etc...
return config;
}
}
This is neat and simple if you've not got a lot of different interceptor logic to deal with, but could become a bit clumsy to maintain in higher volumes.
2 - Multiple Interceptors (with their own filtering)
Each interceptor has its own logic for determining whether the route applies. Like:
function InterceptorStep1() {
var service = {
request: request
};
return service;
function request(config) {
if (config.url === base_url + '/step-1') {
// Step 1 logic here
}
return config;
}
}
function InterceptorStep1() {
var service = {
request: request
};
return service;
function request(config) {
if (config.url === base_url + '/step-2') {
// Step 2 logic here
}
return config;
}
}
This would be more maintainable in high volumes, but becomes awkward if you want to start changing the filtering rules, or the interceptors don't have an obvious one-to-one mapping with URL's. Hypothesising here, maybe they're not all as obvious as "Step 1", "Step 2", etc.
3 - Multiple Interceptors (config based filtering)
Similar to #2, but separate the route filtering logic from the interceptors themselves by using a provider for each.
function InterceptorB(filterUrl) {
var service = {
request: request
};
return service;
function request(config) {
if (!filterUrl || filterUrl(config.url)) {
// Logic here
}
return config;
}
}
angular
.module('app')
.provider('InterceptorB', function InterceptorBProvider() {
var filterUrlInner;
this.setFilterUrlCallback = function (fn) {
filterUrlInner = fn;
};
this.$get = [function InterceptorBFactory($log) {
return new InterceptorB(filterUrlInner);
}];
});
There's more work in getting this one set up in the first place, but is in my view the most flexible and easily maintained once you've got more than just a few interceptors.
In our application, we have an search input field. Typically a request is sent while the user types (a la Google Instant) and the results are displayed.
Obviously, the following can happen:
User types, which results in ajaxRequest1
User continues typing, resulting in ajaxRequest2
results2 corresponding to ajaxRequest2 are received and displayed
After this, results1 corresponding to ajaxRequest1 are received. Obviously, since ajaxRequest2 was sent after ajaxRequest1, we only care about results2, not results1.
EDIT: The obvious answer here is "Use debounce". For reasons of confidentiality and brevity, I'll just say here that it won't work in our particular scenario. I know what debounce does and I have considered it.
In pseudo-code, we used to handle it like this:
$scope.onInput = function() {
var inputText = getInput();
SearchService.search(inputText).then(function(results) {
// only display if input hasn't changed since request was sent
if(inputText === getInput()) {
displayResults(results);
}
});
};
Since this involves a lot of boilerplate and looks ugly, we moved to a pattern where the SearchService manages things a bit better
$scope.onInput = function() {
var inputText = getInput();
SearchService.search(inputText).then(function(results) {
displayResults(results);
});
}
function SearchService() {
var cachedSearchDeferred;
this.search = function(inputText) {
if(cachedSearchDeferred) {
//means there's an unresolved promise corresponding to an older request
cachedSearchDeferred.reject();
}
var deferred = $q.deferred();
$http.post(...).then(function(response) {
// saves us having to check the deferred's state outside
cachedSearchDeferred = null;
deferred.resolve(response.data);
});
cachedSearchDeferred = deferred;
return deferred.promise;
}
}
This works fine. The SearchService creates a deferred containing the promise corresponding to the most recent call to SearchService.search. If another call is made to SearchService.search the old deferred is rejected and a new deferred is created corresponding to the new call.
Two questions:
Is this a good pattern to do what we need - essentially request locking? We want to ensure that only the most recent request's promise resolves successfully
If we had other SearchService methods that needed to behave similarly, then this deferred boilerplate needs to be inside every method. Is there a better way?
#Jayraj depends how sophisticated you want to make your http api. You can go very deep, but if I understand your question you are looking for a http timeout interceptor. Using Angular $httpProvider you can register a custom interceptor which needs to return a response and request.
I should note I've frankensteined this from pieces of different code bases so I don't take credit for code, but it is early morning and would need to go find the source in my libraries, but to help best practice directionally here goes.
ANGULAR.JS EXAMPLE
angular team give this example
$httpProvider.interceptors.push(function($q, dependency1, dependency2) {
return {
'request': function(config) {
// same as above
},
'response': function(response) {
// same as above
}
};
});
create a factory object that holds you http endpoint configuration i.e a config file that with a server component and an endpoint that identified the UID for the endpoint i.e. where does it go and who is sending it
(function() {
'use strict';
var config = {
server: {
url: null
},
endpoint: {
url: null,
uuid: null,
}
};
return angular.module('matrixme.config', [
]).constant('config', config);
})();
for brevity sake I will leave out the service provider code, but you will need to build an REST api service provider, which you then inject into all relevant classes. The provider will effectively configure your config object e.g. user, articles and will serve as home for api calls.
You create your own interceptor and inject as such:
(function() {
'use strict';
angular.module('matrixme.api', ['matrixme.config'])
.config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('timeoutInterceptor');
}]);
})();
Build the injector before you inject :) I have not tested this but really answering your question of best practice. So this is directional, but you would then create your request and response. You can build multiple custom interceptors e.g. uuid, auth timeout, etc.
(function() {
'use strict';
TimeoutInterceptor.$inject = ['$timeout', '$q', '$rootScope', 'request'];
function TimeoutInterceptor($timeout, $q, $rootScope, request) {
return {
request: function(config) {
if ((config.url)) {
config._ttl = config._ttl ? Math.min(2000, config._ttl * 2) : 2000;
config.timeout = $timeout(function() {
config._isTimeout = true;
}, config._ttl);
}
return config;
},
response: function(response) {
if (response.config.timeout) {
$timeout.cancel(response.config.timeout);
$rootScope.serverStatus = 0;
}
return response;
},
};
}
angular.module('matrixme.api')
.factory('timeoutInterceptor', TimeoutInterceptor);
})();
It turns out there already exists a solution for this: RxJS. The example in their README is almost this exact scenario.
const $input = $('#input');
/* Only get the value from each key up */
var keyups = Rx.Observable.fromEvent($input, 'keyup')
.pluck('target', 'value')
.filter(text => text.length > 2 );
/* Now debounce the input for 500ms */
var debounced = keyups
.debounce(500 /* ms */);
/* Now get only distinct values, so we eliminate
the arrows and other control characters */
var distinct = debounced
.distinctUntilChanged();
/* Once that is created, we can tie together the
distinct throttled input and query the service.
In this case, we'll call flatMapLatest to get
the value and ensure we're not introducing any
out of order sequence calls. */
const suggestions = distinct
.flatMapLatest(() => {
// Do XHR and return a promise
// flatMapLatest will always use the latest one
});
There's also RxJS for Angular which adds things to the $scope object.
I need to prevent sending the same request repeatedly to API before the previous request will give the response. I have found out some solutions. But, I don't want to disable the button while waiting for response because I have more API calls in my app.
I really need to do something in my $provider .config() .I found a way here(http://blog.codebrag.com/post/57412530001/preventing-duplicated-requests-in-angularjs).
But I need more clarification code. Any kind of reference about this is welcome.
Lets say you have $http in your controller.js file.
Many request to server
$http.get('/link/to/file.php');
Just one request to server, no matter how many times you will call this method:
$http.get('/link/to/file.php', {cache: true});
Example:
(function() {
'use strict';
angular
.module('yourModuleName')
.controller('DashboardCtrl', DashboardCtrl);
DashboardCtrl.$inject = ['$scope'];
function DashboardCtrl($scope) {
$scope.get = function () {
$http.get('/link/to/file.php', {cache: true}).then(function(response) {
// it will do GET request just once
// later you will get the same response from cacheFactory
})
}
}
}());
I would like to complement #VikasChauhan answer, however I do not have enough reputation to comment on his answer.
His code works great for me, except the part where he returns null. That causes Angular to throw a bunch of errors all over.
Instead of null, I simply reject the request:
return $q.reject(request);
Here's my function:
$httpProvider.interceptors.push(['$injector', '$q', function interceptors($injector, $q) {
return {
// preventing duplicate requests
request: function request(config) {
var $http = $injector.get('$http');
var _config = angular.copy(config);
delete _config.headers;
function isConfigEqual(pendingRequestConfig) {
var _pendingRequestConfig = angular.copy(pendingRequestConfig);
delete _pendingRequestConfig.headers;
return angular.equals(_config, _pendingRequestConfig);
}
if ($http.pendingRequests.some(isConfigEqual)) {
return $q.reject(request);
}
return config;
}
};
}
]);
Hope this helps other people.
You can create a function to cancel the first http request, when calling the another one on the button click.
Here is a reference that uses $q.defer() function that helped me on a similar issue:
http://odetocode.com/blogs/scott/archive/2014/04/24/canceling-http-requests-in-angularjs.aspx
In my project, i was facing this problem. I found a very useful working solution here
And implemented it inside the config:
function config($routeProvider, $httpProvider) {
$httpProvider.interceptors.push(['$injector', function interceptors($injector) {
// Manually injecting dependencies to avoid circular dependency problem
return {
// preventing duplicate requests
'request': function request(config) {
var $http = $injector.get('$http'),
copiedConfig = angular.copy(config);
delete copiedConfig.headers;
function configsAreEqual(pendingRequestConfig) {
var copiedPendingRequestConfig = angular.copy(pendingRequestConfig);
delete copiedPendingRequestConfig.headers;
return angular.equals(copiedConfig, copiedPendingRequestConfig);
}
if ($http.pendingRequests.some(configsAreEqual)) {
debugger;
return null;
}
return config;
}
}
}
]);
}
Good Morning,
I've run into a problem I seem to not be able to solve myself.
I'm trying to register a httpinterceptor in a different place than the initial config block.
Doing this works as expected:
angular.module('app', ['ngResource'])
.config(function($httpProvider) {
$httpProvider.interceptors.push(function() {
return {
request: function($request) {
console.log($request);
return $request;
}
}
})
})
But the interceptor is part of a submodule. So my app looks as follows:
EDIT:
angular.module('app', ['ngResource']);
angular.module('app.submodule', ['ngResource'])
.config(function($httpProvider) {
$httpProvider.interceptors.push(function() {
return {
request: function($request) {
console.log($request);
return $request;
}
}
})
})
Additionally the submodule is lazyloaded. But I do not think that is the root of the problem.
I tried referencing the httpProvider in the initial config block by adding:
$httpProviderReference = $httpProvider;
So I could register an interceptor later. This wouldn't even work in the initial run() block. Inspecting the Provider, it seems to have worked, but the interceptor is never called.
Does anyone know how to work around this? I am trying to add an authentication token to the header of a request.
Thanks in advance, olu
For anyone else encountering a similar problem, this is how i have done it:
I registered a general interceptor in my main module:
angular.module('app', ['ngResource'])
.config(function($httpProvider) {
$httpProvider.interceptors.push('Interceptors');
})
.factory('Interceptors', function() {
var requestFunctions = [];
return {
request: function($request) {
var r = $request;
for (var i = requestFunctions.length - 1; i >= 0; i--) {
r = requestFunctions[i]($request);
};
return $request;
},
setRequestFunction: function(fn) {
requestFunctions.push(fn);
}
}
})
The factory holds an array of functions, that are called in series. The original request is parsed through the functions. The request is altered in the submodule:
angular.module('app.submodule', ['ngResource'])
.run(function($injector,MyService) {
var Interceptors = $injector.get('Interceptors');
Interceptors.setRequestFunction(function($request) {
$request.headers['auth-id'] = MyService.getAuthData().authId;
$request.headers['auth-token'] = MyService.getAuthData().authToken;
}
return $request;
})
})
Also Restangular is worth having a look at. It is a substitution for ngResource and it seems to be possible to register interceptors for Restangular anywhere in the app.
Say I need to include a GroupId parameter to every request the user makes, but I don't want to modify every service call to include that. Is it possible to make that GroupId appended automatically to all requests, whether it is POST or GET query string?
I have been looking into the interceptor request function, but can't figure out how to make the change
** Edit **
Current working sample below is a combo of Morgan Delaney and haimlit's suggestions (I think it is a combom anyway). The basic idea is that if the request is a POST, modify config.data. For GET, modify params. Seems to work so far.
Still not clear on how the provider system works in Angular, so I am not sure if it is entirely approriate to modify the data.params properties here.
.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push(['$rootScope', '$q', 'httpBuffer', function ($rootScope, $q, httpBuffer) {
return {
request: function (config) {
if (config.data === undefined) {
//Do nothing if data is not originally supplied from the calling method
}
else {
config.data.GroupId = 7;
}
if (config.method === 'GET') {
if (config.params === undefined) {
config.params = {};
}
config.params.GroupId = 7;
console.log(config.params);
}
return config;
}
};
} ]);
} ]);
If your example works, great. But it seems to lack semantics IMHO.
In my comments I mentioned creating a service but I've set up an example Plunker using a factory.
Plunker
Relevant code:
angular.module( 'myApp', [] )
.factory('myHttp', ['$http', function($http)
{
return function(method, url, args)
{
// This is where the magic happens: the default config
var data = angular.extend({
GroupId: 7
}, args );
// Return the $http promise as normal, as if we had just
// called get or post
return $http[ method ]( url, data );
};
}])
.controller( 'myCtrl', function( $scope, $http, myHttp )
{
// We'll loop through config when we hear back from $http
$scope.config = {};
// Just for highlighting
$scope.approved_keys = [ 'GroupId', 'newkey' ];
// Call our custom factory
myHttp( 'get', 'index.html', { newkey: 'arg' }).then(function( json )
{
$scope.config = json.config;
});
});