Home/Blog/Async JavaScript Samjho: Promises, Async/Await Hindi Tutorial

Tutorial⭐ Featured Article

Async JavaScript Samjho: Promises, Async/Await Hindi Tutorial

Async JavaScript ko samjhna modern web development ke liye bahut zaroori hai. Is comprehensive tutorial mein hum Promises, Async/Await aur Fetch API seekhenge real-world Zomato, Instagram aur Banking examples ke saath!

Ashwani

Author

📅Jan 17, 2026

⏱️20 min read

#javascript#async#promises#tutorial#async-await#fetch-api#hindi#hinglish#web-development#api

Async JavaScript Samjho: Promises, Async/Await - Complete Hindi Tutorial

Hanji developers! Kaise ho aap sab? Aaj hum baat karenge JavaScript ke sabse important aur thoda tricky topic ki - Asynchronous Programming.

Dekho bhai, agar tumne kabhi API call ki hai, setTimeout use kiya hai, ya server se data fetch kiya hai - toh tum already async code likh chuke ho. But kya sach mein samajhte ho ye kaise kaam karta hai under the hood?

Aaj hum isko ekdum practical examples ke saath samjhenge - Zomato orders, Instagram feeds, aur Bank transactions. Toh chalo shuru karte hain!

---

Synchronous vs Asynchronous - Basics
Callback Functions - Purana Approach
Promises - The Game Changer
Async/Await - Modern Syntax
Fetch API - Real World Usage
Multiple Promises Handle Karna
Common Mistakes aur Solutions
Best Practices aur Pro Tips

---

Synchronous vs Asynchronous - Basics {#synchronous-vs-asynchronous}

Pehle samjho ki synchronous aur asynchronous mein farak kya hai. Isko samjhne ke liye Zomato delivery ka example lete hain.

Synchronous Code (Blocking) - Ek Time Pe Ek Kaam

Imagine karo ek aisa Zomato hai jahan sirf EK delivery boy hai:

javascript

console.log('Order 1: Sharma ji ka pizza dispatch hua');
console.log('Order 1: Sharma ji ko deliver ho gaya (20 min lage)');

console.log('Order 2: Verma ji ka burger dispatch hua');
console.log('Order 2: Verma ji ko deliver ho gaya (15 min lage)');

console.log('Order 3: Gupta ji ki biryani dispatch hua');
console.log('Order 3: Gupta ji ko deliver ho gaya (25 min lage)');

// Total time: 20 + 15 + 25 = 60 minutes!

Problem: Verma ji ko 20 minute wait karna pada sirf delivery shuru hone ke liye! Ye hai synchronous - blocking code.

Asynchronous Code (Non-Blocking) - Parallel Kaam

Ab real Zomato socho jahan multiple delivery boys hain:

javascript

console.log('Order 1: Sharma ji ka pizza dispatch hua');
console.log('Order 2: Verma ji ka burger dispatch hua');
console.log('Order 3: Gupta ji ki biryani dispatch hua');

setTimeout(() => {
  console.log('Order 2: Verma ji ko deliver! (15 min)');
}, 15000);

setTimeout(() => {
  console.log('Order 1: Sharma ji ko deliver! (20 min)');
}, 20000);

setTimeout(() => {
  console.log('Order 3: Gupta ji ko deliver! (25 min)');
}, 25000);

// Total time: 25 minutes (sabse lamba order)
// Saare orders parallel mein process hue!

Dekha? Teeno orders ek saath dispatch hue, aur jo pehle complete hua wo pehle deliver hua. Ye hai asynchronous programming ki power!

Real Life Mein Kahan Use Hota Hai?

•API Calls - Server se data fetch karna
•Database Operations - Data read/write karna
•File Operations - Files padhna/likhna
•Timers - setTimeout, setInterval
•User Events - Click, scroll, input events

---

Callback Functions - Purana Approach {#callback-functions}

ES6 se pehle, callbacks hi ek tarika tha async operations handle karne ka.

Callback Kya Hai?

Callback ek function hai jo doosre function ko as argument pass hota hai, aur baad mein execute hota hai.

Instagram Story Upload Example:

javascript

function uploadStory(storyData, onSuccess, onError) {
  console.log('Story upload ho rahi hai...');

  // Simulate network delay
  setTimeout(() => {
    const uploadSuccess = Math.random() > 0.2; // 80% success rate

    if (uploadSuccess) {
      onSuccess({
        storyId: 'STR_' + Date.now(),
        views: 0,
        status: 'Published'
      });
    } else {
      onError('Network error! Story upload fail ho gayi.');
    }
  }, 3000);
}

// Using callbacks
uploadStory(
  { image: 'beach.jpg', caption: 'Goa vibes!' },
  function(result) {
    console.log('Story live hai!', result.storyId);
  },
  function(error) {
    console.log('Error:', error);
  }
);

console.log('Yahan code turant chala - upload background mein ho raha hai');

Callback Hell - The Pyramid of Doom

Problem tab aati hai jab multiple async operations ek ke baad ek karni ho. Instagram post with location, tags, and share:

javascript

uploadPhoto(photo, function(uploadedPhoto) {
  console.log('Photo uploaded');

  addLocation(uploadedPhoto, location, function(photoWithLocation) {
    console.log('Location added');

    addTags(photoWithLocation, tags, function(taggedPhoto) {
      console.log('Tags added');

      shareToFeed(taggedPhoto, function(post) {
        console.log('Shared to feed');

        notifyFollowers(post, function(notifications) {
          console.log('Followers notified');
          // Aur bhi deep ja sakta hai...
        });
      });
    });
  });
});

Isko kehte hain Callback Hell. Problems:

•Code padhna mushkil
•Error handling nightmare
•Debugging almost impossible
•Maintain karna bahut hard

Isliye aaye Promises!

---

Promises - The Game Changer {#promises}

ES6 (2015) mein Promises introduce hue aur async programming ko revolutionize kar diya.

Promise Kya Hai? - Swiggy Order Analogy

Jab tum Swiggy pe order karte ho, tumhe ek Order ID milta hai. Ye Order ID ek Promise hai:

•Pending - Order prepare ho raha hai
•Fulfilled - Order deliver ho gaya (Success!)
•Rejected - Order cancel ho gaya (Failure!)

Promise Syntax Samjho

javascript

function placeOrder(item) {
  return new Promise((resolve, reject) => {
    console.log(`Order placed: ${item}`);

    // Simulate preparation time
    setTimeout(() => {
      const isAvailable = Math.random() > 0.1; // 90% available

      if (isAvailable) {
        resolve({
          orderId: 'ORD_' + Date.now(),
          item: item,
          status: 'Delivered',
          deliveryTime: '30 mins'
        });
      } else {
        reject(`Sorry! ${item} out of stock hai.`);
      }
    }, 2000);
  });
}

Promise Use Karna - .then(), .catch(), .finally()

javascript

placeOrder('Paneer Butter Masala')
  .then((order) => {
    // Success case
    console.log('Order delivered!');
    console.log(`Order ID: ${order.orderId}`);
    console.log(`Time: ${order.deliveryTime}`);
  })
  .catch((error) => {
    // Failure case
    console.log('Order failed:', error);
  })
  .finally(() => {
    // Hamesha chalega - success ya failure
    console.log('Thanks for using our service!');
  });

Promise Chaining - Clean Sequential Operations

Ab wahi Instagram example Promise se:

javascript

uploadPhoto(photo)
  .then(uploadedPhoto => {
    console.log('Photo uploaded');
    return addLocation(uploadedPhoto, location);
  })
  .then(photoWithLocation => {
    console.log('Location added');
    return addTags(photoWithLocation, tags);
  })
  .then(taggedPhoto => {
    console.log('Tags added');
    return shareToFeed(taggedPhoto);
  })
  .then(post => {
    console.log('Post live!', post.postId);
  })
  .catch(error => {
    // Kisi bhi step mein error aaye - yahan handle hoga
    console.error('Kuch gadbad ho gayi:', error);
  });

Kitna clean hai callback hell se!

Custom Promise Banana - Bank Transfer Example

javascript

function bankTransfer(fromAccount, toAccount, amount) {
  return new Promise((resolve, reject) => {
    console.log(`Transferring Rs.${amount}...`);

    // Simulate processing
    setTimeout(() => {
      // Validations
      if (amount <= 0) {
        reject('Invalid amount!');
        return;
      }

      if (amount > 100000) {
        reject('Daily limit exceeded! Max Rs.1,00,000');
        return;
      }

      // Success
      resolve({
        transactionId: 'TXN' + Date.now(),
        from: fromAccount,
        to: toAccount,
        amount: amount,
        status: 'Success',
        timestamp: new Date().toISOString()
      });
    }, 2000);
  });
}

// Usage
bankTransfer('ACC001', 'ACC002', 5000)
  .then(txn => {
    console.log('Transfer successful!');
    console.log(`Transaction ID: ${txn.transactionId}`);
  })
  .catch(error => {
    console.log('Transfer failed:', error);
  });

---

Async/Await - Modern Syntax {#async-await}

ES2017 mein async/await aaya - ye Promises ke upar syntactic sugar hai. Code synchronous jaisa dikhta hai but asynchronous kaam karta hai.

Basic Syntax

javascript

// async function declaration
async function myFunction() {
  const result = await somePromise();
  return result;
}

// Arrow function with async
const myFunction = async () => {
  const result = await somePromise();
  return result;
};

E-Commerce Checkout Flow Example

javascript

async function completeCheckout(cart, paymentDetails) {
  try {
    // Step 1: Validate cart
    console.log('Validating cart...');
    const validatedCart = await validateCart(cart);

    // Step 2: Calculate total
    console.log('Calculating total...');
    const total = await calculateTotal(validatedCart);
    console.log(`Total: Rs.${total}`);

    // Step 3: Process payment
    console.log('Processing payment...');
    const payment = await processPayment(paymentDetails, total);

    // Step 4: Create order
    console.log('Creating order...');
    const order = await createOrder(validatedCart, payment);

    // Step 5: Send confirmation
    console.log('Sending confirmation...');
    await sendConfirmationEmail(order);

    console.log('Order placed successfully!');
    return {
      success: true,
      orderId: order.id,
      estimatedDelivery: order.deliveryDate
    };

  } catch (error) {
    console.error('Checkout failed:', error.message);
    return {
      success: false,
      error: error.message
    };
  }
}

// Usage
const result = await completeCheckout(myCart, myPayment);
if (result.success) {
  console.log(`Order ID: ${result.orderId}`);
}

Key Points Yaad Rakho:

| Feature | Description |

|---------|-------------|

| async | Function ko async banata hai, hamesha Promise return karta hai |

| await | Promise resolve hone tak wait karta hai |

| try/catch | Error handling ke liye use karo |

| Return value | Automatically Promise mein wrap ho jata hai |

---

Fetch API - Real World Usage {#fetch-api}

Fetch API modern way hai HTTP requests karne ka. XMLHttpRequest ka replacement hai.

Basic GET Request

javascript

async function getWeather(city) {
  try {
    const response = await fetch(
      `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY&units=metric`
    );

    // Check if response is OK (status 200-299)
    if (!response.ok) {
      throw new Error(`City not found! Status: ${response.status}`);
    }

    const data = await response.json();

    return {
      city: data.name,
      temp: Math.round(data.main.temp),
      weather: data.weather[0].description,
      humidity: data.main.humidity
    };

  } catch (error) {
    console.error('Weather fetch failed:', error.message);
    throw error;
  }
}

// Usage
const weather = await getWeather('Mumbai');
console.log(`${weather.city}: ${weather.temp}°C, ${weather.weather}`);

POST Request - User Registration

javascript

async function registerUser(userData) {
  try {
    const response = await fetch('https://api.example.com/users/register', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      body: JSON.stringify(userData)
    });

    const data = await response.json();

    if (!response.ok) {
      throw new Error(data.message || 'Registration failed!');
    }

    return {
      success: true,
      userId: data.userId,
      message: 'Registration successful!'
    };

  } catch (error) {
    return {
      success: false,
      error: error.message
    };
  }
}

// Usage
const result = await registerUser({
  name: 'Rahul Sharma',
  email: 'rahul@example.com',
  password: 'securePassword123'
});

if (result.success) {
  console.log('Welcome!', result.userId);
} else {
  console.log('Error:', result.error);
}

PUT Request - Update Profile

javascript

async function updateProfile(userId, updates) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${getAuthToken()}`
      },
      body: JSON.stringify(updates)
    });

    if (!response.ok) {
      throw new Error('Update failed!');
    }

    return await response.json();

  } catch (error) {
    console.error('Profile update failed:', error);
    throw error;
  }
}

DELETE Request

javascript

async function deletePost(postId) {
  try {
    const response = await fetch(`https://api.example.com/posts/${postId}`, {
      method: 'DELETE',
      headers: {
        'Authorization': `Bearer ${getAuthToken()}`
      }
    });

    if (!response.ok) {
      throw new Error('Delete failed!');
    }

    return { success: true, message: 'Post deleted!' };

  } catch (error) {
    return { success: false, error: error.message };
  }
}

