首頁  >  文章  >  web前端  >  AJAX 呼叫的佔位符函數

AJAX 呼叫的佔位符函數

WBOY
WBOY原創
2024-08-22 18:57:17305瀏覽

Placeholder function for AJAX calls

我最近必須在沒有後端端點的情況下建立使用者介面 (UI)。重點是使 UI 盡可能響應,以便用戶可以知道何時正在進行操作。

這主要表示當進行 AJAX 呼叫時,UI 應進行指示,並在呼叫完成時進行相應更新。

為了幫助 UI 的開發,我建立了一個函數來模擬 AJAX 呼叫。此函數能夠:

  • 接受延遲(以毫秒為單位)來模擬實際 AJAX 呼叫的延遲
  • 接受 AJAX 呼叫失敗時模擬失敗的機率
  • 回傳提供的有效負載

TypeScript 程式碼如下(請參閱帶有文件字串的完整程式碼範例的要點):

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

      const hit = Math.random();
      if (hit < probability) {
        resolve(result);
      } else {
        reject(
          `Placeholder rejection (${Math.round(
            hit * 100
          )}%) - this should NOT appear in production`
        );
      }
    }, timeout);
  });
}

要使用此功能:

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: 'user1@example.com',
        username: 'User 1',
      },
    ]);
    // highlight-end

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

以下相同函數的 JavaScript 版本:

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

      const hit = Math.random();
      console.log(hit, probability);
      if (hit < probability) {
        resolve(result);
      } else {
        reject(
          `Placeholder rejection (${Math.round(
            hit * 100
          )}%) - this should NOT appear in production`
        );
      }
    }, timeout);
  });
}

這篇文章首次發佈於 cheehow.dev

以上是AJAX 呼叫的佔位符函數的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn