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

Animate the jQuery: Move the image up and down inside a smaller height container with hidden overflow

Utilize the functionality of the acuityscheduling API to streamline your

What counterpart in JavaScript resembles the .NET Standard Class Library?

How can I apply concatMap in Angular?

The absence of a query function in Select2 and Angular

I encounter internal server errors when trying to upload images in React

What is the process for creating a custom Vue 3 element with incorporating styles for child components?

Progress of file uploads on the client side using Vue JS

When using the `coffee-util` library, an issue may arise if the `require('./module')` function ends

Ways to troubleshoot setTimeout functioning during HTTP requests?

Retrieve the student ID from the URL parameters and display all records with the matching ID

The gear icon in the video player is not showing up when I try to change the

What causes the list to be empty at first when using the "!" (not) in an AngularJS filter?

Organizing seating arrangements for a concert hall performance

I'm curious, what should the Procfile look like for a node and Angular 2 application?

Is there a way to determine if a value exists within an array of objects?

The ReactJS Ajax request returns a successful status code of 200 and retrieves the data, however, an error message

Unexpected token error occurs when using map-spread operator in vue-test-utils combined with jest

The angular.copy() function cannot be used within angular brackets {{}}

Execute a function upon the invocation of a different function