S10L10 - Async e Await

html

Dominando Async & Await em JavaScript: Um Guia Abrangente
Índice

Introdução
Compreendendo Asynchronous JavaScript

A Fetch API e Suas Limitações


Introduzindo Async e Await

O Que São Async e Await?
Benefícios do Uso de Async e Await


Implementando Async e Await

Sintaxe Básica e Uso
Tratando Respostas


Exemplo Prático: Fetching Data com Async e Await

Explicação do Código Passo a Passo
Saída e Resultados


Melhores Práticas
Conclusão
Recursos Adicionais

Introdução
No âmbito do desenvolvimento web moderno, gerenciar asynchronous operations de forma eficiente é crucial. JavaScript, sendo uma linguagem single-threaded, depende fortemente da asynchronous programming para lidar com tarefas como data fetching, file reading e mais sem bloquear o thread principal.
Tradicionalmente, a Fetch API, combinada com as promises .then(), tem sido o método preferido para lidar com asynchronous operations. No entanto, à medida que as aplicações aumentam em complexidade, essa abordagem pode levar a códigos convolutos e de difícil manutenção. Chegam então Async e Await—novos recursos do JavaScript que prometem asynchronous code mais limpos e legíveis.
Este eBook investiga as complexidades de Async e Await, demonstrando como eles simplificam asynchronous operations em JavaScript, aprimorando tanto a experiência do desenvolvedor quanto a qualidade do código.
Compreendendo Asynchronous JavaScript
A Fetch API e Suas Limitações
A Fetch API revolucionou a forma como lidamos com HTTP requests em JavaScript, fornecendo uma interface moderna para fetching resources. Aqui está uma visão geral rápida de seu uso:




		
		
			
			
Java
			
			
fetch('https://api.example.com/data')
  .then(response =&gt; response.json())
  .then(data =&gt; console.log(data))
  .catch(error =&gt; console.error(error));

			
				
					
				
					1
2
3
4
5
6
				
						 
fetch('https://api.example.com/data')
  .then(response =&gt; response.json())
  .then(data =&gt; console.log(data))
  .catch(error =&gt; console.error(error));
 
					
				
			
		


Embora eficaz, encadear múltiplos métodos .then() pode rapidamente se tornar incontrolável, especialmente ao lidar com ações complexas ou múltiplos asynchronous calls. Este "callback hell" torna o código mais difícil de ler e manter.
Introduzindo Async e Await
O Que São Async e Await?
Async e Await são syntactic sugar construídas sobre JavaScript Promises, introduzidas no ECMAScript 2017 (ES8). Elas proporcionam uma maneira mais direta e legível de escrever asynchronous code.

Async: Uma palavra-chave usada para declarar uma asynchronous function. Ela garante que a função retorne uma Promise.
Await: Uma palavra-chave usada dentro de uma async function para pausar a execução até que a Promise seja resolvida (seja cumprida ou rejeitada).

Benefícios do Uso de Async e Await

Readability: O código aparece sincrônico, tornando-o mais fácil de seguir e entender.
Error Handling: Simplifica o tratamento de erros usando blocos try...catch.
Maintainability: Reduz a complexidade associada a múltiplos encadeamentos de .then().

Implementando Async e Await
Sintaxe Básica e Uso
Aqui está como declarar uma asynchronous function e usar await dentro dela:




		
		
			
			
Java
			
			
const fetchData = async () =&gt; {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
};

			
				
					
				
					1
2
3
4
5
6
7
				
						 
const fetchData = async () =&gt; {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
};
 
					
				
			
		


Neste exemplo:

fetchData é uma asynchronous function.
await pausa a execução até que a Promise fetch seja resolvida.
A função retorna finalmente os dados recuperados.

Tratando Respostas
Compreender como lidar com respostas é crucial. Vamos detalhar o processo:

Fetching Data: Use fetch para fazer uma HTTP request.
Awaiting the Response: Pausa a execução até que a response seja recebida.
Parsing the Data: Converte a response raw em JSON.
Returning the Data: Torna os dados acessíveis para outras partes da aplicação.

Exemplo Prático: Fetching Data com Async e Await
Vamos passar por um exemplo prático para solidificar nossa compreensão.
Explicação do Código Passo a Passo
Aqui está o código completo com base no transcript fornecido:




		
		
			
			
Java
			
			
const info = async () =&gt; {
  console.log('Hello World'); // Line 6
  const response = await fetch('https://api.example.com/data'); // Line 7
  const data = await response.json();
  return data;
};

info().then(data =&gt; {
  console.log(data); // Displaying the fetched data
});

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
				
						 
const info = async () =&gt; {
  console.log('Hello World'); // Line 6
  const response = await fetch('https://api.example.com/data'); // Line 7
  const data = await response.json();
  return data;
};
 
info().then(data =&gt; {
  console.log(data); // Displaying the fetched data
});
 
					
				
			
		


