<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: adarsh04</title>
    <description>The latest articles on Forem by adarsh04 (@adarsh04).</description>
    <link>https://forem.com/adarsh04</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1226106%2Fba4f8733-2f05-4d19-95d0-2b85bb0262d7.jpg</url>
      <title>Forem: adarsh04</title>
      <link>https://forem.com/adarsh04</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/adarsh04"/>
    <language>en</language>
    <item>
      <title>How to configure modules in a NestJS project</title>
      <dc:creator>adarsh04</dc:creator>
      <pubDate>Sun, 14 Jan 2024 01:20:04 +0000</pubDate>
      <link>https://forem.com/adarsh04/how-to-configure-modules-in-a-nestjs-project-3m32</link>
      <guid>https://forem.com/adarsh04/how-to-configure-modules-in-a-nestjs-project-3m32</guid>
      <description>&lt;p&gt;NestJS has a defined structure on how to configure your modules. Whenever you misconfigure this step, then you tend to get a frustrating error like the one below:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--s8PA8qrP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jncn687mao0ybvzf25bp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--s8PA8qrP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jncn687mao0ybvzf25bp.png" alt="NestJS error" width="800" height="174"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In this article, I will run you through how I configured modules for my pet project to give you an insight into how everything works and help you overcome errors such as the above.&lt;/p&gt;

&lt;p&gt;The gist of my project is that users can sign up for the app and view recipes: a database stores recipes and users.&lt;/p&gt;

&lt;p&gt;Starting with I have defined an app.module.ts below:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;Module&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
 &lt;span class="na"&gt;imports&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
   &lt;span class="nx"&gt;AuthModule&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
   &lt;span class="nx"&gt;UsersModule&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
   &lt;span class="nx"&gt;MongooseModule&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;forRoot&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;MONGODB_STORE_URI&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;mongodb://localhost/Meal&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
   &lt;span class="nx"&gt;RecipesModule&lt;/span&gt;
 &lt;span class="p"&gt;],&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;My app.module.js is the root module that Nest.js leverages to build the internal structure of the application, the modules, and the providers stemming from the modules and the relationships between them. I have defined them in the imports list because this is where we grab the providers from the modules needed in this module to build the application's internal structure. The modules include the ones I have defined: AuthModule, UsersModule, RecipesModule, and the 3rd-party module MongooseModule, which we use to establish a connection to the database.&lt;/p&gt;

&lt;p&gt;Now, let's move on to one of the modules in the imports list, the recipe Module, to understand how to configure an individual module.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;Module&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
 &lt;span class="na"&gt;imports&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;MongooseModule&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;forFeature&lt;/span&gt;&lt;span class="p"&gt;([{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Recipe&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;schema&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;RecipeSchema&lt;/span&gt; &lt;span class="p"&gt;}])],&lt;/span&gt;
 &lt;span class="na"&gt;controllers&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;RecipeController&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
 &lt;span class="na"&gt;providers&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;RecipeService&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Recipe&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The imports, by definition, are the providers stemming from the modules we use in this module. We have a MongooseModule.forFeature here to register the Recipe Model.&lt;/p&gt;

&lt;p&gt;We have a key for controllers. It, by definition, is for just the controllers used in this module.&lt;/p&gt;

&lt;p&gt;Next, the providers: I have defined RecipeService and Recipe here. The reason is that providers, by definition, are those we want to share, at least across this module. I inject the recipe model into the Recipe service. And the Recipe Service is injected into my controller. Hence, they need to be part of the providers.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;Injectable&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;RecipeService&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
   &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(@&lt;/span&gt;&lt;span class="nd"&gt;InjectModel&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;Recipe&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="kr"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;recipeModel&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Model&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Recipe&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
   &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;Controller&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/api/v1&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;RecipeController&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
   &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kr"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;readonly&lt;/span&gt; &lt;span class="nx"&gt;recipeService&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;RecipeService&lt;/span&gt;
   &lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, let's move on to the Users module.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;Module&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
 &lt;span class="na"&gt;imports&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;MongooseModule&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;forFeature&lt;/span&gt;&lt;span class="p"&gt;([{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;User&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;schema&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;UserSchema&lt;/span&gt; &lt;span class="p"&gt;}])],&lt;/span&gt;
 &lt;span class="na"&gt;providers&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;UsersService&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;User&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
 &lt;span class="na"&gt;exports&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;UsersService&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We have already discussed the reason for providers; they need to be used by just this module, UsersService and User. &lt;br&gt;
