Fonction d'espace réservé pour les appels AJAX

J'ai récemment dû créer une interface utilisateur (UI) sans les points de terminaison backend en place. L'objectif était de rendre l'interface utilisateur aussi réactive que possible afin que l'utilisateur puisse savoir quand une action est en cours.

Cela signifie principalement que lorsqu'un appel AJAX est effectué, l'interface utilisateur doit l'indiquer et se mettre à jour en conséquence une fois l'appel terminé.

Pour aider au développement de l'UI, j'ai créé une fonction pour simuler les appels AJAX. La fonction est capable de :

• accepter un délai (en millisecondes) pour simuler le délai d'un appel AJAX réel
• accepter une probabilité d'échec de la simulation lorsqu'un appel AJAX échoue
• renvoyer une charge utile fournie

Le code TypeScript est ci-dessous (voir l'essentiel pour l'exemple de code complet avec la docstring) :

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);
  });
}

Pour utiliser cette fonction :

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.
  }
}

La version JavaScript de la même fonction ci-dessous :

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);
  });
}

Cet article a été publié pour la première fois sur cheehow.dev

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!