Explicação:

Declaring the Async Function:

    



		
		
			
			
Java
			
			
const info = async () =&gt; {
    
			
				
					
				
					1
2
3
				
						 
const info = async () =&gt; {
    
					
				
			
		



info é uma asynchronous arrow function.


Logging a Message:

    



		
		
			
			
Java
			
			
console.log('Hello World'); // Line 6
    
			
				
					
				
					1
2
3
				
						 
console.log('Hello World'); // Line 6
    
					
				
			
		



Exibe "Hello World" no console.


Fetching Data with Await:

    



		
		
			
			
Java
			
			
const response = await fetch('https://api.example.com/data'); // Line 7
    
			
				
					
				
					1
2
3
				
						 
const response = await fetch('https://api.example.com/data'); // Line 7
    
					
				
			
		



Faz uma HTTP GET request para a URL especificada.
Pausa a execução até que a Promise fetch seja resolvida.


Parsing the JSON Response:

    



		
		
			
			
Java
			
			
const data = await response.json();
    
			
				
					
				
					1
2
3
				
						 
const data = await response.json();
    
					
				
			
		



Converte a response raw para o formato JSON.
Espera a resolução da Promise json().


Returning the Data:

    



		
		
			
			
Java
			
			
return data;
    
			
				
					
				
					1
2
3
				
						 
return data;
    
					
				
			
		



A função retorna os dados JSON analisados.


Handling the Returned Promise:

    



		
		
			
			
Java
			
			
info().then(data =&gt; {
  console.log(data); // Displaying the fetched data
});
    
			
				
					
				
					1
2
3
4
5
				
						 
info().then(data =&gt; {
  console.log(data); // Displaying the fetched data
});
    
					
				
			
		



Chama a função info.
Usa .then() para tratar os dados resolvidos e os exibe no console.



Comentários no Código:




		
		
			
			
Java
			
			
const info = async () =&gt; {
  console.log('Hello World'); // Logs a greeting message
  const response = await fetch('https://api.example.com/data'); // Fetches data from the API
  const data = await response.json(); // Parses the response as JSON
  return data; // Returns the parsed data
};

info().then(data =&gt; {
  console.log(data); // Logs the fetched data to the console
});

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
				
						 
const info = async () =&gt; {
  console.log('Hello World'); // Logs a greeting message
  const response = await fetch('https://api.example.com/data'); // Fetches data from the API
  const data = await response.json(); // Parses the response as JSON
  return data; // Returns the parsed data
};
 
info().then(data =&gt; {
  console.log(data); // Logs the fetched data to the console
});
 
					
				
			
		


Saída e Resultados
Ao executar o código acima:

Saída do Console:

    



		
		
			
			
Java
			
			Hello World
			
				
					
				
					1
				
						Hello World
					
				
			
		


  
Dados Recuperados:

    



		
		
			
			
Java
			
			
{
  "id": 1,
  "name": "Sample Data",
  "description": "This is a sample response from the API."
}
    
			
				
					
				
					1
2
3
4
5
6
7
				
						 
{
  "id": 1,
  "name": "Sample Data",
  "description": "This is a sample response from the API."
}
    
					
				
			
		


  

Explicação:

"Hello World" é registrado imediatamente, indicando o início da operação assíncrona.
Após a conclusão da fetch request e a análise do JSON, os dados reais são registrados, mostrando a recuperação bem-sucedida das informações.

Melhores Práticas

Use try...catch for Error Handling:

    



		
		
			
			
Java
			
			
const fetchData = async () =&gt; {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};
    
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
				
						 
const fetchData = async () =&gt; {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};
    
					
				
			
		


  
Evite Misturar Async/Await com .then(): Mantenha-se consistente com uma abordagem.
Trate Todas as Promises: Certifique-se de que cada Promise seja aguardada ou adequadamente tratada para evitar rejeições não tratadas.
Mantenha Async Functions Simples: Divida operações complexas em funções menores para manter a legibilidade.

Conclusão
Async and Await transformaram o cenário da asynchronous programming em JavaScript. Ao permitir que os desenvolvedores escrevam código que parece e se comporta de forma sincrônica, eles simplificam a gestão de asynchronous operations, tornando o código mais legível e fácil de manter. Adotar esses recursos modernos não apenas aprimora a qualidade do código, mas também se alinha com as melhores práticas contemporâneas do JavaScript.
Palavras-chave SEO: JavaScript Async Await, asynchronous programming, Fetch API, promises, async functions, await keyword, JavaScript best practices, handling asynchronous operations, modern JavaScript, async await tutorial
Recursos Adicionais

MDN Web Docs: Async Function
MDN Web Docs: Await
JavaScript Promises: An Introduction
ES8 Async/Await Explained
Handling Errors in Async Functions

Nota: Este artigo é gerado por IA.