जावास्क्रिप्ट एसिंक वेट बनाम प्रॉमिस फिर: वास्तविक उदाहरणों के साथ संपूर्ण गाइड

जावास्क्रिप्ट काasync/प्रतीक्षा औरवादा.फिर() दोनों अतुल्यकालिक संचालन को संभालते हैं – लेकिन उनके पास अलग-अलग ताकत, अलग-अलग पठनीयता प्रोफाइल और अलग-अलग त्रुटि-हैंडलिंग पैटर्न हैं। यह मार्गदर्शिका बताती है कि वास्तविक कोड उदाहरणों के साथ प्रत्येक का उपयोग कब करना है।

हम किस समस्या का समाधान कर रहे हैं?

जावास्क्रिप्ट सिंगल-थ्रेडेड है लेकिन I/O को एसिंक्रोनस रूप से संभालता है। एसिंक ऑपरेशंस के लिए “प्रतीक्षा” करने के तरीके के बिना, आपको कॉलबैक नरक मिलेगा – नेस्टेड फ़ंक्शन जिन्हें पढ़ना और बनाए रखना असंभव है। वादों ने उसे हल कर दिया। async/await इसे समकालिक बना दिया। दोनों को समझना जरूरी है.

Promise.then() सिंटेक्स

// Basic promise chain
fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(users => {
    console.log(users);
    return fetch(`/api/posts/${users[0].id}`);
  })
  .then(response => response.json())
  .then(posts => console.log(posts))
  .catch(error => console.error('Error:', error))
  .finally(() => console.log('Done'));

सरल रैखिक प्रवाह के लिए वादा शृंखलाएं पठनीय हैं। प्रत्येक.then() पिछले चरण से हल किया गया मान प्राप्त करता है।

async/प्रतीक्षा सिंटेक्स

// Same logic with async/await
async function fetchUserPosts() {
  try {
    const userResponse = await fetch('https://api.example.com/users');
    const users = await userResponse.json();

    const postsResponse = await fetch(`/api/posts/${users[0].id}`);
    const posts = await postsResponse.json();

    console.log(posts);
  } catch (error) {
    console.error('Error:', error);
  } finally {
    console.log('Done');
  }
}

fetchUserPosts();

async/await त्रुटियों के लिए नियमित प्रयास/पकड़ का उपयोग करता है और सिंक्रोनस कोड की तरह ऊपर से नीचे तक पढ़ता है – जटिल तर्क के लिए पालन करना बहुत आसान है।

अगल-बगल: कौन सा अधिक पठनीय है?

समानांतर में संचालन चलाना

// WRONG: These run sequentially (slow)
async function slowFetch() {
  const users = await fetchUsers();    // waits 500ms
  const posts = await fetchPosts();    // then waits 500ms = 1000ms total
}

// RIGHT: Run in parallel with Promise.all
async function fastFetch() {
  const [users, posts] = await Promise.all([
    fetchUsers(),   // both start at same time
    fetchPosts()    // total: ~500ms
  ]);
  return { users, posts };
}

// Promise.then() approach for parallel:
Promise.all([fetchUsers(), fetchPosts()])
  .then(([users, posts]) => ({ users, posts }))
  .catch(console.error);

त्रुटि प्रबंधन पैटर्न

// async/await: catch specific errors
async function getUser(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    if (error.message.includes('HTTP error: 404')) {
      return null; // user not found
    }
    throw error; // rethrow unexpected errors
  }
}

// Promise.then(): chain error catching
fetch(`/api/users/${id}`)
  .then(response => {
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();
  })
  .catch(error => {
    if (error.message.includes('404')) return null;
    throw error;
  });

बचने के लिए सामान्य गलतियाँ

