正确使用承诺和错误处理

Question

I have the task of writing a WebApp with angular, where a prototype exists. As I have no experience with Typescript and asynchronous programming, I am not sure how to approach this in the best way.

In the prototype a handshake is performed, which is a sequence of calculations and HTTP requests. All functions (even those that just calculate something) return a Promise containing the function and resolve or reject as a result.

These function are combined in a long chain of .then , which also handles the Errors. This looks rather strange and I am not sure, what really happens there under the hood:

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:

1. Is this Code pattern common for this kind of problem?
2. I read that Promises are handled in a single threaded way. What does that mean for Promises that just calculate something (no http request, no timer) ? When is the function in the Promise executed? Is it instantly, put in a queue for a time when the original code is finished, or is the javascript engine scheduling those two lines of execution?
3. I would prefer to write some of the functions synchronously, but then I need a way to handle errors. The most obvious - exceptions - does not seem to play well with promises.
4. Is maybe async / await applicable in my case to make the code more readable? How would errors be handled? Is it combinable with exceptions?

Answer 1

I would suggest to you about reading some more about promises and how to use them, but anyway, your questions:

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

1. yes and no, usually you would prefer to keep the promises one after another, and not inside, so your code should something like this:

2. what happen inside the promise is synchronize, what happen between the promises is aync

3. as i said before, you might just put synchronized code inside the promise, about the error handling you might need to read about Promise.reject , witch give you the ability to reject the promise manually

4. the async\\await is exactly the same as Promise, it's only sugar syntax. i prefer the async\\await syntax, but the setup of the project require a little bit more attention (Promise is built in in most of the browsers, async await isn't)

Edit : something isn't working with the code formatting, so i moved it up above the question

Good Luck!

Answer 2

阅读有关回调地狱的知识可以为您提供有关如何解决嵌套问题的一些见解。

Answer 3

let say you have multiple functions that each one return a Promise

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

If you want to chain all your methods and execute one after other the best approach (in my opinion) is write something like this

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

your code will be executed once you call the then method

to handle all the errors from all the method you use ,you should use the catch method after call then

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

I case you want to manage a specific error coming from one your functions then I suggest you do something like this

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

this process won't brake your chain and will continue with the rest of the methods

Other think you can do is execute promises in parallel using Promise.all() method like this

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

this function will return a array with all the results

In case you want to throw a error or just stop the chain you can use Promise.reject method