Angular pattern for ensuring single active promise - angularjs

Question

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?

Answer 1

#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);
})();

Answer 2

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.