<?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>DEV Community: Bishal Singh</title>
    <description>The latest articles on DEV Community by Bishal Singh (@bishal_singh_51754b00bee0).</description>
    <link>https://dev.to/bishal_singh_51754b00bee0</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%2F3948903%2F808eb165-a526-4f76-9fba-73544c2f2fdb.png</url>
      <title>DEV Community: Bishal Singh</title>
      <link>https://dev.to/bishal_singh_51754b00bee0</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/bishal_singh_51754b00bee0"/>
    <language>en</language>
    <item>
      <title>async/await Finally Made Sense When I Stopped Treating It as Something New</title>
      <dc:creator>Bishal Singh</dc:creator>
      <pubDate>Tue, 26 May 2026 07:36:37 +0000</pubDate>
      <link>https://dev.to/bishal_singh_51754b00bee0/asyncawait-finally-made-sense-when-i-stopped-treating-it-as-something-new-gpj</link>
      <guid>https://dev.to/bishal_singh_51754b00bee0/asyncawait-finally-made-sense-when-i-stopped-treating-it-as-something-new-gpj</guid>
      <description>&lt;p&gt;&lt;em&gt;It is not a replacement for promises. It is just promises wearing a cleaner outfit. Here is how that clicked for me.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa8700fnfoa6r869jtdrx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa8700fnfoa6r869jtdrx.png" alt=" " width="736" height="613"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you have already understood promises — what they are, why they exist, and how errors travel through a chain — then async/await is genuinely one step away. Not a big step. One small step.&lt;/p&gt;

&lt;p&gt;The problem is most explanations treat it like an entirely new concept. It is not. Once I understood that, everything fell into place.&lt;/p&gt;

&lt;p&gt;What promises already solved&lt;br&gt;
Before getting into async/await, it helps to remember what promises fixed. Callbacks nested badly and errors stayed isolated — each function had no idea when something else in the chain failed. Promises fixed both of those things.&lt;/p&gt;

&lt;p&gt;But promises still had their own friction. Every step needed a .then. Reading a chain of five operations still required some mental effort to follow. It worked, but it did not feel natural.&lt;/p&gt;

&lt;p&gt;async/await did not come to fix a broken system. It came to make an already good system easier to read.&lt;/p&gt;

&lt;p&gt;Two keywords. One job each.&lt;br&gt;
async does one thing — it marks a function as one that contains waiting inside it. And it makes that function always return a promise, even if you return a plain value.&lt;/p&gt;

&lt;p&gt;await does one thing — it pauses that line, waits for the promise to resolve, and hands you the actual value directly. Then moves to the next line.&lt;/p&gt;

&lt;p&gt;That is the entire feature. Two keywords, two jobs.&lt;/p&gt;

&lt;p&gt;The moment it clicks&lt;br&gt;
Look at these two blocks of code. They do the exact same thing.&lt;/p&gt;

&lt;p&gt;promises&lt;br&gt;
fetchUser()&lt;br&gt;
  .then(user =&amp;gt; fetchPosts(user))&lt;br&gt;
  .then(posts =&amp;gt; fetchComments(posts))&lt;br&gt;
  .catch(err =&amp;gt; handleError(err))&lt;br&gt;
async/await&lt;br&gt;
async function getData() {&lt;br&gt;
  try {&lt;br&gt;
    const user = await fetchUser()&lt;br&gt;
    const posts = await fetchPosts(user)&lt;br&gt;
    const comments = await fetchComments(posts)&lt;br&gt;
  } catch(err) {&lt;br&gt;
    handleError(err)&lt;br&gt;
  }&lt;br&gt;
}&lt;br&gt;
Same logic. Same behavior. Same error handling. The second one just reads like normal top to bottom code. No chaining, no callbacks, no mental gymnastics.&lt;/p&gt;

&lt;p&gt;JavaScript is converting your async/await into promises behind the scenes anyway. You are not writing something different. You are writing something cleaner.&lt;/p&gt;

&lt;p&gt;A question I had about async functions&lt;br&gt;
When I first saw this:&lt;/p&gt;

&lt;p&gt;example&lt;br&gt;
async function greet() {&lt;br&gt;
  return "hello"&lt;br&gt;
}&lt;/p&gt;

