एसिंक्रोनस फ़ंक्शन: वादों को आसान तरीके से पेश करना

एसिंक्रोनस फ़ंक्शन की मदद से, प्रॉमिस-आधारित कोड को इस तरह लिखा जा सकता है, जैसे कि वे सिंक्रोनस हों.

Jake Archibald

Chrome, Edge, Firefox, और Safari में एसिंक्रोनस फ़ंक्शन डिफ़ॉल्ट रूप से चालू होते हैं और वे शानदार हैं. इनसे प्रॉमिस-आधारित कोड को इस तरह लिखा जा सकता है, जैसे कि वह सिंक्रोनस था, लेकिन मुख्य थ्रेड को ब्लॉक किए बिना. वे आपके एसिंक्रोनस कोड को कम "स्मार्ट" और पढ़ने में ज़्यादा आसान बनाते हैं.

एक साथ काम नहीं करने वाले फ़ंक्शन इस तरह काम करते हैं:

async function myFirstAsyncFunction() {
  try {
    const fulfilledValue = await promise;
  } catch (rejectedValue) {
    // …
  }
}

अगर आपने फ़ंक्शन की डेफ़िनिशन से पहले async कीवर्ड का इस्तेमाल किया है, तो फ़ंक्शन में await का इस्तेमाल करें. जब कोई प्रॉमिस await किया जाता है, तो फ़ंक्शन को तब तक ब्लॉक नहीं किया जाता, जब तक प्रॉमिस पूरा नहीं हो जाता. अगर वायदा पूरा हो जाता है, तो आपको वैल्यू वापस मिल जाती है. अगर प्रॉमिस अस्वीकार हो जाता है, तो अस्वीकार की गई वैल्यू दी जाती है.

ब्राउज़र समर्थन

ब्राउज़र सहायता

  • 55
  • 15
  • 52
  • 10.1

सोर्स

उदाहरण: फ़ेच करने के लिए लॉग इन करना

मान लें कि आपको कोई यूआरएल फ़ेच करना है और जवाब को टेक्स्ट के तौर पर लॉग करना है. यहां बताया गया है कि वादों का इस्तेमाल करने पर यह कैसा दिखता है:

function logFetch(url) {
  return fetch(url)
    .then((response) => response.text())
    .then((text) => {
      console.log(text);
    })
    .catch((err) => {
      console.error('fetch failed', err);
    });
}

एसिंक फ़ंक्शन का इस्तेमाल करने के बारे में भी यहां जानकारी दी गई है:

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  } catch (err) {
    console.log('fetch failed', err);
  }
}

यह पंक्तियों की संख्या समान है, लेकिन सभी कॉलबैक जा चुके हैं. इससे कॉन्टेंट पढ़ना आसान हो जाता है, खास तौर पर उन लोगों के लिए जिन्हें प्रॉम्ट के बारे में कम पता है.

एक साथ काम नहीं करने वाली रिटर्न वैल्यू

एसिंक्रोनस फ़ंक्शन हमेशा प्रॉमिस लौटाते हैं, चाहे आप await का इस्तेमाल करें या नहीं. वह प्रॉमिस, ऐसिंक फ़ंक्शन के दिए गए नतीजे के साथ रिज़ॉल्व हो जाता है या फिर ऐसिंक फ़ंक्शन की ओर से ट्रिगर किए जाने वाले किसी भी फ़ंक्शन के साथ अस्वीकार हो जाता है. इसलिए:

// wait ms milliseconds
function wait(ms) {
  return new Promise((r) => setTimeout(r, ms));
}

async function hello() {
  await wait(500);
  return 'world';
}

...hello() को कॉल करने पर ऐसा प्रॉमिस मिलेगा जो "world" को पूरा करता है.

async function foo() {
  await wait(500);
  throw Error('bar');
}

...foo() को कॉल करने पर, Error('bar') को अस्वीकार करने का प्रॉमिस मिलेगा.

उदाहरण: जवाब को स्ट्रीम करना

ज़्यादा जटिल उदाहरणों में एसिंक फ़ंक्शन का फ़ायदा बढ़ता है. मान लें कि आपको हिस्सों को लॉग आउट करते समय, जवाब को स्ट्रीम करना है और फ़ाइनल साइज़ देना है.

यहां वादे के साथ यह बताया गया है:

function getResponseSize(url) {
  return fetch(url).then((response) => {
    const reader = response.body.getReader();
    let total = 0;

    return reader.read().then(function processResult(result) {
      if (result.done) return total;

      const value = result.value;
      total += value.length;
      console.log('Received chunk', value);

      return reader.read().then(processResult);
    });
  });
}

