Недавно мне пришлось создать пользовательский интерфейс (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.
  }
}




Версия JavaScript той же функции ниже:


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