---

Multiple Promises Handle Karna {#multiple-promises}

Kabhi kabhi multiple async operations ek saath karni hoti hain. JavaScript mein iske liye special methods hain.

Promise.all() - Sab Saath, Sab Successful

Jab tumhe saari promises successful chahiye:

javascript

async function loadDashboard(userId) {
  try {
    // Teeno API calls PARALLEL mein hongi
    const [profile, posts, notifications] = await Promise.all([
      fetch(`/api/users/${userId}`).then(r => r.json()),
      fetch(`/api/users/${userId}/posts`).then(r => r.json()),
      fetch(`/api/users/${userId}/notifications`).then(r => r.json())
    ]);

    return {
      user: profile,
      posts: posts,
      notifications: notifications
    };

  } catch (error) {
    // Agar EK bhi fail hua, yahan aayega
    console.error('Dashboard load failed:', error);
    throw error;
  }
}

Performance Benefit:

•Sequential: 2s + 2s + 2s = 6 seconds
•Parallel (Promise.all): 2 seconds (sabse slow wala time)

Promise.allSettled() - Sab Ka Result Chahiye

Jab tumhe har promise ka result chahiye, chahe success ho ya fail:

javascript

async function fetchMultipleAPIs() {
  const results = await Promise.allSettled([
    fetch('https://api1.com/data'),
    fetch('https://api2.com/data'),  // Ye fail bhi ho sakta hai
    fetch('https://api3.com/data')
  ]);

  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      console.log(`API ${index + 1}: Success`);
    } else {
      console.log(`API ${index + 1}: Failed - ${result.reason}`);
    }
  });

  // Sirf successful results filter karo
  const successfulData = results
    .filter(r => r.status === 'fulfilled')
    .map(r => r.value);

  return successfulData;
}

