Compreendendo Async/Await em JavaScript: um mergulho mais profundo nos tempos de saída

Esclarecendo o comportamento assíncrono/aguardado do JavaScript no tempo

No desenvolvimento moderno de JavaScript, assíncrono/aguardar tornou-se uma ferramenta essencial para lidar com código assíncrono. Apesar de sua utilidade, muitos desenvolvedores ficam confusos quando se trata de prever o tempo exato das saídas em funções que utilizam essas técnicas. Isto é especialmente verdadeiro em avaliações de codificação como a do Adaface, onde a compreensão do fluxo de operações assíncronas é crucial.

O problema no qual você está trabalhando apresenta duas funções assíncronas com comportamentos aparentemente semelhantes, mas resultados diferentes em termos de tempo. À primeira vista, as funções podem parecer levar 10 segundos, mas a resposta real surpreende muitos desenvolvedores, pois envolve uma compreensão mais profunda de como as promessas são resolvidas.

Este artigo tem como objetivo orientá-lo no código, detalhando como o assíncrono e espere a mecânica funciona, bem como a forma como a ordem de resolução da promessa afeta o resultado final. Ao final disso, você deverá ter uma compreensão mais clara de como o tempo funciona em JavaScript assíncrono.

Vamos mergulhar no código para entender por que a primeira função gera 24 após 5 segundos, e a segunda função também produz 24 mas com uma estrutura de promessa diferente. Com esse conhecimento, você estará melhor equipado para as próximas avaliações de entrevistas.

Explorando operações assíncronas em JavaScript

Os scripts fornecidos demonstram o poder das operações assíncronas em JavaScript usando o assíncrono e espere palavras-chave. A ideia principal é lidar com tarefas assíncronas, como operações atrasadas, de forma eficiente. Em ambos os exemplos, a função depois de 5s(x) simula um atraso de 5 segundos retornando uma promessa que resolve com o valor x. Esse atraso é essencial para entender a sequência de operações e como as promessas interagem com o fluxo da função.

Na primeira função, mult(entrada), o código espera sequencialmente pela resolução de duas promessas. O espere palavra-chave garante que o código pause a execução até que a promessa retornada por depois de 5s(3) está resolvido. Então, depois que a primeira promessa for resolvida, o código aguardará mais 5 segundos pela segunda promessa depois de 5s(4) para resolver. Isso resulta em um tempo de espera total de 10 segundos antes que o cálculo seja feito. A multiplicação da entrada por ambos os valores resolvidos dá a saída final.

A segunda função, segundo_mult(entrada), melhora o desempenho iniciando as duas promessas simultaneamente. Ao atribuir depois de 5s(3) e depois de 5s(4) para variáveis ​​antes de aplicar espere, ambas as promessas são executadas em paralelo. Quando o código chega ao espere declarações, ele espera que ambas as promessas sejam resolvidas, mas elas já estão em andamento, reduzindo o tempo total de espera para apenas 5 segundos. Essa execução simultânea destaca a importância de otimizar as operações assíncronas.

Esses scripts demonstram como async e await podem ser usados ​​para lidar com código assíncrono de maneira limpa. Compreender quando executar tarefas assíncronas simultaneamente ou sequencialmente é crucial para otimizar o desempenho. O segundo_mult a abordagem da função mostra o benefício de evitar atrasos desnecessários, enquanto o primeiro exemplo é útil quando as operações devem acontecer em uma ordem específica. Ambos os exemplos são amplamente aplicáveis ​​em cenários do mundo real onde tratamento de promessas é necessário, como buscar dados de APIs ou executar operações que dependem de recursos externos.

function after5s(x) {
  return new Promise(res => {
    setTimeout(() => {
      res(x);
    }, 5000);
  });
}

// First approach using async/await with sequential waits
async function mult(input) {
  const f = await after5s(3);
  const g = await after5s(4);
  return input * f * g;
}

// Calling the function and handling the promise resolution
mult(2).then(value => {
  console.log(value); // Output: 24 after 10 seconds
});

function after5s(x) {
  return new Promise(res => {
    setTimeout(() => {
      res(x);
    }, 5000);
  });
}

// Second approach optimizing by starting both promises concurrently
async function second_mult(input) {
  const f = after5s(3); // Starts promise immediately
  const g = after5s(4); // Starts second promise concurrently
  return input * await f * await g;
}

// Calling the function and handling the promise resolution
second_mult(2).then(value => {
  console.log(value); // Output: 24 after 5 seconds
});

Dominando padrões assíncronos em JavaScript

Um dos conceitos mais importantes do JavaScript moderno é como lidar com tarefas assíncronas com eficiência. Enquanto o assíncrono/aguardar Embora a sintaxe simplifique a legibilidade do código assíncrono, há outros fatores que os desenvolvedores devem considerar. Um aspecto crítico do uso de funções assíncronas é entender como o JavaScript gerencia o ciclo de eventos e a pilha de chamadas assíncronas. O loop de eventos permite que o JavaScript execute múltiplas tarefas simultaneamente, mesmo em um ambiente de thread único, empurrando tarefas sem bloqueio, como promessas, para a fila e continuando a execução de outro código.

Um elemento frequentemente esquecido em operações assíncronas é o tratamento de erros. Ao usar a sintaxe async/await, os desenvolvedores podem agrupar seu código em um tente...pegue bloco para gerenciar rejeições de promessas e outros erros normalmente. Este método garante que quaisquer erros que ocorram em uma operação assíncrona sejam detectados e tratados sem interromper o fluxo do programa. As funções assíncronas não apenas melhoram o desempenho, mas também tornam o tratamento de erros complexos mais eficiente e fácil de depurar.

Outra área importante de foco é como Promessa.tudo pode ser usado para lidar com várias promessas simultaneamente. Ao contrário de aguardar promessas sequencialmente como no primeiro exemplo, Promessa.tudo executa todas as promessas simultaneamente, retornando resultados em um array. Este método é extremamente útil ao fazer múltiplas chamadas de API ou executar diversas tarefas onde a ordem de execução não é crítica. Compreender como estruturar tarefas simultâneas adequadamente é crucial para escrever código JavaScript ideal e escalonável.