Hello everyone! I was inspired to write this article by my students and mentees. There are a lot of articles like this across the internet, but I dedicate this one to beginners ( ). specifically for those, who need to know the basics only You’ll find this article useful if you’re beginning your journey as a . QA Automation Engineer : This is on asynchronous functions and promises. If you’d like to know more - better check out the . IMPORTANT not a complete guide mdn web docs What’s Promise? Speaking technically, is . It represents the eventual completion (or failure) of an asynchronous operation and its resulting value. Promise an object The best example of a object is : Promise an HTTP request When you send a request - it takes some time for a server to process it (which means that we don’t get the response from the server immediately). Once the server has processed the request - we receive a response from it. As you can see in the screenshot - it took ~3 seconds for the server to respond. HOW Does it Work in Javascript? So, if we’d execute a function to get the response - we won’t get it immediately as well. JavaScript fetch I.e., the function will return a , instead of a response: fetch Promise From a perspective - it got the job done ( ). JavaScript the request is sent, isn’t it? If we’d take a look at the function - we’ll see that it’s a function that returns a : fetch Promise<Response> It means that this function returns a (of course). But if we’ll wait for to resolve - it’ll return a object! Promise Promise Response How do we wait? Well, there are 2 ways to do that… Synchronous Code Use function: then function receives a resolved object ( in the current example) - i.e., whatever got inside . then Response Promise<something> <> Asynchronous Code Use / : async await How is that different than something we’ve done in the (sync) example? synchronous You don’t need function to extract a value from the (fetch) function. .then() async keyword is in functions . await available async only If you won’t use word in functions (the ones that return objects) - they will run simultaneously. await asynchronous Promise Running Code Asynchronously / and syntax seems redundant in most of the use cases if you’re the one who develops automated tests. Why does this syntax even exist? What’s the point of this? Why can’t we just receive a value that we need from a function? async await then() The answer is simple - it allows us to define functions without the strict sequence of commands. I.e., what if we need to execute 10 requests, but they don’t have to be run synchronously (one after another)? Promise.all([ fetch(...), fetch(...), ... ]).then((responses) => { responses.forEach(value => console.log(value)) }) The code above will run all commands inside of , and then wait for them to resolve (finish) and log into the console every response. fetch Promise.all([]) you can do the same with async/await construction: OR const [responses] = await Promise.all([ fetch(...), fetch(...), ... ]) responses.forEach(value => console.log(value)) Conclusion Now you know the basics of object usage, and it’ll be good enough for most of the use cases, especially if you’re working with automated tests. Promise Also, keep in mind that most developers use / construction instead of (i.e., ) as it’s supposed to be “a syntax sugar”. async await sync .then() Thanks for reading! Hope you’ve learned something new today 🤓
