मुझे हाल ही में बैकएंड एंडपॉइंट के बिना एक यूजर-इंटरफ़ेस (यूआई) बनाना पड़ा। यूआई को यथासंभव प्रतिक्रियाशील बनाने पर ध्यान केंद्रित किया गया था ताकि उपयोगकर्ता बता सके कि कोई कार्रवाई कब चल रही है।

इसका मतलब यह है कि जब AJAX कॉल की जाती है, तो यूआई को यह संकेत देना चाहिए, और कॉल पूरा होने पर तदनुसार अपडेट करना चाहिए।

यूआई के विकास में सहायता के लिए, मैंने AJAX कॉल को अनुकरण करने के लिए एक फ़ंक्शन बनाया। फ़ंक्शन सक्षम है:

• वास्तविक AJAX कॉल करने में देरी का अनुकरण करने के लिए देरी (मिलीसेकेंड में) स्वीकार करें
• AJAX कॉल विफल होने पर अनुकरण विफल होने की संभावना स्वीकार करें
• आपूर्ति किया गया पेलोड लौटाएं

टाइपस्क्रिप्ट कोड नीचे है (डॉकस्ट्रिंग के साथ संपूर्ण कोड नमूने का सार देखें):

export async function delay(
  timeout: number,
  probability?: number,
  result?: T
): Promise {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (!probability || probability  1) {
        resolve(result);
        return;
      }

      const hit = Math.random();
      if (hit 



इस फ़ंक्शन का उपयोग करने के लिए:


async function handleButtonClick() {
  // Update the UI to show a loading indicator.

  try {
    // highlight-start
    // Make the call take 3 seconds, with a 10% chance of failure,
    // and return an array of users.
    const result = await delay(3000, 0.9, [
      {
        email: '[email protected]',
        username: 'User 1',
      },
    ]);
    // highlight-end

    // Update the UI when the call completes succesfully.
  } catch (err: any) {
    // Update the UI when the call fails.
  }
}




नीचे उसी फ़ंक्शन का जावास्क्रिप्ट संस्करण:


export async function delay(timeout, probability, result) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (
        !probability ||
        typeof probability !== 'number' ||
        probability  1
      ) {
        resolve(result);
        return;
      }

      const hit = Math.random();
      console.log(hit, probability);
      if (hit 



यह पोस्ट पहली बार cheehow.dev पर प्रकाशित हुई थी