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:

• JS Async: Promises
• JS Async: Callbacks

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() {}

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!
});

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
});

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();

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();

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!

🔭