1. प्रतीक्षा को भूल जाना: const data = fetch(url) आपको एक प्रॉमिस ऑब्जेक्ट देता है, डेटा नहीं। हमेशाawait यह।
2. अंदर प्रतीक्षा करें .then(): आपawaitका उपयोग नहीं कर सकते एक नियमित कॉलबैक के अंदर। कॉलबैक कोasync.
3. के रूप में चिह्नित करें समानांतर के बजाय सीरियल: अनुक्रमिकawait जब संचालन स्वतंत्र होता है तो कॉल करता है।Promise.all().
4. का प्रयोग करें त्रुटि प्रबंधन को भूल जाना: ध्यान में न आया वादा अस्वीकृतियाँ Node.js प्रक्रियाओं को क्रैश कर देती हैं और ब्राउज़र में लाल त्रुटियाँ दिखाती हैं।
5. इवेंट लूप को ब्लॉक करना: await फ़ंक्शन को निलंबित करता है, संपूर्ण थ्रेड को नहीं। अन्य कोड अभी भी चलता है.

वास्तविक-विश्व पैटर्न: एपीआई सेवा वर्ग

class ApiService {
  constructor(baseUrl) {
    this.baseUrl = baseUrl;
  }

  async request(endpoint, options = {}) {
    const response = await fetch(`${this.baseUrl}${endpoint}`, {
      headers: { 'Content-Type': 'application/json', ...options.headers },
      ...options
    });
    if (!response.ok) throw new Error(`API Error: ${response.status}`);
    return response.json();
  }

  async getUser(id)           { return this.request(`/users/${id}`); }
  async createPost(data)      { return this.request('/posts', { method: 'POST', body: JSON.stringify(data) }); }
  async updatePost(id, data)  { return this.request(`/posts/${id}`, { method: 'PUT', body: JSON.stringify(data) }); }
}

अक्सर पूछे जाने वाले प्रश्न

प्रश्न: क्या async/await वादों के बजाय केवल सिंटैक्टिक शुगर है?
उत्तर: हाँ. हुड के नीचे,async फ़ंक्शंस वादे लौटाते हैं औरawait वादा पूरा होने तक निष्पादन रोक देता है। वे पुराने परिवेश में उसी चीज़ को संकलित करते हैं।

प्रश्न: क्या मैं एक ही कोडबेस में async/await और .then() को मिला सकता हूँ?
उत्तर: हाँ, और कभी-कभी यह उचित होता है। एक उपयोगिता फ़ंक्शन एक वादा लौटा सकता है; एक घटक इसे कॉल करने के लिए async/await का उपयोग करता है। कार्यों में सुसंगत रहें।

प्रश्न: क्या एसिंक/वेट 2026 में सभी ब्राउज़रों में काम करेगा?
उत्तर: हाँ. सभी आधुनिक ब्राउज़र मूल रूप से एसिंक/प्रतीक्षा का समर्थन करते हैं। जब तक आप IE11 का समर्थन नहीं करते (जो आपको 2026 में नहीं करना चाहिए) तब तक ट्रांसपिलेशन की आवश्यकता नहीं है।

प्रश्न: स्ट्रीमिंग के लिए एसिंक जनरेटर के बारे में क्या?
A: for await...of स्ट्रीमिंग प्रतिक्रियाओं को संभालने के लिए एसिंक जेनरेटर के साथ यह उत्कृष्ट है। खंडित डेटा के लिए इसे Fetch API के ReadableStream के साथ उपयोग करें।

प्रश्न: मुझे शुरुआती लोगों को क्या सिखाना चाहिए?
उत्तर: पहले प्रॉमिस अवधारणाओं को सिखाएं ताकि वे समझ सकें कि क्या हो रहा है, फिर पसंदीदा सिंटैक्स के रूप में एसिंक्स/वेट को सिखाएं। वादों को समझने से एसिंक/प्रतीक्षा को डिबग करना बहुत आसान हो जाता है।

निष्कर्ष

2026 में,async/प्रतीक्षा डिफ़ॉल्ट विकल्प है नए कोड के लिए – यह अधिक पठनीय है, डीबग करना आसान है, और ट्राई/कैच के साथ स्वाभाविक रूप से काम करता है।Promise.then()का प्रयोग करें जब चेनिंग साफ-सुथरी होती है (सरल परिवर्तन) या जब आपकोPromise.race()जैसे बारीक नियंत्रण की आवश्यकता होती है औरPromise.allSettled(). दोनों कौशल आवश्यक हैं – किसी भी आधुनिक जावास्क्रिप्ट डेवलपर के लिए एसिंक जावास्क्रिप्ट में महारत हासिल करना गैर-परक्राम्य है।