4.1 Palavra-chave async
As funções assíncronas em JavaScript permitem escrever código assíncrono que parece e é lido como código síncrono.
As palavras-chave async e await, introduzidas no ECMAScript 2017 (ES8), facilitam o trabalho com promises
e tornam o código mais compreensível e gerenciável.
Conceitos principais
A palavra-chave async antes da declaração da função indica que a função é assíncrona. Uma função assíncrona
sempre retorna uma promise, mesmo que não haja um operador return explicitamente nela.
Se a função retorna um valor, ele é automaticamente encapsulado numa promise com esse valor.
Sintaxe:
async function nome() {
// código da função
}
Exemplo:
async function greet() {
return 'Hello, world!';
}
greet().then((message) => {
console.log(message); // Vai exibir: Hello, world!
});
4.2 Palavra-chave await
A palavra-chave await é usada dentro de uma função assíncrona para pausar sua execução até que a promise
seja resolvida. await só pode ser usado dentro de funções declaradas com a palavra-chave async.
Sintaxe:
let result = await
promise;
Exemplo:
function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
async function greet() {
await delay(2000);
return 'Hello, world!';
}
async function displayGreeting() {
const message = await greet();
console.log(message); // Vai exibir: Hello, world! após 2 segundos
}
displayGreeting();
4.3 Exemplos de uso de async e await
Exemplo 1: Função assíncrona com espera de várias promises
function fetchData1() {
return new Promise((resolve) => setTimeout(() => resolve('Data 1'), 1000));
}
function fetchData2() {
return new Promise((resolve) => setTimeout(() => resolve('Data 2'), 2000));
}
async function fetchAllData() {
const data1 = await fetchData1();
console.log(data1); // Vai exibir: Data 1 após 1 segundo
const data2 = await fetchData2();
console.log(data2); // Vai exibir: Data 2 após 2 segundos
}
fetchAllData();
Exemplo 2: Execução paralela de operações assíncronas
Para realizar várias operações assíncronas em paralelo, pode-se usar Promise.all() com await.
function fetchData1() {
return new Promise((resolve) => setTimeout(() => resolve('Data 1'), 1000));
}
function fetchData2() {
return new Promise((resolve) => setTimeout(() => resolve('Data 2'), 2000));
}
async function fetchAllData() {
const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
console.log(data1); // Vai exibir: Data 1 após 2 segundos
console.log(data2); // Vai exibir: Data 2 após 2 segundos
}
fetchAllData();
Exemplo 3: Tratamento de erros usando try...catch
Funções assíncronas permitem usar blocos try...catch para tratamento de erros, tornando o código mais legível e gerenciável.
function fetchDataWithError() {
return new Promise((resolve, reject) => setTimeout(() => reject('Error occurred'), 1000));
}
async function fetchData() {
try {
const data = await fetchDataWithError();
console.log(data);
} catch (error) {
console.error('Error:', error); // Vai exibir: Error: Error occurred após 1 segundo
}
}
fetchData();
Exemplo 4: Uso de async e await em métodos de classe
Funções assíncronas também podem ser usadas em métodos de classes.
class DataFetcher {
async fetchData() {
const data = await new Promise((resolve) => setTimeout(() => resolve('Fetched Data'), 1000));
return data;
}
}
const fetcher = new DataFetcher();
fetcher.fetchData().then((data) => {
console.log(data); // Vai exibir: Fetched Data após 1 segundo
});
Exemplo 5: Iteradores assíncronos
Iteradores assíncronos permitem trabalhar com fluxos de dados que chegam assíncronamente.
async function* asyncGenerator() {
let i = 0;
while (i < 3) {
await new Promise((resolve) => setTimeout(resolve, 1000));
yield i++;
}
}
async function iterateAsyncGenerator() {
for await (let value of asyncGenerator()) {
console.log(value); // Vai exibir 0, 1 e 2 com intervalos de 1 segundo
}
}
iterateAsyncGenerator();
GO TO FULL VERSION