Summary - Two rules: Always return the Promise, always resolve or reject the Promise. If this was not enough, continue reading.
I’ve tried to understand how the asynchronous side of TypeScript and JavaScript works and how to avoid the problems related to it. My background is in development. I’ve been working with the concurrent systems. I’m used to locks, semaphores and all that stuff which are important to concurrent programming. But now I have to survive with the asynchronous JavaScript.
Most often my use case is that I read the data from somewhere, process it, and then do some new tricks with that data. So it’s much like the pipeline. You can’t process the data unless you’ve read it. You can’t do the new tricks for the data unless your processing has finished. You also have to be sure that you don’t exit before all data is handled.
The best way to manage this situation is to use Promise -class. Using it requires some understanding. I tried to google tutorials etc, but I always got lost. Rest of this blog article is for myself, but I hope it will help others.
The basic structure for the promise is:
promise.then(...).then(...).then(...).catch(...).finally(...)
To get that chain working properly we have to take a look at the real code. The code is simple: I have the array of numbers. I want to wait that many seconds for each “processor”. First we write to the console when we come to the processor. Then we write when we come out from the processor. And at the end we display: "Goodbye” for the developer.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | const array1 = [9, 4, 6, 7, 6, 8]; async function testfunc(test: string, tst: number) { console.log(`In ${test}`); return new Promise((res, rej) => { setTimeout(res, tst * 1000); }).then(() => { console.log(`Out ${test}`); return new Promise((res) => { res(1); }); }); } const testidata = array1.map((item, index) => testfunc(`Number ${index}`, item) ); Promise.all(testidata).then(() => { console.log("Goodbye"); }); |
There’s two rules to create the promise chain which really works.
Rule number one: The promise must ALWAYS be resolved or rejected. The resolve and reject functions are parameters of the promise parameter function. You see this at the lines 5 and 9.
Rule number two: Always return the Promise if you want the Promise chain to continue. This is shown in line 9.
Promise.all() blocks until all promises on the list are resolved successfully or exception is thrown. Promise.allSettled() blocks until all promises are resolved. It’s easy to test other cases if you just remember those two rules above.
Hopefully this helps others also. I hope I’ll end up on this page when I next have to start wondering how the Promise works.
This example is super practical! Mapping over arrays with async functions always trips me up, and your Promise.all explanation makes it clear why returning the inner Promise matters. I’m interested to see if you’ll explore error handling patterns for multiple promises in machine learning scenarios.
ReplyDeleteThe article provides a clear and practical explanation of how asynchronous programming works with JavaScript and TypeScript Promises. The pipeline example makes it easier to understand why operations need to complete in sequence and why methods such as then(), catch(), and finally() are important. The two rules—returning the Promise and ensuring it is resolved or rejected—are especially useful for avoiding broken Promise chains.
ReplyDeleteFor developers strengthening their TypeScript skills, the concepts discussed here provide a useful foundation for handling asynchronous operations. A focused TypeScript Online Training can help learners become more comfortable with Promise-based code, typed asynchronous functions, and modern TypeScript development patterns. The examples in the article also show how Promise.all() can coordinate multiple asynchronous operations.
The article is equally relevant to JavaScript developers because Promises are a core part of modern asynchronous JavaScript. Understanding how Promise chains behave and when to use methods such as Promise.all() and Promise.allSettled() can make asynchronous code easier to manage. Practical Javascript Online Training can further develop these skills by giving learners opportunities to work with asynchronous functions and real-world JavaScript applications.
ReplyDelete