async/await को बनाने की कोशिश बंद करें

प्रॉमिसेस अभी भी बहुत फ़ेच हैं

समय की शुरुआत से, डेवलपर्स ने कई बेतुकी बहसों से लड़ाई की है। क्लासिक “Tabs vs. Spaces” से लेकर कालजयी “Mac vs. PC” बहस तक, हम भटका देने वाली दलीलें खोजने में माहिर हैं।

लड़ाई…?

प्रॉमिसेस बनाम async/await!

रुको, क्या यह लड़ाई है? ज़रूर होगी न? हम अब कॉलबैक्स के बारे में बात भी नहीं करते लगते?

नहीं, यह लड़ाई नहीं है। आखिरकार यह आपके टूलबॉक्स में एक और संभावित उपकरण है। हालाँकि, क्योंकि async/await सभी प्रॉमिस फंक्शनैलिटी (खासकर Promise.all, .race) को रिप्लेस नहीं करता इसे रिप्लेसमेंट के रूप में पेश करना भ्रामक है।

बहुत सारे प्रभावशाली लोग यह गलत धारणा फैला रहे हैं कि async/await वह प्रॉमिस रिप्लेसमेंट है जिसका सबको इंतज़ार था करना।

संकेत: नहीं, बिल्कुल नहीं, और थोड़ा भी नहीं।

VS Code में हाल ही में जुड़ी एक सुविधा इस पूर्वाग्रह को आगे बढ़ाती है। जैसा कि @umaar ने ट्वीट किया:

Visual Studio Code can now convert your long chains of Promise.then()‘s into async/await! 🎊 Works very well in both JavaScript and TypeScript files. .catch() is also correctly converted to try/catch ✅ pic.x.com/xb39Lsp84V

— Umar Hansa (@umaar) September 28, 2018

अगर आप प्रॉमिसेस से नफरत करते हैं और इस रिफैक्टरिंग सुविधा को चाहते हैं, तो मैं आपको दोष नहीं देता।

मैं सहानुभूति रखता हूँ। मैं समझता हूँ।

मैं वहाँ रहा हूँ। 🤗

मैं प्रॉमिसेस से नफरत करता था। आज, मैं पूरी तरह से वापस आ गया हूँ। प्रॉमिसेस अद्भुत हैं। वे आपको फंक्शन कंपोजिशन का लाभ उठाने के लिए प्रोत्साहित कर सकते हैं।

मैं अपनी तकनीक सुधारने के लिए पहले दो क्षेत्रों पर ध्यान केंद्रित करने की सलाह देता हूँ।

1. नेम्ड फंक्शंस (कोई एनॉनिमस नहीं)
2. सिंगल-पर्पस फंक्शंस

#1: नेम्ड फंक्शंस!

अपने एनॉनिमस मेथड्स को खत्म करें। नेम्ड फंक्शंस का उपयोग करने से कोड आपकी ज़रूरतों की कविता की तरह पढ़ा जाता है।

आइए एक आम उदाहरण देखें:

fetch का उपयोग करके HTTP GET रिक्वेस्ट बनाना:

एंटी-पैटर्न

// ❌ Using anonymous inline functions 💩
fetch(url)
  .then(response => response.status < 400
    ? response
    : Promise.reject(new Error('Request Failed: ' + response.ststus)))
  .then(response => response.text())

समाधान: नेम्ड मेथड्स

// ✅ Clarity emerges: named functions
fetch(url)
  .then(checkResponse)
  .then(getText)


// Reusable general-purpose functions
function checkResponse(response) {
  return response.status < 400
    ? response
    : Promise.reject(new Error('Request Failed: ' + response.ststus))
}
function getText(response) {
  return response.text()
}

इस दृष्टिकोण के फायदे ज़्यादा से ज़्यादा DRY कोड लिखने पर स्पष्ट होते जाते हैं।

अतिरिक्त संसाधन: इस तकनीक का उपयोग करके बेसिक लॉगिंग और एडवांस्ड डिबगिंग की मेरी 1 मिनट की वीडियो देखें।

#2: सिंगल पर्पस (फंक्शंस)

यह काफी सरल लगता है: सिंगल पर्पस।

फिर भी यह इतना सब्जेक्टिव, मनमाना है, और हाँ, कभी-कभी बेमतलब भी।

दिलचस्प बात यह है कि ज़्यादातर डेवलपर्स कहते हैं कि वे अपने कोड का सिंगल पर्पस बनाने में काफ़ी अच्छे हैं। असंबद्ध नहीं: वे खुद को अच्छा ड्राइवर भी बताते हैं!

आइए एक उदाहरण देखें जो (अत्यंत प्रतिभाशाली) Jake Archibald ने Google Developers साइट के अपने async/await आर्टिकल में दिखाया है (नोट: 2024, लिंक हटा दिया गया)।

// source: https://developers.google.com/web/fundamentals/primers/async-functions
function logInOrder(urls) {
  // fetch all the URLs
  const textPromises = urls.map(url => {
    return fetch(url).then(response => response.text());
  });

  // log them in order
  textPromises.reduce((chain, textPromise) => {
    return chain.then(() => textPromise)
      .then(text => console.log(text));
  }, Promise.resolve());
}

सिंगल पर्पस?

मैं कहूँगा नहीं। logInOrder क्या कर रहा है?

1. urls की लिस्ट को लूप करना
2. उन्हें इनलाइन HTTP GET पर लागू करना:
3. HTTP fetch
4. रिस्पॉन्स टेक्स्ट बॉडी रिटर्न करना
5. textPromise में हर प्रॉमिस के बाद .then(text => console.log(text)) जोड़ना
6. रिजल्ट्स को सीरियली प्रिंट करना

इस सिंगल फंक्शन में 5 एनॉनिमस मेथड्स परिभाषित हैं। जैसा कि Jake ने भी बताया, .reduce बहुत ज़्यादा कॉम्प्लेक्स है। अपने कोड में हर जगह सूक्ष्म मैकेनिज़्म को हाथ से लिखना समझ में नहीं आता। दूसरे शब्दों में, हम document.createElement(), element.setAttribute() आदि के साथ DOM क्रिएशन कोड नहीं लिखते। इसके बजाय हम कई विकल्पों में से सबसे अच्छा टूल चुनते हैं: हेल्पर/यूटिलिटी फंक्शंस, लाइब्रेरी या फ्रेमवर्क।

समाधान: सिंगल पर्पस फंक्शंस

मेथड्स एक्सट्रैक्ट करके शुरू करें…

.reduce() और logPromise() को Promise.all और ..map() से बदलें…

सारांश

इन तकनीकों को अपने कोड पर लागू करने की कोशिश करें! फिर मुझे ट्वीट करें और बताएं कि कैसा रहा। या अगर आपके कोई सवाल या टिप्पणियाँ हैं, तो भी संपर्क करें!

#PromiseTruth फैलाने और इस आर्टिकल को शेयर करने में मदद करें। ❤️

संबंधित पठन

• Daniel Brain
• Eric Elliott