Async/await no TypeScript

Este artigo explica async/await no TypeScript.

YouTube Video

Async/await no TypeScript

No TypeScript, async é uma palavra-chave usada para descrever operações assíncronas de forma concisa e se comporta de maneira similar à sintaxe async/await do JavaScript. As funções async são projetadas para tornar mais intuitivo o tratamento de funções que retornam Promises.

Noções básicas de funções async

Funções declaradas com a palavra-chave async sempre retornam uma Promise. Aqui está um exemplo básico:.

1async function fetchData(): Promise<string> {
2    return "Data received";
3}
4
5fetchData().then((data) => console.log(data)); // "Data received"

Neste exemplo, como a função async sempre retorna uma Promise, o valor retornado é automaticamente resolvido usando Promise.resolve. Em outras palavras, "Data received" se torna uma Promise<string> e é tratada como uma operação assíncrona.

A palavra-chave await

A palavra-chave await só pode ser usada dentro de uma função async. Isso permite pausar e esperar pelo resultado de uma Promise antes de continuar com a execução da função.

No exemplo a seguir, o processamento assíncrono usando fetch é escrito com async/await.

 1async function getUserData() {
 2    try {
 3        const response = await fetch("https://codesparklab.com/json/example.json");
 4        const data = await response.json();
 5        console.log(data);
 6    } catch (error) {
 7        console.error("Error fetching user data:", error);
 8    }
 9}
10
11getUserData();

Neste exemplo, await é usado para esperar a conclusão da Promise retornada pela função fetch, e seu resultado é atribuído à variável response. Além disso, o resultado de response.json() também é aguardado.

Tratamento de Erros com async/await

Erros que ocorrem durante o processamento assíncrono podem ser capturados usando a sintaxe padrão try...catch. Se ocorrer um erro na parte await, esse erro é tratado no bloco catch.

 1async function fetchDataWithErrorHandling() {
 2    try {
 3        const response = await fetch('https://invalid.codesparklab.com/');
 4        if (!response.ok) {
 5            throw new Error(`HTTP error! status: ${response.status}`);
 6        }
 7        const data = await response.json();
 8        console.log(data);
 9    } catch (error) {
10        console.error("Fetch error:", error);
11    }
12}
13
14fetchDataWithErrorHandling();

No exemplo acima, o resultado da função fetch é esperado usando await e, se ocorrer um erro, ele é tratado com try...catch.

Vantagens de async/await

1. Processamento assíncrono intuitivo: Usando async/await, o fluxo do código é mais intuitivo do que usar cadeias de Promise (then ou catch), permitindo que seja escrito de forma parecida com o processamento síncrono.

2. Tratamento de erros simplificado: Usar try...catch simplifica o tratamento de erros em operações assíncronas. Você pode escrever um código mais legível do que usando cadeias de Promise.

Valores de Retorno de Funções async

Uma função async sempre retorna uma Promise. Portanto, mesmo sem retornar explicitamente uma Promise, o processamento assíncrono é possível usando a palavra-chave async.

1async function example() {
2    return 42;
3}
4
5example().then((result) => console.log(result)); // 42

No código acima, um valor síncrono 42 é retornado, mas como está dentro de uma função async, ele é automaticamente convertido para Promise.resolve(42).

Execução Sequencial de Funções Assíncronas

Ao executar várias funções assíncronas em sequência, você pode usar await para controlar sua ordem.

 1async function fetchData(url: string): Promise<any> {
 2    try {
 3        const response = await fetch(url);
 4        return await response.json();
 5    } catch (error) {
 6        console.error("Error fetching user data:", error);
 7    }
 8}
 9
10async function fetchData1(): Promise<any> {
11    return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15    return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function processData() {
19    const data1 = await fetchData1();
20    console.log(data1);
21
22    const data2 = await fetchData2();
23    console.log(data2);
24}
25
26processData();

Neste exemplo, fetchData2 é executado após aguardar a conclusão de fetchData1. Isso é mais legível em comparação ao uso de uma cadeia de Promises.

Execução Paralela

Se você quiser executar operações assíncronas em paralelo, pode usar Promise.all para lidar com várias Promises simultaneamente.

 1async function fetchData(url: string): Promise<any> {
 2    try {
 3        const response = await fetch(url);
 4        return await response.json();
 5    } catch (error) {
 6        console.error("Error fetching user data:", error);
 7    }
 8}
 9
10async function fetchData1(): Promise<any> {
11    return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15    return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function fetchMultipleData() {
19    const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
20    console.log(data1);
21    console.log(data2);
22}
23
24fetchMultipleData();

Nesse caso, fetchData1 e fetchData2 são executados ao mesmo tempo, e o processo continua após ambas serem resolvidas. Isso permite um tratamento eficiente de várias operações assíncronas.

Resumo

• Uma função async retorna uma Promise, e ao usar a palavra-chave await, você pode aguardar o resultado de uma operação assíncrona.
• Ao usar try...catch, o tratamento de erros em operações assíncronas se torna mais simples.
• Ao usar Promise.all, é possível executar várias operações assíncronas em paralelo.

async/await é amplamente usado em TypeScript e JavaScript porque permite uma descrição mais simples de operações assíncronas.

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