ionic http request loading timeout

Question

I am using the following to show a loading screen whenever I am performing a http request however sometimes if there is an error then it will stay loading (because of the backdrop the app becomes unusable). Rather than hide it on every error checker I was wondering if it is possible to call the timeout after 5 seconds?

.config(function($httpProvider) {
    $httpProvider.defaults.timeout = 5000;

    $httpProvider.interceptors.push(function($rootScope) {
        return {
            request: function(config) {
                $rootScope.$broadcast('loading:show')
                return config
            },
            response: function(response) {
                $rootScope.$broadcast('loading:hide')
                return response
            }
        }
    })
})

Following Jess's answer it now looks like this :

.config(function($httpProvider) {
    $httpProvider.defaults.timeout = 5000;

    $httpProvider.interceptors.push(function($rootScope) {
        return {
            request: function(config) {
                $rootScope.$broadcast('loading:show')
                return config
            },
            response: function(response) {
                $rootScope.$broadcast('loading:hide')
                return response
            },
            responseError: function(response) {
                $rootScope.$broadcast('loading:hide')
                return response

            },
            requestError: function(response) {
                $rootScope.$broadcast('loading:hide')
                return response
            }
        }
    })
})

However I cannot seem to be able to put an alert in the requestError to inform the user.

Question How can I implement an alert to notify the user of the error that has occurred?

Answer 1

try adding responseError and requestError so like this:

 responseError: function(responseError) {
                $rootScope.$broadcast('loading:hide')
                return responseError

and do this again with requestErro r, This is from the angular http interceptors docs

requestError : interceptor gets called when a previous interceptor threw an error or resolved with a rejection.

responseError : interceptor gets called when a previous interceptor threw an error or resolved with a rejection.

Edit to answer comment:

so if you want to throw a alert on responseError than a add a $rootScope.$broadcast('response:error')

in the responseError function

then in the controller you want to throw the alert in just do a

$scope.$on('response:error', function(){throw the error here});

you can also do the same for requestError

this works because $broadcast -- dispatches the event downwards to all child scopes