Promise.race() - Pehla Result Wins

Jab tumhe sirf pehla result chahiye:

javascript

// Timeout implementation using race
async function fetchWithTimeout(url, timeoutMs = 5000) {
  const fetchPromise = fetch(url);

  const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => {
      reject(new Error(`Request timeout after ${timeoutMs}ms`));
    }, timeoutMs);
  });

  // Jo pehle complete hoga, wo return hoga
  return Promise.race([fetchPromise, timeoutPromise]);
}

// Usage
try {
  const response = await fetchWithTimeout('https://api.example.com/data', 3000);
  const data = await response.json();
  console.log('Data received:', data);
} catch (error) {
  console.log('Error:', error.message);
}

Promise.any() - Pehla Success Wins

javascript

// Multiple CDN se image load karo - jo pehle mile
async function loadImageFromCDN(imagePath) {
  try {
    const response = await Promise.any([
      fetch(`https://cdn1.example.com/${imagePath}`),
      fetch(`https://cdn2.example.com/${imagePath}`),
      fetch(`https://cdn3.example.com/${imagePath}`)
    ]);

    return response.url; // Pehla successful CDN

  } catch (error) {
    // Sab fail hue tab yahan aayega
    throw new Error('Image load failed from all CDNs');
  }
}

Quick Comparison Table

