Rejecting a promise throws "Uncaught (in promise)"

javascript angular promise zone.js
Javier Marín picture Javier Marín · Apr 24, 2018 · Viewed 8.9k times · Source

I'm using promises to handle to handle a modal dialog: resolved when the user press the OK button, rejected when cancelled or closed.

To resolve and dismiss the modal I use this methods:

    let modalResolve, modalReject;
    modal.promise = new Promise<any>((resolve, reject) => {
        modalResolve = resolve;
        modalReject = reject;
    });
    modal.close = (result) => {
        if (modal.isOpen) {
            modalResolve(result);
        }
    };
    modal.dismiss = (reason) => {
        if (modal.isOpen) {
            modalReject(reason);
        }
    };
    modal.promise.finally(() => modalElement.remove());

And when cancel button fires this method within the modal:

modal.dismiss('close')

Everything is working fine and the modal hides, but a console error is logged with this description and stack: 

Error: Uncaught (in promise): close
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4751)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)

It is weird because the modal is dismissed anyway, and this error is not shown on all modals I use, just in some of them. Resolving does not produce this kind error.

Answer

John Velasquez picture John Velasquez · Apr 24, 2018

You have to catch it to prevent the error

modal.promise.then(hideFn, hideFn).catch((res) => {});

Related questions

Angular 2: How to call a function after get a response from subscribe http.post

I need to call a method after get the data from the http post request service: request.service.TS get_categories(number){ this.http.post( url, body, {headers: headers, withCredentials:true}) .subscribe( response => { this.total = response.json(); }, error => { } ); } …

Read More
Wait for multiple promises to finish

I am using the SQLStorage from the Ionic platform. The remove function returns a promise. In my code I need to remove multiple values. When these are all finished I need to execute some code. How can I wait for …

Read More
Is it a good practice using Observable with async/await?

I am using angular 2 common http that return an Observable, but I face with a problem that my code likes a mesh when I use nested Observable call: this.serviceA.get().subscribe((res1: any) => { this.serviceB.get(res1).subscribe((…

Read More