CodeGym/Cursos/Frontend SELF PT/Funções Assíncronas

Funções Assíncronas

Disponível

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:

JavaScript
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:

JavaScript
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

JavaScript
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.

JavaScript
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.

JavaScript
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.

JavaScript
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.

JavaScript
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();
1
Tarefa
Frontend SELF PT,  nível 43lição 3
Bloqueado
Atraso na execução
Atraso na execução
1
Tarefa
Frontend SELF PT,  nível 43lição 3
Bloqueado
Tarefas Paralelas
Tarefas Paralelas
Comentários
  • Populares
  • Novas
  • Antigas
Você precisa acessar para deixar um comentário
Esta página ainda não tem nenhum comentário