मुझे देखें, जेक "विल्डर ऑफ़ प्रॉमिस" आर्किबाल्ड. देखें कि एसिंक्रोनस लूप को सेट अप करने के लिए मैं processResult() को खुद किस तरह कॉल कर रहा हूं? लिखने से मुझे बहुत स्मार्ट महसूस हुआ. हालाँकि, ज़्यादातर "स्मार्ट" कोड की तरह, उसका पता लगाने के लिए आपको उसे हर उम्र के घूरने की ज़रूरत होती है. जैसे, 90 के दशक की जादू की आंखों वाली एक तस्वीर.

एक साथ काम न करने वाले फ़ंक्शन की मदद से, फिर से कोशिश करते हैं:

async function getResponseSize(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  let result = await reader.read();
  let total = 0;

  while (!result.done) {
    const value = result.value;
    total += value.length;
    console.log('Received chunk', value);
    // get the next result
    result = await reader.read();
  }

  return total;
}

अब सब "स्मार्ट" नहीं है. इस एसिंक्रोनस लूप ने मुझे बहुत आत्मविश्वास के साथ एक भरोसेमंद, उबाऊ और लूप में बदल दिया है. काफ़ी बेहतर. आने वाले समय में, आपको एक साथ काम करने वाले टूल मिलेंगे, जो while लूप को फॉर-ऑफ़ लूप से बदल देंगे, ताकि यह पहले से ज़्यादा व्यवस्थित हो जाए.

अन्य एक साथ काम नहीं करने वाला फ़ंक्शन सिंटैक्स

मैंने आपको पहले ही async function() {} दिखाया है, लेकिन async कीवर्ड का इस्तेमाल किसी दूसरे फ़ंक्शन सिंटैक्स के साथ किया जा सकता है:

ऐरो फ़ंक्शन

// map some URLs to json-promises
const jsonPromises = urls.map(async (url) => {
  const response = await fetch(url);
  return response.json();
});

ऑब्जेक्ट के तरीके

const storage = {
  async getAvatar(name) {
    const cache = await caches.open('avatars');
    return cache.match(`/avatars/${name}.jpg`);
  }
};

storage.getAvatar('jaffathecake').then(…);

क्लास के तरीके

class Storage {
  constructor() {
    this.cachePromise = caches.open('avatars');
  }

  async getAvatar(name) {
    const cache = await this.cachePromise;
    return cache.match(`/avatars/${name}.jpg`);
  }
}

const storage = new Storage();
storage.getAvatar('jaffathecake').then(…);

ध्यान रखना! एक ही क्रम में कई प्रॉडक्ट का इस्तेमाल करने से बचें

हालांकि, ऐसा कोड लिखा जा रहा है जो सिंक्रोनस दिखता है, लेकिन पक्का करें कि आपको साथ-साथ काम करने का मौका न मिले.

async function series() {
  await wait(500); // Wait 500ms…
  await wait(500); // …then wait another 500ms.
  return 'done!';
}

ऊपर बताए गए काम को पूरा होने में 1000 मि॰से॰ लगते हैं, जबकि:

async function parallel() {
  const wait1 = wait(500); // Start a 500ms timer asynchronously…
  const wait2 = wait(500); // …meaning this timer happens in parallel.
  await Promise.all([wait1, wait2]); // Wait for both timers in parallel.
  return 'done!';
}

ऊपर दिए गए काम को पूरा होने में 500 मि॰से॰ लगते हैं, क्योंकि दोनों इंतज़ार एक ही समय पर होते हैं. आइए एक व्यावहारिक उदाहरण देखें.

उदाहरण: फ़ेच किए गए डेटा को क्रम से दिखाना

मान लें कि आपको यूआरएल की सीरीज़ फ़ेच करनी है और उन्हें जल्द से जल्द, सही क्रम में लॉग करना है.

गहरी सांस - यहां बताया गया है कि यह वादों के साथ कैसा दिखता है:

function markHandled(promise) {
  promise.catch(() => {});
  return promise;
}