| Method | Behavior | Use Case |

|--------|----------|----------|

| Promise.all() | Sab success chahiye, ek fail = sab fail | Dashboard load, parallel fetches |

| Promise.allSettled() | Sab ka result chahiye | Multiple APIs, partial success OK |

| Promise.race() | Pehla complete (success/fail) | Timeout implementation |

| Promise.any() | Pehla success | CDN fallback, redundancy |

---

Common Mistakes aur Solutions {#common-mistakes}

Mistake 1: await Bhool Jana

javascript

// WRONG - Promise object milega, data nahi
async function getData() {
  const data = fetch('/api/data');
  console.log(data); // Promise {<pending>}
}

// CORRECT
async function getData() {
  const response = await fetch('/api/data');
  const data = await response.json();
  console.log(data); // Actual data
}

Mistake 2: Error Handling Skip Karna

javascript

// WRONG - App crash ho sakta hai
async function getUser() {
  const response = await fetch('/api/user');
  return response.json();
}

// CORRECT
async function getUser() {
  try {
    const response = await fetch('/api/user');

    if (!response.ok) {
      throw new Error(`HTTP Error: ${response.status}`);
    }

    return await response.json();

  } catch (error) {
    console.error('Failed to fetch user:', error);
    return null;
  }
}

Mistake 3: Sequential Instead of Parallel

javascript

// SLOW - 6 seconds
async function loadData() {
  const users = await fetch('/api/users');      // 2s wait
  const posts = await fetch('/api/posts');      // 2s wait
  const comments = await fetch('/api/comments'); // 2s wait
}

// FAST - 2 seconds (parallel)
async function loadData() {
  const [users, posts, comments] = await Promise.all([
    fetch('/api/users'),
    fetch('/api/posts'),
    fetch('/api/comments')
  ]);
}

Mistake 4: forEach ke Andar await

javascript

// WRONG - await kaam nahi karega properly
async function processItems(items) {
  items.forEach(async (item) => {
    await processItem(item); // Ye parallel chalega, sequential nahi
  });
  console.log('Done'); // Ye pehle print hoga!
}

// CORRECT - for...of use karo
async function processItems(items) {
  for (const item of items) {
    await processItem(item); // Sequential processing
  }
  console.log('Done'); // Sab complete hone ke baad
}

// YA Promise.all for parallel
async function processItems(items) {
  await Promise.all(items.map(item => processItem(item)));
  console.log('Done');
}

Mistake 5: Unhandled Promise Rejection

javascript

// WRONG - Rejection handle nahi hua
fetchData(); // Agar fail hua toh silent error

// CORRECT
fetchData()
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// Ya async/await with try-catch
try {
  const data = await fetchData();
} catch (error) {
  console.error('Error:', error);
}

---

Best Practices aur Pro Tips {#best-practices}

1. Loading States Handle Karo

javascript

async function loadUserProfile(userId) {
  const loadingEl = document.getElementById('loading');
  const errorEl = document.getElementById('error');
  const contentEl = document.getElementById('content');

  // Show loading
  loadingEl.style.display = 'block';
  errorEl.style.display = 'none';
  contentEl.style.display = 'none';

  try {
    const user = await fetchUser(userId);

    // Show content
    contentEl.innerHTML = renderUserProfile(user);
    contentEl.style.display = 'block';

  } catch (error) {
    // Show error
    errorEl.textContent = 'Failed to load profile';
    errorEl.style.display = 'block';

  } finally {
    // Hide loading
    loadingEl.style.display = 'none';
  }
}

2. Retry Logic Implement Karo

javascript

async function fetchWithRetry(url, maxRetries = 3) {
  for (let attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      const response = await fetch(url);

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }

      return await response.json();

    } catch (error) {
      console.log(`Attempt ${attempt} failed: ${error.message}`);

      if (attempt === maxRetries) {
        throw new Error(`Failed after ${maxRetries} attempts`);
      }

      // Exponential backoff - wait before retry
      const waitTime = Math.pow(2, attempt) * 1000;
      await new Promise(r => setTimeout(r, waitTime));
    }
  }
}

