Make Angular $http service process results one after another

Question

I have a very large angularjs app, that sells stuff and has filters

It seems that we need to support people on flaky connection.

That means that if user selects 'used product' filter and then he unselects 'used product', there will be a 2 calls to the server via $http.

$http.get("reloadresults?used=true", function (response)  { $scope.items = response items; }); at 12:03:04 hours


$http.get("reloadresults?used=false", function (response)  { $scope.items = response items; }); at 12:03:05

Now, image there is a bottleneck or something and the first call with 'used=true' returns last, then there is a problem with the filters.

I know there is a $http interceptor in angularjs, based on promises, how would i fix this problem? So that requests are processed in the order they are sent, meaning 'used=true' and only then used=false.

Edit: cant block thread, cant refactor, just need for the promises to fullfil in the order they were first sent. I think ill post answer later.

It makes sense to cancel the previous request(s) to allow new ones only. Read [how to cancel $http request](https://stackoverflow.com/questions/13928057/how-to-cancel-an-http-request-in-angularjs). — 31piy, Apr 03 '18 at 08:51
Call the second call on the successful return of the first call. — Kaustubh Khare, Apr 03 '18 at 09:01
Why not use spinner where the screen is locked from user clicks. some oveylay effect , i would say — Shashank Vivek, Apr 03 '18 at 09:02
I would also suggest you to refactor your existing code as it seems overworked. DRY principal — Shashank Vivek, Apr 03 '18 at 09:04
would you be able to set a boolean that checks if you are currently sending any request? Then wait until that request resolves — Aleksey Solovey, Apr 03 '18 at 09:08

score 0 · Answer 1 · answered Apr 03 '18 at 10:53

0

I din't understand your question well but i think you are looking for

$q.all(valid_request)

answered Apr 03 '18 at 10:53

Santosh Kumar

205
2
6

I think there is something like a checkbox (any boolean trigger) that populates `$scope.items` upon `true` or `false` by calling different `$http.get` requests. With a delay there are no problems, but if you flick the checkbox very quickly, there will be a **race condition**, which OP want's to remove – Aleksey Solovey Apr 03 '18 at 12:48

score 0 · Answer 2 · answered Apr 05 '18 at 00:37

You could indeed ensure that success handlers are called in the correct order by forming a queue (a promise chain) however it is simpler, and better in this case, to nullify the previous request each time a new request is made.

There's a number of ways in which this could be achieved. Here's one ...

function cancelPrevious(fn) {
    var reject_ = null;
    return function(x) {
        if(reject_) reject_(new Error('cancelled'));
        return Promise.race(fn(x), new Promise(function(_, reject) {
            reject_ = reject; // if reject_ is called before fn(x) settles, the returned promise will be rejected.
        }));
    };
}

which allows you to write ...

var get = cancelPrevious(function(str) {
    return $http.get(str);
});

... and to make requests from any number of event threads :

get('reloadresults?used=true').then(function(response) {
    // This function will be reached only if 
    // $http.get('reloadresults?used=true') fulfills 
    // before another get() call is made.
    $scope.items = response.items;
});

...

// This call causes the then callback above to be suppressed if not already called
get('reloadresults?used=false').then(function(response) {
    $scope.items = response.items;
});

Notes :

http requests are not canceled. Instead, the succuss path stemming from each request is made "cancelable" by racing against a rejectable promise.
side-effects included in the function passed to cancelPrevious() may be executed; in general, don't include such side effects.

this is not correct for IE, promise is not supported on IE11, please write your answer with the 'Q' promise library built into angularjs. — Aflred, May 07 '18 at 10:19
Am miles from home right now. Back in a few days. Meanwhile see if you can fix it yourself. You will need to find a way to achieve `Promise.race()` - that's the only tricky bit. — Roamer-1888, May 07 '18 at 10:55

Make Angular $http service process results one after another

2 Answers2