防止“Uncaught (in promise)”警告。 如何避免'catch'块？ ES6 承诺与 Q 承诺

Question

My question consist of two parts:

Part 1

According to standard ES6 Promise I see that I forced to use catch block everywhere, but it looks like copy/paste and looks weird.

Example:

I have some class which makes request to backend (lets call it API class).

And I have a few requirements for API class using:

1) I need to make requests in different parts of my application with single request errors processing:

// somewhere...
api.getUser().then(... some logic ...);

// somewhere in another module and in another part of app...
api.getUser().then(... some another logic...); 

2) I want so 'then' blocks would work ONLY when 'getUsers' succeeded.

3) I don't want to write catch block everywhere I use api.getUsers()

api.getUser()
// I don't want following
.catch(e => {
    showAlert('request failed');
})

So I'm trying to implement single error processing inside of the class for all "users requests"

class API {
    getUser() {
        let promise = makeRequestToGetUser();
        promise.catch(e => {
            showAlert('request failed');
        });
        return promise;
    }
}

...but if request fails I still forced to use catch block

api.getUser()
    .then(... some logic...)
    .catch(() => {}) // <- I forced to write it to avoid of “Uncaught (in promise)” warning

... otherwise I'll get “Uncaught (in promise)” warning in console. So I don't know the way of how to avoid of .catch block everywhere I use api instance.

Seems this comes from throwing error in such code:

// This cause "Uncaught error"
Promise.reject('some value').then(() => {});

May be you can say 'just return in your class "catched" promise'.

class API {
    getUser() {
        return makeRequestToGetUser().catch(e => {
            showAlert('request failed');
            return ... 
        });
    }
}

...but this contradict to my #2 requirement.

See this demo: https://stackblitz.com/edit/promises-catch-block-question

So my 1st question is how to implement described logic without writing catch block everywhere I use api call?

Part 2

I checked if the same API class implementation with Q library will get the same result and was surprised because I don't get “Uncaught (in promise)” warning . BTW it is more expectable behavior than behavior of native ES6 Promises.

In this page https://promisesaplus.com/implementations I found that Q library is implementation of Promises/A+ spec. But why does it have different behavior? Does es6 promise respects Promises/A+ spec?

Can anybody explain why these libraries has different behavior, which one is correct, and how implement mentioned logic in case if "ES6 Promises implementation" is correct?

Answer 1

I see that I forced to use catch block everywhere

No, you don't need to do that. Instead, return the promise created by then to the caller (and to that caller's caller, and...). Handle errors at the uppermost level available (for instance, the event handler that started the call sequence).

If that's still too many catch s for you, you can hook the unhandledrejection event and prevent its default:

 window.addEventListener('unhandledrejection', event => { event.preventDefault(); // You can use `event.reason` here for the rejection reason, and // `event.promise` for the promise that was rejected console.log(`Suppressed the rejection '${event.reason.message}'`); }); Promise.reject(new Error("Something went wrong"));

The browser will trigger that event prior to reporting the unhandled rejection in the console.

Node.js supports this as well, on the process object:

process.on('unhandledRejection', error => {
  // `error` is the rejection reason
});

Note that you get the reason directly rather than as a property of an event object.

So I don't know the way of how to avoid of .catch block everywhere I use api instance.

Surely the caller of getUser needs to know it failed? I mean, if the answer to that is really "no, they don't" then the event is the way to go, but really the code using api should look like this:

function useTheAPI() {
    return getUser()
        .then(user => {
            // Do something with user
        });
}

(or the async equivalent) so that the code calling useTheAPI knows that an error occurred; again, only the top-level needs to actually handle the error.

Can anybody explain why these libraries has different behavior, which one is correct, and how implement mentioned logic in case if "ES6 Promises implementation" is correct?

Both are correct. Reporting unhandled exceptions entirely in userland (where libraries live) is hard-to-impossible to do such that there aren't false positives. JavaScript engines can do it as part of their garbage collection (eg: if nothing has a reference to the promise anymore, and it was rejected, and nothing handled that rejection, issue the warning).