Recentemente, tive que criar uma interface de usuário (IU) sem os endpoints de back-end instalados. O foco estava em tornar a UI o mais responsiva possível para que o usuário pudesse saber quando uma ação estava em andamento.

Isso significa principalmente que quando uma chamada AJAX é feita, a UI deve indicar isso e atualizar correspondentemente quando a chamada for concluída.

Para ajudar no desenvolvimento da UI, criei uma função para simular chamadas AJAX. A função é capaz de:

• aceitar um atraso (em milissegundos) para simular o atraso ao fazer uma chamada AJAX real
• aceitar a probabilidade de falha na simulação quando uma chamada AJAX falhar
• retornar uma carga útil fornecida

O código TypeScript está abaixo (veja a essência para o exemplo de código completo com a 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 



Para usar esta função:


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




A versão JavaScript da mesma função abaixo:


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 postagem foi publicada pela primeira vez em cheehow.dev