Async/await em JavaScript

Neste artigo, explicaremos async/await em JavaScript.

YouTube Video

Async/await em JavaScript

async (e await) em JavaScript são recursos criados para tornar a escrita de operações assíncronas mais intuitiva e legível. Ao usar isso, você pode reduzir a complexidade das funções de callback tradicionais e das cadeias de Promise, e escrever código assíncrono de uma forma que se assemelha ao código síncrono.

Função async

async é usado para definir uma função como uma função assíncrona. Uma função async sempre retorna uma Promise. Dentro de uma função marcada com async, você pode usar await para esperar que o resultado de uma Promise seja retornado.

Sintaxe Básica de uma Função async

1async function myAsyncFunction() {
2    // Write asynchronous processing here
3    return 'Result';  // Return a Promise
4}

Nesse caso, chamar myAsyncFunction() retorna automaticamente um objeto Promise. Quando a Promise é resolvida, seu resultado se torna o valor retornado por return.

Exemplo: Função async Básica

1async function greet() {
2    return 'Hello, World!';
3}
4
5greet().then((message) => {
6    console.log(message);  // Displays "Hello, World!"
7});

await

await é usado para esperar que uma Promise seja resolvida. Usando await, você pode pausar a execução até que a Promise seja resolvida e receber o resultado da Promise. await só pode ser usado dentro de uma função async.

Exemplo: Como Usar await

 1async function fetchData() {
 2    // Wait for the result of the Promise
 3    const data = await fetch('https://codesparklab.com/json/example.json');
 4    // Wait for the asynchronous operation to complete
 5    const jsonData = await data.json();
 6    // Retrieve and display the data
 7    console.log(jsonData);
 8}
 9
10fetchData();

No exemplo acima, ele espera pela Promise retornada pela função fetch com await, e então realiza operações assíncronas adicionais usando o resultado.

Tratamento de Erros com async/await

Se um erro ocorrer dentro de uma função async, esse erro é tratado como um reject da Promise. Você pode usar instruções try...catch para realizar o tratamento de erros.

Exemplo: Tratamento de Erros

 1async function fetchData() {
 2    try {
 3        // Invalid URL
 4        const data = await fetch('https://api.invalid-url.com/data');
 5        const jsonData = await data.json();
 6        console.log(jsonData);
 7    } catch (error) {
 8        // Catch the error
 9        console.error('Failed to fetch data:', error);
10    }
11}
12
13fetchData();

Usar um bloco try...catch permite capturar erros que ocorrem durante operações assíncronas, evitando que o programa trave quando erros ocorrerem.

Benefícios do async/await

Comparado às cadeias de Promise tradicionais, async/await oferece as seguintes vantagens:.

• Legibilidade aprimorada
  • O processamento assíncrono pode ser escrito como código síncrono, evitando a complexidade de cadeias de Promise aninhadas e callbacks.
• Depuração facilitada
  • Como se assemelha ao código síncrono, a depuração e o tratamento de erros tornam-se mais fáceis.
• Melhor manutenção
  • Processos assíncronos podem ser escritos de forma mais simples, facilitando alterações ou modificações no código e melhorando a manutenção a longo prazo.

Exemplo: cadeia de Promise vs async/await

Vamos comparar código usando cadeias de Promise e código usando async/await.

 1// Code using Promise chains
 2function fetchDataPromise() {
 3    fetch('https://codesparklab.com/json/example.json')
 4        .then((response) => response.json())
 5        .then((data) => {
 6            console.log(data);
 7        })
 8    .catch((error) => {
 9        console.error('Failed to fetch data:', error);
10    });
11}
12
13// Code using async/await
14async function fetchDataAsync() {
15    try {
16        const response = await fetch('https://codesparklab.com/json/example.json');
17        const data = await response.json();
18        console.log(data);
19    } catch (error) {
20        console.error('Failed to fetch data:', error);
21    }
22}

Como você pode ver, usar async/await permite escrever processos assíncronos de forma linear, resultando em um código mais legível.

Execute várias operações assíncronas simultaneamente

Ao combinar Promise.all() ou Promise.race() com await, você pode executar várias operações assíncronas simultaneamente e lidar com seus resultados em conjunto.

Exemplo: Executar várias operações assíncronas em paralelo

 1async function fetchMultipleData() {
 2    try {
 3        const [data1, data2] = await Promise.all([
 4            fetch('https://codesparklab.com/json/example1.json'),
 5            fetch('https://codesparklab.com/json/example2.json')
 6        ]);
 7        const jsonData1 = await data1.json();
 8        const jsonData2 = await data2.json();
 9        console.log(jsonData1, jsonData2);
10    } catch (error) {
11        console.error('Failed to fetch data:', error);
12    }
13}
14
15fetchMultipleData();

Promise.all() resolve várias Promises simultaneamente e retorna seus resultados como um array. Ele aguarda a resolução de todas as Promises e, se alguma falhar, será considerado uma falha geral.

Resumo

• Função async: Sempre retorna uma Promise e é usada para escrever processamentos assíncronos.
• await: Usado para aguardar a resolução de uma Promise e receber seu resultado.
• Tratamento de erros: Use try...catch para lidar com erros que ocorrem durante o processamento assíncrono.
• Múltiplas operações assíncronas: Você pode executar várias operações assíncronas simultaneamente usando Promise.all().

async/await são ferramentas poderosas para lidar com processamento assíncrono, então certifique-se de utilizá-las para simplificar lógicas assíncronas complexas.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video