&lt;p&gt;greet().then(val =&amp;gt; console.log(val)) // "hello"&lt;br&gt;
My first question was — does console.log actually print "hello" here? Yes it does. The async keyword secretly wraps your returned value in a resolved promise. The .then just unwraps it and gives you the value back.&lt;/p&gt;

&lt;p&gt;In real code you would never write it that way. You would just use await inside another async function to get the value cleanly. But that example showed me something important — async functions always return a promise, even when it does not look like they do.&lt;/p&gt;

&lt;p&gt;Error handling is just try/catch&lt;br&gt;
With promises you used .catch at the end of a chain. With async/await you use the same try/catch you already know from regular JavaScript.&lt;/p&gt;

&lt;p&gt;error handling&lt;br&gt;
async function getData() {&lt;br&gt;
  try {&lt;br&gt;
    const user = await fetchUser()&lt;br&gt;
    const posts = await fetchPosts(user)&lt;br&gt;
  } catch(err) {&lt;br&gt;
    console.log(err)  // catches anything that fails&lt;br&gt;
  }&lt;br&gt;
}&lt;br&gt;
Same behavior as .catch on a promise chain. If anything inside the try block fails, the error travels straight to catch. Nothing isolated, nothing silent.&lt;/p&gt;

&lt;p&gt;The one performance mistake worth knowing early&lt;br&gt;
Because await pauses execution, it is easy to accidentally write slow code without realizing it.&lt;/p&gt;

&lt;p&gt;slow — runs one by one&lt;br&gt;
const user = await fetchUser()&lt;br&gt;
const posts = await fetchPosts()&lt;br&gt;
const photos = await fetchPhotos()&lt;br&gt;
If these three do not depend on each other, you are making them wait in a queue for no reason. The fix is Promise.all — it runs all of them at the same time and waits for all of them together.&lt;/p&gt;

&lt;p&gt;fast — runs all at once&lt;br&gt;
const [user, posts, photos] = await Promise.all([&lt;br&gt;
  fetchUser(),&lt;br&gt;
  fetchPosts(),&lt;br&gt;
  fetchPhotos()&lt;br&gt;
])&lt;br&gt;
Same result. Much faster. This is the one thing worth keeping in the back of your mind as you start building real projects.&lt;/p&gt;

&lt;p&gt;The one line summary&lt;br&gt;
async/await is just promises, written so it reads like normal top to bottom code. Nothing new underneath. No new mental model required. If promises made sense, this is just the cleaner version of the same thing.&lt;/p&gt;

&lt;p&gt;The syntax will become muscle memory as you build things. What matters now is knowing you are not learning something entirely new — you are just learning a better way to write something you already understand.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>programming</category>
      <category>webdev</category>
      <category>software</category>
    </item>
    <item>
      <title>I Finally Understood Callbacks and Promises. Here is What Actually Clicked.</title>
      <dc:creator>Bishal Singh</dc:creator>
      <pubDate>Sun, 24 May 2026 10:24:41 +0000</pubDate>
      <link>https://dev.to/bishal_singh_51754b00bee0/i-finally-understood-callbacks-and-promises-here-is-what-actually-clicked-4m86</link>
      <guid>https://dev.to/bishal_singh_51754b00bee0/i-finally-understood-callbacks-and-promises-here-is-what-actually-clicked-4m86</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffqzuo70vseg7n278f18o.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffqzuo70vseg7n278f18o.jpg" alt=" " width="480" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I had read about callbacks and promises multiple times. I understood the words. But I kept feeling like I was missing something underneath — like everyone else had a mental model I did not have yet.&lt;/p&gt;

&lt;p&gt;Then two things clicked, and everything made sense. This post is about those two things.&lt;/p&gt;

&lt;p&gt;First: both are async. That is not the difference.&lt;br&gt;
When I first compared callbacks and promises, I thought the problem with callbacks was timing — that functions were somehow "not ready" when they needed to be. That was wrong.&lt;/p&gt;

&lt;p&gt;Both callbacks and promises handle timing just fine. That is literally what async code is for. The problem with callbacks has nothing to do with when things run. It is about what happens when things go wrong — and how readable your code stays as it grows.&lt;/p&gt;

