When switching routes, I want to prevent any pending requests from the previous route in order to avoid issues where responses from the previous route interfere with data on the current route. This sometimes happens when responses from the previous route take a long time to complete.
I am considering using an http interceptor for this purpose:
$httpProvider.interceptors.push(function($q) {
return {
'request': function(config) {
},
'response': function(response) {
}
};
});
In the request function, I could update the config.timeout with a promise as suggested here, and store all deferred objects in a global cache so they can be cancelled collectively.
However, one issue with this approach is that it might overwrite config.timeout settings made elsewhere in the codebase.
Another potential solution could involve cancelling all AJAX requests at the XMLHttpRequest level, but I am unsure how to implement this. Any recommendations or advice would be greatly appreciated. Thank you.