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

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

जेक आर्चिबाल्ड
जेक आर्चिबाल्ड
X होम पेज

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 आपके लिए यह कर देगा, यहां बेबल REPL के ज़रिए एक उदाहरण दिया गया है

  • देखें कि ट्रांसपाइल किया गया कोड कितना मिलता-जुलता है. यह ट्रांसफ़ॉर्मेशन, Babel के es2017 प्रीसेट का हिस्सा है.

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

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

...आप पॉलीफ़िल को शामिल करेंगे और लिखेंगे:

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

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

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

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

आउटपुट बहुत सुंदर नहीं है, इसलिए कोड-ब्लोट से जुड़ी जानकारी देखते रहें.

सभी चीज़ें एक साथ सिंक करें!

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

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