&lt;p&gt;The waiter analogy that actually made sense&lt;br&gt;
Think about ordering food at a restaurant.&lt;/p&gt;

&lt;p&gt;With callbacks, you hand the waiter a note with instructions: "when the food is ready, bring it to table 4, then refill the water, then bring the bill." You have handed over control. The waiter runs your instructions. You are just waiting.&lt;/p&gt;

&lt;p&gt;With promises, the waiter gives you a buzzer and walks away. When it goes off, you decide what to do next. You are the one in control.&lt;/p&gt;

&lt;p&gt;Callbacks hand control away. Promises hand it back to you. That is the real difference.&lt;/p&gt;

&lt;p&gt;Problem one: nesting&lt;br&gt;
When you need multiple async operations in sequence, callbacks nest inside each other. Every new step lives inside the previous one.&lt;/p&gt;

&lt;p&gt;callback hell&lt;br&gt;
&lt;code&gt;fetchUser(function(user) {&lt;br&gt;
  fetchPosts(user, function(posts) {&lt;br&gt;
    fetchComments(posts, function(comments) {&lt;br&gt;
      // your actual logic is buried here&lt;br&gt;
    })&lt;br&gt;
  })&lt;br&gt;
})&lt;/code&gt; &lt;br&gt;
This is not just ugly. It is genuinely hard to debug. You cannot easily see the flow, and changing one step risks breaking the ones around it.&lt;/p&gt;

&lt;p&gt;Promises flatten this completely:&lt;/p&gt;

&lt;p&gt;promises&lt;br&gt;
fetchUser()&lt;br&gt;
  .then(user =&amp;gt; fetchPosts(user))&lt;br&gt;
  .then(posts =&amp;gt; fetchComments(posts))&lt;br&gt;
  .catch(err =&amp;gt; handleError(err))&lt;br&gt;
Same logic. Flat, readable, easy to follow from top to bottom.&lt;/p&gt;

&lt;p&gt;Problem two: functions do not know when others fail&lt;br&gt;
This was the one I almost missed — and it is arguably more important than the nesting issue.&lt;/p&gt;

&lt;p&gt;In a callback chain, each function is isolated. It only knows about itself. So if something breaks in the middle, the functions around it have no idea. The error does not travel. It just disappears silently unless you manually handle it at every single level.&lt;/p&gt;

&lt;p&gt;silent failure&lt;br&gt;
fetchUser(function(user) {&lt;br&gt;
  fetchPosts(user, function(posts) {  // fails here&lt;br&gt;
    fetchComments(posts, function() { // never runs&lt;br&gt;
      // nobody knows what went wrong&lt;br&gt;
    })&lt;br&gt;
  })&lt;br&gt;
})&lt;br&gt;
With promises, a failure anywhere in the chain automatically travels down to the nearest .catch. You do not have to do anything extra. One handler covers everything.&lt;/p&gt;

&lt;p&gt;error travels automatically&lt;br&gt;
fetchUser()&lt;br&gt;
  .then(user =&amp;gt; fetchPosts(user))   // fails here&lt;br&gt;
  .then(posts =&amp;gt; fetchComments())   // skipped&lt;br&gt;
  .catch(err =&amp;gt; handleError(err))   // caught here, automatically&lt;br&gt;
With callbacks, one forgotten error handler means a silent failure. With promises, errors bubble down on their own.&lt;/p&gt;

&lt;p&gt;So to summarize what actually changed&lt;br&gt;
Promises were not invented to replace callbacks for style reasons. They were invented because two specific things were genuinely painful:&lt;/p&gt;

&lt;p&gt;One — deeply nested callbacks made code hard to read and maintain as projects grew. Two — errors in a callback chain were isolated, invisible, and easy to miss entirely.&lt;/p&gt;

&lt;p&gt;Promises fix both. The chain stays flat, and failures propagate automatically.&lt;/p&gt;

&lt;p&gt;The syntax will become second nature as you build things. What matters first is understanding why promises exist at all — because once that is clear, the rest starts making sense on its own.&lt;/p&gt;

&lt;p&gt;Written by someone who just figured this out, for anyone else who is still figuring it out.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>development</category>
      <category>webdev</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