3. AbortController Se Request Cancel Karo

javascript

function createCancellableFetch(url) {
  const controller = new AbortController();

  const fetchPromise = fetch(url, {
    signal: controller.signal
  });

  return {
    promise: fetchPromise,
    cancel: () => controller.abort()
  };
}

// Usage - Search input example
let currentRequest = null;

async function handleSearch(query) {
  // Cancel previous request
  if (currentRequest) {
    currentRequest.cancel();
  }

  currentRequest = createCancellableFetch(`/api/search?q=${query}`);

  try {
    const response = await currentRequest.promise;
    const results = await response.json();
    displayResults(results);

  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Request cancelled');
    } else {
      console.error('Search failed:', error);
    }
  }
}

4. Debounce Async Functions

javascript

function debounceAsync(fn, delay) {
  let timeoutId;

  return function(...args) {
    clearTimeout(timeoutId);

    return new Promise((resolve) => {
      timeoutId = setTimeout(async () => {
        const result = await fn.apply(this, args);
        resolve(result);
      }, delay);
    });
  };
}

// Usage
const debouncedSearch = debounceAsync(searchAPI, 300);

inputElement.addEventListener('input', async (e) => {
  const results = await debouncedSearch(e.target.value);
  displayResults(results);
});

5. Cache API Responses

javascript

const cache = new Map();

async function fetchWithCache(url, ttl = 60000) {
  // Check cache
  if (cache.has(url)) {
    const { data, timestamp } = cache.get(url);

    if (Date.now() - timestamp < ttl) {
      console.log('Returning cached data');
      return data;
    }
  }

  // Fetch fresh data
  const response = await fetch(url);
  const data = await response.json();

  // Store in cache
  cache.set(url, {
    data,
    timestamp: Date.now()
  });

  return data;
}

---

Quick Reference Cheatsheet

javascript

// ========== PROMISE BASICS ==========
const promise = new Promise((resolve, reject) => {
  // async operation
  if (success) resolve(value);
  else reject(error);
});

promise
  .then(result => { /* success */ })
  .catch(error => { /* failure */ })
  .finally(() => { /* cleanup */ });

// ========== ASYNC/AWAIT ==========
async function myFunction() {
  try {
    const result = await someAsyncOperation();
    return result;
  } catch (error) {
    console.error(error);
  }
}

// ========== FETCH API ==========
// GET
const response = await fetch(url);
const data = await response.json();

// POST
const response = await fetch(url, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data)
});

// ========== MULTIPLE PROMISES ==========
await Promise.all([p1, p2, p3]);        // All must succeed
await Promise.allSettled([p1, p2]);     // Get all results
await Promise.race([p1, p2]);           // First to complete
await Promise.any([p1, p2]);            // First to succeed

---

Practice Projects Banao

In concepts ko master karne ke liye ye projects try karo:

Weather Dashboard - OpenWeatherMap API
GitHub Profile Finder - GitHub REST API
Movie Search App - OMDB API
News Aggregator - News API
Crypto Price Tracker - CoinGecko API
Recipe Finder - Spoonacular API

Explore All Projects

---

Useful Resources

---

Conclusion

Dekho bhai, Async JavaScript initially thoda confusing lagta hai, but practice ke saath bahut easy ho jata hai. Yaad rakho:

Key Takeaways:

•Callbacks purane hain but foundation samajhna zaroori hai
•Promises ne callback hell solve kiya
•Async/Await ne code readable aur maintainable banaya
•Error handling kabhi skip mat karo
•Promise.all() use karo parallel operations ke liye
•Loading states user experience improve karte hain

Sabse important baat - Practice, practice, practice! Real APIs ke saath projects banao, mistakes karo, aur unse seekho.

