AngualrJS - How to manage usability with multiple http error messages?

Question

I am writing an Angular 1.5.3 app. On my main 'home' page controller I call 2 different endpoints with $http. The two endpoints are not related to each other and have separate data etc. One problem I am having is if both of those endpoints have an error then my user is going to see 2 error messages. The messages may or may not be the same (e.g. sometimes no internet connection).

FirstService.request()
    .then(handleFSSuccess)
    .catch(handleError);

SecondService.request()
.then(handleSSSuccess)
.catch(handleError)

    function handleError(error) {
        ErrorService.showErrorBanner(error);
    }

I cannot use the $q.all feature or promise chaining because even if the first promise fails I want the second to continue.

I am not sure how I can manage to run all promises regardless if they one or all fail, and only show one error banner. If I only show one error banner, then the other error messages may not be shown (prevent more than one error banner from being shown).

It's better for usability if only one is shown.

Answer 1

FirstService.request() and SecondService.request() both return Promise and you resolve it with then/catch.

I would wrap it with new Promise that will resolve them even if failure will happen. For example:

var deferred = $q.defer();

FirstService.request().then(function(_response){
    deferred.resolve(_response.data);
}).catch(function(error){
    deferred.resolve({error:error}); // here we do not reject but pass error to resolve
});

 return  deferred.promise;

So now you can use $q.all and you will get only resolving data, or object or error object.

In one place you can filter data by error key (because you get [res1, res2])

---

Hope it will help you