Interestingly, now we have a key for exports, which has UserService as an item in its list. The exports are the subset of the providers that should be available in other modules that import this module.&lt;br&gt;
Let's review another module, AuthModule, to elaborate on why we have exports listed this way.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt; &lt;span class="nx"&gt;imports&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
   &lt;span class="nx"&gt;UsersModule&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
   &lt;span class="nx"&gt;JwtModule&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;register&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
     &lt;span class="na"&gt;global&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
     &lt;span class="na"&gt;secret&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;env&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;JWT_SECRET&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="nx"&gt;jwtConstants&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;secret&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
     &lt;span class="na"&gt;signOptions&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;expiresIn&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;60s&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
   &lt;span class="p"&gt;}),&lt;/span&gt;
 &lt;span class="p"&gt;],&lt;/span&gt;
 &lt;span class="nx"&gt;providers&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;AuthService&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
 &lt;span class="nx"&gt;controllers&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;AuthController&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If we look at the imports list, we have an item for the UsersModule. Further, going deeper into the AuthService:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;Injectable&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;AuthService&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
 &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
   &lt;span class="kr"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;usersService&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;UsersService&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
   &lt;span class="kr"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;jwtService&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;JwtService&lt;/span&gt;
 &lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We are injecting the usersService into the constructor.&lt;/p&gt;

&lt;p&gt;I hope this article will help you configure your modules for your own NestJS projects; feel free to leave any comments in the form of feedback.&lt;/p&gt;

&lt;p&gt;References&lt;br&gt;
1: &lt;a href="https://docs.nestjs.com/modules"&gt;https://docs.nestjs.com/modules&lt;/a&gt;&lt;/p&gt;

</description>
      <category>nestjs</category>
      <category>backend</category>
      <category>node</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Javascript callbacks</title>
      <dc:creator>adarsh04</dc:creator>
      <pubDate>Thu, 14 Dec 2023 03:49:47 +0000</pubDate>
      <link>https://forem.com/adarsh04/javascript-callbacks-1a93</link>
      <guid>https://forem.com/adarsh04/javascript-callbacks-1a93</guid>
      <description>&lt;p&gt;This post intends to figure out how to use Javascript callbacks by understanding how they are used in various Javascript libraries.&lt;/p&gt;

&lt;p&gt;Let’s start with the simple &lt;em&gt;setTimeout&lt;/em&gt; function. If we consider the code below&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; const startTimer = (printAction) =&amp;gt; {
    setTimeout(printAction, 3);
 };

 const printAction = () =&amp;gt; {
    console.log('print Action');
 }

startTimer(printAction);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We are passing another function (&lt;em&gt;printAction&lt;/em&gt;) into &lt;em&gt;setTimeout&lt;/em&gt;. &lt;em&gt;setTimeout&lt;/em&gt; will then call this function once the timer has finished. The &lt;em&gt;printAction&lt;/em&gt; function that is called is a callback. &lt;/p&gt;

&lt;p&gt;Since the term callback is used, let’s consider this an analogy to a phone call. We make a phone call to setTimeout and inform it of the callback details, i.e. printAction. setTimeout hangs up the phone, waits till the timer is done and then calls us back with &lt;em&gt;printAction&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Let’s consider another use of callbacks in the example below with the &lt;em&gt;readFile&lt;/em&gt; function in the node.js file system to realise a significant advantage of callbacks.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { readFile } from 'node:fs';

readFile('/etc/passwd', (err, data) =&amp;gt; {
  if (err) throw err;
  console.log(data);
});

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;em&gt;readFile&lt;/em&gt; function takes in the file it needs to read and a callback. The callback is an arrow function with &lt;em&gt;err&lt;/em&gt; and &lt;em&gt;data&lt;/em&gt; as params. Once &lt;em&gt;readFile&lt;/em&gt; is done, it calls the arrow function (callback). We then throw an error if err is present or log the data.&lt;/p&gt;

&lt;p&gt;The advantage is that the file is read asynchronously, which is essential in the Javascript world. The main program can continue to execute and respond to other events, whilst the &lt;em&gt;readFile&lt;/em&gt; will execute asynchronously and inform us about the results via a callback.&lt;/p&gt;

