Recently encountered a puzzling situation and couldn't find a solution even after thorough searching.
I have a textbox where users can enter keywords to filter table data. The input element has an ng-change directive triggering the following code:
return $http.get(url).then(function (response) {
return response.data;
});
Everything was working smoothly until our tester discovered some unexpected behavior in IE11. For example, typing "M-A-T-T" in the textbox in IE10 resulted in:
https://i.sstatic.net/n5D2c.png
Subsequent requests took longer than the first, with the fourth request being the one received by the controller.
Typing "M-A-T-T" in the same textbox in IE11, on the other hand, showed:
https://i.sstatic.net/HGZLT.png
Inexplicably, the second request would take nearly 2 seconds to complete after the fourth request, causing the wrong results to be displayed. How can this issue be addressed in Angular? Thank you for any insights.
UPDATE Following frosty's suggestion, I've implemented the following additional function which works well:
var cancelDeferred;
var getUsers = function (criteria) {
if (cancelDeferred) {
cancelDeferred.resolve();
}
cancelDeferred = $q.defer();
return $http.get(url, { timeout: cancelDeferred.promise }).then(function (response) {
cancelDeferred = undefined;
return response.data;
});
};
The primary challenge was handling errors when utilizing this method. Timeouts generated error responses similar to HTTP 500 errors. To handle actual errors while ignoring timeouts:
function onError(data, status) {
if (data.data !== null && data.status !== 0) {
//handle error
}
}
Looking into implementing global timeout handling instead of modifying numerous $http.get() calls...