function logInOrder(urls) {
  // fetch all the URLs
  const textPromises = urls.map((url) => {
    return markHandled(fetch(url).then((response) => response.text()));
  });

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

हां, यह सही है. मैं वादों के क्रम को तय करने के लिए reduce का इस्तेमाल कर रहा हूं. मैं बहुत स्मार्ट हूं. हालांकि, यह थोड़ी स्मार्ट कोडिंग है जिसके बिना भी आपका काम आसान हो जाता है.

हालांकि, ऊपर दिए गए कोड को एक एसिंक्रोनस फ़ंक्शन में बदलने पर, हो सकता है कि उपयोगकर्ता कई क्रम वाला हो जाए:

इसका सुझाव नहीं दिया गया - क्रम में इस्तेमाल किया गया है
async function logInOrder(urls) {
  for (const url of urls) {
    const response = await fetch(url);
    console.log(await response.text());
  }
}
यह बहुत अच्छा लगता है, लेकिन मेरा दूसरा फ़ेच तब तक शुरू नहीं होता, जब तक कि मेरा पहला फ़ेच पूरी तरह से पढ़ नहीं लिया जाता. यह प्रॉम्ट के उदाहरण से काफ़ी धीमा है जो फ़ेच को साथ-साथ पूरा करता है. शुक्र है कि यहां एक आदर्श मध्य मैदान है.
सुझाया गया - अच्छा और साथ-साथ
function markHandled(...promises) {
  Promise.allSettled(promises);
}

async function logInOrder(urls) {
  // fetch all the URLs in parallel
  const textPromises = urls.map(async (url) => {
    const response = await fetch(url);
    return response.text();
  });

  markHandled(...textPromises);

  // log them in sequence
  for (const textPromise of textPromises) {
    console.log(await textPromise);
  }
}
इस उदाहरण में, यूआरएल फ़ेच किए जाते हैं और साथ-साथ पढ़े जाते हैं, लेकिन "स्मार्ट" reduce बिट को स्टैंडर्ड, बोरिंग, और लूप में पढ़ने की सुविधा से बदल दिया गया है.

ब्राउज़र से जुड़ी सहायता का समाधान: जनरेटर

अगर जनरेटर (जिसमें हर बड़े ब्राउज़र का सबसे नया वर्शन शामिल है) की सुविधा देने वाले ब्राउज़र टारगेट किए जा रहे हैं, तो पॉलीफ़िल एसिंक फ़ंक्शन को क्रम से लगाया जा सकता है.

Babel आपके लिए यह कर देगा, यहां Baby REPL का एक उदाहरण दिया गया है

  • ध्यान दें कि ट्रांसपिल किया गया कोड कितना मिलता-जुलता है. यह बदलाव, Babel के es2017 प्रीसेट का हिस्सा है.

मेरा सुझाव है कि आप ट्रांसपिलिंग का इस्तेमाल करें, क्योंकि जब आपके टारगेट ब्राउज़र पर एसिंक फ़ंक्शन काम करने लगते हैं, तब आपके पास इसे बंद करने का विकल्प होता है. हालांकि, अगर आपको सच में ट्रांसपिलर का इस्तेमाल नहीं करना है, तो Babel का पॉलीफ़िल लेकर खुद इसका इस्तेमाल करें. के बजाय:

async function slowEcho(val) {
  await wait(1000);
  return val;
}

...आपको पॉलीफ़िल को शामिल करना होगा और यह लिखना होगा:

const slowEcho = createAsyncFunction(function* (val) {
  yield wait(1000);
  return val;
});

ध्यान दें कि आपको createAsyncFunction पर जनरेटर (function*) पास करना होगा और await की जगह yield का इस्तेमाल करना होगा. इसके अलावा, यह वैसे ही काम करता है.

समाधान: रीजनरेटर

अगर आप पुराने ब्राउज़र को टारगेट कर रहे हैं, तो बेबेल जनरेटर को भी ट्रांसपाइल कर सकता है. इससे आप IE8 तक के एसिंक फ़ंक्शन का इस्तेमाल कर सकते हैं. ऐसा करने के लिए, आपको Babel के es2017 प्रीसेट और es2015 प्रीसेट की ज़रूरत होगी.

आउटपुट उतना अच्छा नहीं है, इसलिए कोड-ब्लोट से सावधान रहें.

सभी चीज़ें एक साथ सिंक न हों!

एक बार एसिंक फ़ंक्शन सभी ब्राउज़र पर पहुंच जाएं, तो उनका इस्तेमाल हर प्रॉमिस-रिटर्न फ़ंक्शन पर करें! इनसे आपके कोड को व्यवस्थित बनाने में मदद मिलती है. साथ ही, यह भी पक्का होता है कि फ़ंक्शन हमेशा काम का प्रॉमिस देगा.

2014 में, मैं एक साथ काम नहीं करने वाले फ़ंक्शन के बारे में बहुत उत्साहित हो गया था. उन्हें ब्राउज़र में अपने काम करते हुए देखना अच्छा लगता है. ओह!