Mastering the art of Promises and handling errors

Question

Mastering the art of Promises and handling errors

I've been tasked with developing a WebApp using Angular, but I'm facing a challenge as the project involves Typescript and asynchronous programming, which are new to me. The prototype already exists, and it includes a handshake process that consists of calculations and HTTP requests. All functions, even those performing calculations, return a Promise that resolves or rejects based on the outcome.

The functions are connected in a long chain using .then, handling errors along the way. However, this implementation seems complex, and I'm unsure about what's happening behind the scenes:

this.startHandshake()
  .then((buf) => this.calculateSomthing(buf)
    .then((buf2) => http.sendData(buf2)
       ..., // this goes on many levels
    (e:Error) => this.handleError(e)),
  (e:Error) => this.handleError(e))
.catch((e: Error) => { /* Error Handling */ });

My questions are:

Is this coding pattern common for similar problems?
I've heard that Promises are executed in a single-threaded manner. What does this mean for Promises involving only calculations? When does the function within the Promise execute - immediately, queued until the original code finishes, or scheduled by the JavaScript engine?
I'm thinking of writing some functions synchronously but need a way to handle errors. Using exceptions doesn't seem compatible with Promises.
Would using async/await make the code more readable in my case? How would error handling work with async/await, and can it be combined with exceptions?

javascript angular typescript

Answer 1

Answer №1

Perhaps delving deeper into the concept of promises and how to effectively utilize them would be beneficial for you. Nonetheless, here are answers to your questions:

this.startHandshake()
      .then((buf) => this.calculateSomthing(buf))
      .then((buf2) => http.sendData(buf2))
      .then(() => {all the reset} )
      .catch((e: Error) => { ... });

In general, it is advisable to keep the promises chained one after another rather than nesting them inside each other. Therefore, your code should look something like this:
The actions performed within the promise are synchronous, while those between the promises are asynchronous.
As mentioned earlier, synchronized code can be placed inside the promise. When it comes to error handling, familiarize yourself with Promise.reject, which allows manual rejection of the promise.
Async/await functions similarly to Promises but offers a more streamlined syntax. Personally, I prefer using async/await, although setting up the project may require additional attention (Promises are supported by most browsers, whereas async/await may not be).

Edit: There seems to be an issue with the code formatting below, so I have moved it up above the questions.

Best of luck!

Answer 2

Perhaps delving deeper into the concept of promises and how to effectively utilize them would be beneficial for you. Nonetheless, here are answers to your questions:

this.startHandshake()
      .then((buf) => this.calculateSomthing(buf))
      .then((buf2) => http.sendData(buf2))
      .then(() => {all the reset} )
      .catch((e: Error) => { ... });

In general, it is advisable to keep the promises chained one after another rather than nesting them inside each other. Therefore, your code should look something like this:
The actions performed within the promise are synchronous, while those between the promises are asynchronous.
As mentioned earlier, synchronized code can be placed inside the promise. When it comes to error handling, familiarize yourself with Promise.reject, which allows manual rejection of the promise.
Async/await functions similarly to Promises but offers a more streamlined syntax. Personally, I prefer using async/await, although setting up the project may require additional attention (Promises are supported by most browsers, whereas async/await may not be).

Edit: There seems to be an issue with the code formatting below, so I have moved it up above the questions.

Best of luck!

Answer 3

Answer №2

Exploring the concept of callback hell can provide valuable strategies for resolving nested code complexities.

Answer 4

Exploring the concept of callback hell can provide valuable strategies for resolving nested code complexities.

Answer 5

Answer №3

Imagine you have numerous functions, each returning a Promise

f1(p1: any):Promise<any> {}
f2(p2: any):Promise<any> {}
f3(p3: any):Promise<any> {}

If you wish to chain these functions and execute them one after the other, the best method (in my opinion) is to write something like this

const p1 = {} // my first parameter
f1(p1).then((result)=>f2(result))

Your code will be executed once you call the then method

To handle errors from all the methods used, you should utilize the catch method after the call to then

f1(p1).then((result)=>f2(result)).catch((err:Error)=>{ /** do something*/ })

In case you want to manage specific errors coming from one of your functions, I suggest doing something like this

 f1(p1).then((result)=>f2(result).catch((err)=>Promise.resolve(optionalResult))).catch((err:Error)=>{ /** do something*/ })

This process won't break your chain and will continue with the rest of the methods

Another option is to execute promises in parallel using the Promise.all() method as shown below

Promise.all([f1(p1), f2(p2), f3(p3)]).then((results:any[])=>{ ...})

This function will return an array with all the results

If you want to throw an error or stop the chain, you can use the Promise.reject method

Answer 6

Imagine you have numerous functions, each returning a Promise

f1(p1: any):Promise<any> {}
f2(p2: any):Promise<any> {}
f3(p3: any):Promise<any> {}

If you wish to chain these functions and execute them one after the other, the best method (in my opinion) is to write something like this

const p1 = {} // my first parameter
f1(p1).then((result)=>f2(result))

Your code will be executed once you call the then method

To handle errors from all the methods used, you should utilize the catch method after the call to then

f1(p1).then((result)=>f2(result)).catch((err:Error)=>{ /** do something*/ })

In case you want to manage specific errors coming from one of your functions, I suggest doing something like this

 f1(p1).then((result)=>f2(result).catch((err)=>Promise.resolve(optionalResult))).catch((err:Error)=>{ /** do something*/ })

This process won't break your chain and will continue with the rest of the methods

Another option is to execute promises in parallel using the Promise.all() method as shown below

Promise.all([f1(p1), f2(p2), f3(p3)]).then((results:any[])=>{ ...})

This function will return an array with all the results

If you want to throw an error or stop the chain, you can use the Promise.reject method

Mastering the art of Promises and handling errors

Answer №1

Answer №2

Answer №3

Similar questions

Retrieve the row id from the table by clicking on a button in a modal box using jQuery

What is the proper way to retrieve the JSON data?

Issue with React Hook Form - frequent failure in submitting the form

Hide the previous dropdown content in Vue JS by manipulating the visibility of the elements

Localhost Firebase authentication with Facebook integration

Request with missing authentication header in Swagger OpenAPI 3.0

The table is not properly displaying the data even though it is stored in the array and can be seen in the browser console. What could be causing this issue with my

Ways to include "working hours" if statement a particular holiday dates are specified

I prefer not to have the entire URL visible to me

Angular2 encountering a lack of service provider issue

"Embedding PHP code within HTML tags, which is then embedded within

Include a sub-component N times within the main component, depending on the current state value

How do I specify the default checked value for a checkbox in Redux Form?

Having trouble accessing the root route in production environment

Tips for avoiding problems with quoting and using apostrophes in a JavaScript function inside a tag in a JSP file

Triggering a Bootstrap 5 dropdown through code is only effective within the browser's developer console, rather than standard JavaScript implementation

Can the script be loaded into a TypeScript file?

Checking if an instance belongs to a specific class using a custom type guard in TypeScript

Running Ng serve is not functioning properly with no indications of errors or messages to identify the issue

Tips for waiting on image loading in canvas