&lt;p&gt;Feel free to suggest anything in the comments section to improve someone’s understanding of callbacks.&lt;/p&gt;

&lt;h2&gt;
  
  
  References:
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/setTimeout"&gt;https://developer.mozilla.org/en-US/docs/Web/API/setTimeout&lt;/a&gt;
2.&lt;a href="https://nodejs.org/api/fs.html#fsreadfilepath-options-callback"&gt;https://nodejs.org/api/fs.html#fsreadfilepath-options-callback&lt;/a&gt;
&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>node</category>
      <category>webdev</category>
    </item>
    <item>
      <title>How to use Async/Await in place of Promises</title>
      <dc:creator>adarsh04</dc:creator>
      <pubDate>Fri, 08 Dec 2023 05:55:48 +0000</pubDate>
      <link>https://forem.com/adarsh04/how-to-use-asyncawait-in-place-of-promises-2jd6</link>
      <guid>https://forem.com/adarsh04/how-to-use-asyncawait-in-place-of-promises-2jd6</guid>
      <description>&lt;p&gt;In this post, I will teach you how to async and await in place of promises. It took me a while to grasp the concepts of async/ await, and I hope you can catch the idea in a few short minutes by reading my article :D&lt;/p&gt;

&lt;p&gt;Promises are a way to handle asynchronous operations in the Javascript world. Whenever a long-running task is being run, the method to await the results and still carry out the other functions is to use Promises.&lt;/p&gt;

&lt;p&gt;Let us consider a system with a long-running task (returning data from a database), and we need to print out the results to the screen.&lt;/p&gt;

&lt;p&gt;The code below leverages Promises to achieve this.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;function longRunningTask() {

  return new Promise((resolve, reject) =&amp;gt; {
    const data = db.getAllData();
    if (data) {
      resolve(data);
    }
    reject('Error')
  });
}

longRunningTask()
  .then((data) =&amp;gt; console.log(data))
  .catch((e) =&amp;gt; console.log(e));
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Conceptually, I shall use the diagram below to map out different parts of the code here.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--_wEvHMyJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqashtsxeci6887oskpl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--_wEvHMyJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lqashtsxeci6887oskpl.png" alt="Promises" width="800" height="386"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The long-running task will return a promise whose result is still pending. Once it is resolved, it will output the results.&lt;/p&gt;

&lt;p&gt;Now, let’s leverage async/await to do the above operation.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;async function longRunningTask() {
  try {
    return await db.getAllData();
  } catch(e) {
    console.log(e);
  }
}

async function currentTask() {
  try {
    const data = await longRunningTask();
    console.log(data)
  } catch(e) {
    console.log(e);
  }
}

currentTask();
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Let's depict what’s going on above with a diagram.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--pg_qo2k7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nzon9gqnltx7ujgzz9f.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--pg_qo2k7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nzon9gqnltx7ujgzz9f.png" alt="Async_Await" width="800" height="313"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As you can see, I have removed the need to return a Promise (with &lt;em&gt;resolve&lt;/em&gt; and &lt;em&gt;reject&lt;/em&gt;) in the long-running task. Instead, I marked the long-running task as &lt;em&gt;async&lt;/em&gt; and then marked the data returned from the DB with an &lt;em&gt;await&lt;/em&gt; keyword.  &lt;/p&gt;

&lt;p&gt;Similarly, I marked the current task as &lt;em&gt;async&lt;/em&gt; and the results returned from the long-running task with an &lt;em&gt;await&lt;/em&gt;, rather than calling the Promise &lt;em&gt;then&lt;/em&gt; method.&lt;/p&gt;

&lt;p&gt;The significant advantage of using &lt;em&gt;async&lt;/em&gt; + &lt;em&gt;await&lt;/em&gt; is that the code is much easier to follow for someone who isn’t an expert on Promises. It tells us what is an &lt;em&gt;async&lt;/em&gt; operation and what data we are waiting for. I’ve also found it much faster to code with &lt;em&gt;async&lt;/em&gt; + &lt;em&gt;await&lt;/em&gt; due to its simpler syntax.&lt;/p&gt;

&lt;p&gt;Feel free to leave any comments in the form of feedback.&lt;/p&gt;

</description>
      <category>javascript</category>
    </item>
  </channel>
</rss>
