Successive promises of catches

Question

Successive promises of catches

Here is a situation that I am dealing with:

controller.ts

methodA(): void {
    myServive.someMethod()
    .then( () => console.log("then") )
    .catch( e => {
        console.log("catch");
    });
}

service.ts

someMethod(): ng:IPromise<void> {

    const deferred = this.$q.defer<void>();

    return this.OtherService.otherMethod()
    .catch ( e => {
        deferred.reject(reason);
    }
}

otherservice.ts

otherMethod(): ng.IPromise<any> {
    return this.HttpService.get(url);
}

Test:

The otherMethod (otherService.ts) is encountering an error from the HttpService.
The catch in someMethod (service.ts) is being executed.

Why, in the controller.ts, is the then block being executed?

javascript angularjs promise

Answer 1

Answer №1

The catch block is executed if a preceding then (or catch) encounters an error. If no errors occur, the code will proceed to the next then statement.

Consider the following code snippet:

methodA(): void {
    myServive.someMethod()
    .then( () => console.log("then") )
    .catch( e => {
        console.log("catch"); // No errors thrown, so code execution continues in the next then
    });
}

You can intentionally throw an error within the catch block to trigger the subsequent catch block:

methodA(): void {
    myServive.someMethod()
    .then( () => console.log("then") )
    .catch( e => {
        console.log("catch");
        throw new Error(e) // An error occurred! The code will move on to the next catch block
    });
}

Answer 2

The catch block is executed if a preceding then (or catch) encounters an error. If no errors occur, the code will proceed to the next then statement.

Consider the following code snippet:

methodA(): void {
    myServive.someMethod()
    .then( () => console.log("then") )
    .catch( e => {
        console.log("catch"); // No errors thrown, so code execution continues in the next then
    });
}

You can intentionally throw an error within the catch block to trigger the subsequent catch block:

methodA(): void {
    myServive.someMethod()
    .then( () => console.log("then") )
    .catch( e => {
        console.log("catch");
        throw new Error(e) // An error occurred! The code will move on to the next catch block
    });
}

Answer 3

Answer №2

Why is the then block in controller.ts being executed?

The reason for this is that you caught the error and returned undefined in service.ts

If you do not intend to handle any errors in service.ts, it may be best to remove the catch/defer entirely from there.

Alternatively, if you want the catch to be handled in the controller, you can simplify service.ts like so:

// service.ts
someMethod(): ng:IPromise<void> {
    return this.OtherService.otherMethod()
}

If you wish to handle the catch both in service.ts AND in the controller, you can rethrow the error (or a new one) as shown below:

// service.ts
someMethod(): ng:IPromise<void> {

    const deferred = this.$q.defer<void>();

    return this.OtherService.otherMethod()
    .catch ( e => {
        // you can either do:
        // throw e
        // which rethrows the same error (similar to not having a catch at all)
        // or you can handle the error and throw a new one like:
        //
        // ...some error handling code
        // throw new Error('my new error');
    });
}

Regardless of your choice, a deferred is not necessary.

Answer 4

Why is the then block in controller.ts being executed?

The reason for this is that you caught the error and returned undefined in service.ts

If you do not intend to handle any errors in service.ts, it may be best to remove the catch/defer entirely from there.

Alternatively, if you want the catch to be handled in the controller, you can simplify service.ts like so:

// service.ts
someMethod(): ng:IPromise<void> {
    return this.OtherService.otherMethod()
}

If you wish to handle the catch both in service.ts AND in the controller, you can rethrow the error (or a new one) as shown below:

// service.ts
someMethod(): ng:IPromise<void> {

    const deferred = this.$q.defer<void>();

    return this.OtherService.otherMethod()
    .catch ( e => {
        // you can either do:
        // throw e
        // which rethrows the same error (similar to not having a catch at all)
        // or you can handle the error and throw a new one like:
        //
        // ...some error handling code
        // throw new Error('my new error');
    });
}

Regardless of your choice, a deferred is not necessary.

Successive promises of catches

controller.ts

service.ts

otherservice.ts

Answer №1

Answer №2

Similar questions

Transforming complex mathematical equations into executable code using the node.js platform

How can we implement the MUI snackbar to only show when a successful login occurs in ReactJS?

MVC3: Easily browse through tables by accessing details directly from the details view, eliminating the need to click on

Refreshing web pages using AJAX

Issues with Internet Explorer's scaling functionality are preventing it from operating correctly

What is the process for adding parameters to a Fetch GET request?

Retrieve both the key and corresponding value from a JSON object

Mocking a React component with Jest's MockImplementation

Twice the data fetching through ajax on popup is observed using php mysql

Adding content to the parent element immediately after it is generated using jQuery

JavaScript code for iframe auto resizing is not functioning properly on Firefox browser

Proceed to the section with modal

Does the Karma Tast Runner function on node js version 0.12.0?

When a user accesses a page, the UI-router shows the raw code in the UI-views

Unpacking the information in React

Unable to modify the active property of the specified object as it is read-only

I am facing difficulties accessing external URLs in a webview within my Ionic Android application

What causes the d3 force layout to fail and what steps can be taken to resolve it?

Tips for saving a value within a jQuery function for future use in a different function

Troubleshooting V-model errors within VueJS components