Code karo, break karo, fix karo - repeat!

Happy Coding!

Found this helpful?

Share this article with your developer friends!

Tweet LinkedIn

🚀Build These Projects

Put what you learned into practice with these hands-on projects

Intermediate⏱️ 5–7 hours

Weather App

A comprehensive Weather App built with Vanilla JavaScript that displays real-time weather data, 5-day forecast, hourly forecast, and recent searches using OpenWeather API.

Start Building→

📚Continue Learning

Explore more tutorials and guides

Guide

⭐ Featured

50+ JavaScript Interview Questions & Answers (2026) — Beginner to Advanced

📅Feb 18, 2026

⏱️25 min read

50+ most asked JavaScript interview questions with clear, detailed answers. From beginner basics to advanced concepts like closures, event loop, prototypes, and async patterns — everything you need to crack your next JS interview.

#javascript#interview#interview-questions+8

Ashwani

Tutorial

⭐ Featured

How to Build a Weather App in JavaScript - Complete Fetch API Tutorial

📅Feb 18, 2026

⏱️18 min read

Build a real-time Weather App with JavaScript from scratch. Learn the Fetch API, async/await error handling, Geolocation API, and how to integrate OpenWeatherMap in this complete step-by-step tutorial.

#javascript#fetch-api#weather-app+6

Ashwani

Tutorial

DOM Manipulation JavaScript Hindi: Complete Guide with Real Examples

📅Jan 21, 2026

⏱️22 min read

DOM Manipulation JavaScript ka sabse important concept hai! Is guide mein seekho getElementById, querySelector, createElement, Events - sab kuch Hindi mein real examples ke saath.

#javascript#dom#dom-manipulation+7

Ashwani

←Back to All Articles

Async JavaScript Samjho: Promises, Async/Await - Complete Hindi Tutorial

Table of Contents

Synchronous vs Asynchronous - Basics {#synchronous-vs-asynchronous}

Synchronous Code (Blocking) - Ek Time Pe Ek Kaam

Asynchronous Code (Non-Blocking) - Parallel Kaam

Real Life Mein Kahan Use Hota Hai?

Callback Functions - Purana Approach {#callback-functions}

Callback Kya Hai?

Callback Hell - The Pyramid of Doom

Promises - The Game Changer {#promises}

Promise Kya Hai? - Swiggy Order Analogy

Promise Syntax Samjho

Promise Use Karna - .then(), .catch(), .finally()

Promise Chaining - Clean Sequential Operations

Custom Promise Banana - Bank Transfer Example

Async/Await - Modern Syntax {#async-await}

Basic Syntax

E-Commerce Checkout Flow Example

Key Points Yaad Rakho:

Fetch API - Real World Usage {#fetch-api}

Basic GET Request

POST Request - User Registration

PUT Request - Update Profile

DELETE Request

Multiple Promises Handle Karna {#multiple-promises}

Promise.all() - Sab Saath, Sab Successful

Promise.allSettled() - Sab Ka Result Chahiye

Promise.race() - Pehla Result Wins

Promise.any() - Pehla Success Wins

Quick Comparison Table

Common Mistakes aur Solutions {#common-mistakes}

Mistake 1: await Bhool Jana

Mistake 2: Error Handling Skip Karna

Mistake 3: Sequential Instead of Parallel

Mistake 4: forEach ke Andar await

Mistake 5: Unhandled Promise Rejection

Best Practices aur Pro Tips {#best-practices}

1. Loading States Handle Karo

2. Retry Logic Implement Karo

3. AbortController Se Request Cancel Karo

4. Debounce Async Functions

5. Cache API Responses

Quick Reference Cheatsheet

Practice Projects Banao

Useful Resources

Conclusion

Found this helpful?

🚀Build These Projects

Weather App

📚Continue Learning

50+ JavaScript Interview Questions & Answers (2026) — Beginner to Advanced

How to Build a Weather App in JavaScript - Complete Fetch API Tutorial

DOM Manipulation JavaScript Hindi: Complete Guide with Real Examples