DEV Community

Cover image for JS Async: async/await - pt-br
Felipe Sousa
Felipe Sousa

Posted on

JS Async: async/await - pt-br

Esse post é o ultimo da série sobre JS Async, 3 posts para explicar e mostrar como trabalhar com dados assíncronos em JavaScript.

Versão original publicada na minha página pessoal.

Você pode conferir os outros 2 artigos anteriores:

Hoje falaremos sobre o async/await e veremos alguns exemplos de como e o que podemos fazer com ele:

Async

A keyword async foi implementada na versão ES2017. Ela possibilita criarmos funções naturalmente assíncronas utilizando a seguinte notação:

async function myAsyncFunction() {}
Enter fullscreen mode Exit fullscreen mode

Algo importante e ainda mais interessante acerca dessa implementação é que toda async function retorna uma Promise, significando que podemos utilizar todas as interfaces que já conhecemos no artigo sobre promises. Vejamos um exemplo para entender melhor:

async function myAsyncFunction() {
  return "Hello!";
}

myAsyncFunction().then(payload => {
  console.log(payload); // Hello!
});
Enter fullscreen mode Exit fullscreen mode

As funções async utilizam os valores de sucesso como os valores que vão ser dispostos dentro do pipeline .then na promise que vai ser retornada, em caso de necessitar exportar um erro, é necessário disparar um erro dentro do escopo de execução para ser enviado para o pipeline .catch, vejamos um exemplo:

async function myAsyncFunctionWithError() {
  throw "something wrong happen";
}

myAsyncFunctionWithError().catch(error => {
  console.log(error); // something wrong happen
});
Enter fullscreen mode Exit fullscreen mode

Await

O uso do await é restrito apenas dentro de uma função declarada com a keyword async, basicamente o que ele faz é esperar o valor resposta de uma Promise ou converte o valor em uma Promise resolvida.

async function myAsyncFunction() {
  const payload = await { name: "felipe", age: 22 };
  console.log(payload); // { name: 'felipe', age: 22 }
}

myAsyncFunction();
Enter fullscreen mode Exit fullscreen mode

Nos casos onde não estamos retornando nenhum valor da nossa função, a chamada de execução se mantém como as chamadas de funções normais sem o uso do .then.

Capturando erros com try/catch

O await sempre espera o valor de sucesso da promise, logo não temos como capturar o erro diretamente, para fazer isso temos que fazer uso do try/catch que recebe o valor de reject se caso aconteça, dentro das promises que estão sendo executadas dentro do bloco try:

async function myAsyncErrorFunction() {
  throw "ops, something wrong happen";
}

async function myAsyncFunction() {
  try {
    const response = await myAsyncErrorFunction();
  } catch (error) {
    console.log(error); // ops, something wrong happen
  }
}

myAsyncFunction();
Enter fullscreen mode Exit fullscreen mode

Executando esse bloco, o erro acontece dentro da promise myAsyncErrorFunction e é capturada dentro do bloco catch do try/catch.

Em resumo, o uso em conjunto das implementações fazem com que nosso código seja extremamente mais simples e legível, fazendo com que tratar dados assíncronos (ou síncronos) seja de forma mais direta e eficaz.

Espero que tenha gostado dessa pequena série, nos vemos nos próximo post!

🔭

Top comments (0)