Combining httpProvider responseInterceptor with $http error callback does not function properly

Question

Combining httpProvider responseInterceptor with $http error callback does not function properly

In my application, I implemented a "loading screen" feature inspired by this post: 'Click'

However, I am facing an issue where all $http requests are triggering the "success" callback, even for URLs that do not exist.

$http.post("this doesnt even exist", { })
.success(function (data, status, headers, config) {
    alert("success"); //even called for non-existing URL
})
.error(function (data, status, headers, config) {
    alert("error"); //never triggered
});

Disabling the 'responseInterceptor' resolves the issue. Everything works as expected, with errors being handled correctly (e.g., exceptions, not found URLs, incorrect parameters).

I am fetching data from a .NET Webservice.

The values of parameters in success callback:

data: ''
status: 0
headers: 'function(name) { ... }'
config: JSON.stringify(config)  '{"method":"POST","url":"this doesnt even exist","data":{}}'

javascript ajax angularjs callback

Answer 1

Answer №1

The reason for this issue is that the response interceptor you are using tends to "swallow" the error instead of handling it properly.

In the provided code snippet:

return promise.then(hide, hide);

The first occurrence of hide represents the success callback, while the second refers to the error callback.

Within the hide function itself, the only instruction present is return r;, indicating that it will always return the response.

In order for your $http.post request to recognize an error, the response interceptor should return the promise as rejected like so: return $q.reject(reason);

A potential solution could involve implementing the following logic or utilizing it as a reference point (please note that I have not been able to conduct any testing):

$httpProvider.responseInterceptors.push(function ($q) {
        return function (promise) {
            numLoadings++;
            loadingScreen.show();

            var hide = function () {
                if (!(--numLoadings)) loadingScreen.hide();
            };

            var success = function (response) {
                hide();
                return response;
            };

            var error = function (reason) {
                hide();
                return $q.reject(reason);
            };

            return promise.then(success, error);
        };
    });

Answer 2

The reason for this issue is that the response interceptor you are using tends to "swallow" the error instead of handling it properly.

In the provided code snippet:

return promise.then(hide, hide);

The first occurrence of hide represents the success callback, while the second refers to the error callback.

Within the hide function itself, the only instruction present is return r;, indicating that it will always return the response.

In order for your $http.post request to recognize an error, the response interceptor should return the promise as rejected like so: return $q.reject(reason);

A potential solution could involve implementing the following logic or utilizing it as a reference point (please note that I have not been able to conduct any testing):

$httpProvider.responseInterceptors.push(function ($q) {
        return function (promise) {
            numLoadings++;
            loadingScreen.show();

            var hide = function () {
                if (!(--numLoadings)) loadingScreen.hide();
            };

            var success = function (response) {
                hide();
                return response;
            };

            var error = function (reason) {
                hide();
                return $q.reject(reason);
            };

            return promise.then(success, error);
        };
    });

Combining httpProvider responseInterceptor with $http error callback does not function properly

Answer №1

Similar questions

The console experienced a forced reflow when a tooltip appeared on the slider handle while executing JavaScript

Looking to swap out the final value in a JavaScript array?

React's input onChange event does not trigger for the second time. It only works the first time

Error in MEAN stack due to absence of hash prefix

Any ideas on how to fix the error that pops up during the installation of the bootstrap package in Node

Stop the Router from Displaying the Page momentarily prior to Redirecting

Renovating code with the .catch(handleError) function leads to an UnhandledPromiseRejectionWarning

The chosen choice is not able to be shown within the option tag

Incorporating ngRoute for routing with an Express backend

Mocking a Promise-returning dependency for a React Component in Jest

Discover the process of connecting a REST controller with AngularJS and Spring

When using res.redirect in Express, it not only redirects to a new URL but also allows you to access the HTML

React TypeScript - creating a component with a defined interface and extra properties

Tips for sending the setState function to a different function and utilizing it to identify values in a material-ui select and manage the "value is undefined" issue

Arranging arrangements in javascript

Tips for arranging the items within the slider according to the specified direction (rtl, ltr) in the Owl Carousel slider for Angular

JavaScript Loading Screen - Issues with window.onload functionality

A guide on incorporating dynamic formControlName functionality into AngularJs2

Iterate through the loop to add data to the table

Before being sent, CDATA is eliminated