Recientemente tuve que crear una interfaz de usuario (UI) sin los puntos finales de backend implementados. La atención se centró en hacer que la interfaz de usuario tuviera la mayor capacidad de respuesta posible para que el usuario pudiera saber cuándo se está llevando a cabo una acción.

Esto significa principalmente que cuando se realiza una llamada AJAX, la interfaz de usuario debe indicarlo y actualizarse en consecuencia cuando se completa la llamada.

Para ayudar con el desarrollo de la interfaz de usuario, creé una función para simular llamadas AJAX. La función es capaz de:

• aceptar un retraso (en milisegundos) para simular el retraso al realizar una llamada AJAX real
• aceptar una probabilidad de no poder simular cuando falla una llamada AJAX
• devolver una carga útil suministrada

El código TypeScript se encuentra a continuación (consulte la esencia para ver el ejemplo de código completo con la cadena de documentación):

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 



Para usar esta función:


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 versión JavaScript de la misma función a continuación:


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 



Esta publicación se publicó por primera vez en cheehow.dev