Angular how to deal with unavailable URLs requested by $http.get or $http.jsonp, which are executed by $q.all()

问题

I've the following code:

eventResourcesCall = $http.jsonp('https://apicall/to/serverA');
eventsDetailsCall = $http.get('https://apicall/to/serverB');

$q.all([eventResourcesCall, eventsDetailsCall]).then(function(values){
    //process data manipulation and merging
});

The problem is that serverA and ServerB might not be available sometimes, and when one of those are unavailable, the data processing code stops and I get an error similar to the one described below:

GET https://apicall/to/serverA?jsonp=angular.callbacks._0 404 (Not Found)

Can any one point me to a documentation or describe on the answer how to properly deal with unavailable URL requested by $http and executed by $q.all()?

What I would like to be able to do is to get an indication that the URL is not accessible and then avoid the data processing code abortion.

Thanks!

回答1:

I would use indirect promises:

var d1 = $q.defer(), d2 = $q.defer();

function NetworkError(reason) { this.reason = reason; }

eventResourcesCall = $http.jsonp('https://apicall/to/serverA').then(
    function(response) {
        d1.resolve(response);
    },
    function(err) {
        d1.resolve(new NetworkError(err));
    }
);
eventsDetailsCall = $http.get('https://apicall/to/serverB').then(
    function(response) {
        d2.resolve(response);
    },
    function(err) {
        d2.resolve(new NetworkError(err));
    }
);

$q.all([d1, d2]).then(function(values){
    var eventResources = values[0], eventsDetails = values[1];

    if( eventResources instanceof NetworkError ) {
        // handle error
    }
    else {
        // eventResources is good, use it
    }

    // and so on...
});

So the indirect promises are allways resolved and the all() succeeds. But the resolution value may be of the special NetworkError class which signals the actual error in this request.

This is definitely bulky, but could be improved with some utility methods, e.g.:

function makeIndirectPromise(httpPromise) {
    var ret = $q.defer();
    httpPromise.then(
        function(response) {
            ret.resolve(response);
        },
        function(err) {
            ret.resolve(new NetworkError(err));
        }
    );
    return ret.promise;
}

And the code above changes to:

function NetworkError(reason) { this.reason = reason; }

function makeIndirectPromise(httpPromise) { /* see above */ }

eventResourcesCall = makeIndirectPromise($http.jsonp('https://apicall/to/serverA'));
eventsDetailsCall = makeIndirectPromise($http.get('https://apicall/to/serverB'));

$q.all([eventResourcesCall, eventsDetailsCall]).then(function(values){
    var eventResources = values[0], eventsDetails = values[1];

    if( eventResources instanceof NetworkError ) {
        // handle error
    }
    else {
        // eventResources is good, use it
    }

    // and so on...
});

回答2:

From Angular doc to $q: as $http returns a promise, you can catch promise rejection using either:

$q.all([eventResourcesCall, eventsDetailsCall]).then(function(values){
    //process data manipulation and merging on Success
}).catch(function(errors){
    //Deal with your $http errors
}).finally(function(data){

});

$q.all([eventResourcesCall, eventsDetailsCall]).then(function(values){
    //process data manipulation and merging on Success
}, function(errors){
    //Deal with your $http errors
});

来源：https://stackoverflow.com/questions/19290196/angular-how-to-deal-with-unavailable-urls-requested-by-http-get-or-http-jsonp

标签

angularjs

angularjs-service