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'interface utilisateur, 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 nécessaire à l'exécution d'un appel AJAX réel
• accepter une probabilité d'échec de la simulation lorsqu'un appel AJAX échoue
• renvoie 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(
  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 



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: '[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.
  }
}




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  1
      ) {
        resolve(result);
        return;
      }

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



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