اضطررت مؤخرًا إلى إنشاء واجهة مستخدم (UI) بدون نقاط النهاية الخلفية في مكانها. كان التركيز على جعل واجهة المستخدم سريعة الاستجابة قدر الإمكان حتى يتمكن المستخدم من معرفة وقت تنفيذ الإجراء.

يعني هذا في الغالب أنه عند إجراء مكالمة AJAX، يجب أن تشير واجهة المستخدم إلى ذلك، ويتم تحديثها وفقًا لذلك عند اكتمال المكالمة.

للمساعدة في تطوير واجهة المستخدم، قمت بإنشاء وظيفة لمحاكاة مكالمات AJAX. الوظيفة قادرة على:

• قبول التأخير (بالملي ثانية) لمحاكاة التأخير الناتج عن إجراء مكالمة AJAX فعلية
• قبول احتمال الفشل في المحاكاة عند فشل استدعاء AJAX
• إرجاع الحمولة الموردة

رمز TypeScript موجود أدناه (راجع جوهر نموذج التعليمات البرمجية الكامل مع سلسلة المستندات):

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