⏱️7 min read · 1,332 words
📋 Table of Contents
O que é assíncrono/espera?
Assíncrono/aguarda
é a sintaxe mais limpa do JavaScript para trabalhar com operações assíncronas – solicitações de rede, E/S de arquivos, consultas de banco de dados, temporizadores. Introduzido no ES2017 (ES8), faz com que o código assíncrono seja lido como código síncrono:— marca uma função como assíncrona; sempre retorna uma promessa
async— pausa a execução dentro de uma função assíncrona até que uma promessa seja estabelecidaawaitVisão principal:
async/await é construído sobre Promises.é equivalente a
await somePromise. Mesmo mecanismo, sintaxe mais limpa.somePromise.then(result => ...)Promessas Primeiro: A FundaçãoAntes de async/await, você encadeou Promises com
. Entender isso faz com que async/await clique:.then()📋 Copiar
// Promise chain — works, but nests deeply
fetch('https://api.example.com/users/1')
.then(response => response.json())
.then(user => fetch('https://api.example.com/posts?userId=' + user.id))
.then(response => response.json())
.then(posts => console.log(posts))
.catch(error => console.error('Failed:', error));
// Same logic with async/await — flat and readable
async function getUserPosts(userId) {
const userRes = await fetch('https://api.example.com/users/' + userId);
const user = await userRes.json();
const postsRes = await fetch('https://api.example.com/posts?userId=' + user.id);
const posts = await postsRes.json();
return posts;
}📋 Copiar
async function getUser(id) {
const response = await fetch('https://jsonplaceholder.typicode.com/users/' + id);
if (!response.ok) throw new Error('HTTP error: ' + response.status);
return response.json();
}
const user = await getUser(1);
console.log(user.name); // "Leanne Graham"função sempre retorna uma promessa.asyncsó funciona dentro de funções assíncronas. Se uma promessa aguardada for rejeitada, ela se propagará como um erro lançado.awaitTratamento de erros com try/catch
📋 Copiar
async function fetchUserData(userId) {
try {
const response = await fetch('/api/users/' + userId);
if (!response.ok) throw new Error('Server error: ' + response.status);
return await response.json();
} catch (error) {
if (error.name === 'TypeError') {
console.error('Network error:', error.message);
} else {
console.error('API error:', error.message);
}
return null;
}
}
// Per-await error handling
async function loadDashboard() {
const user = await fetchUserData(1).catch(() => null);
const stats = await fetchStats().catch(() => ({ views: 0 }));
const alerts = await fetchAlerts().catch(() => []);
return { user, stats, alerts };
}Esperas sequenciais executadas uma de cada vez. Usar
para disparar várias promessas simultaneamente:Promise.all()📋 Copiar
// ❌ Sequential — 3 seconds total (1s + 1s + 1s)
async function loadSequential() {
const users = await fetchUsers(); // waits 1s
const posts = await fetchPosts(); // waits another 1s
const photos = await fetchPhotos(); // waits another 1s
return { users, posts, photos };
}
// ✅ Parallel — ~1 second total (all fire at once)
async function loadParallel() {
const [users, posts, photos] = await Promise.all([
fetchUsers(),
fetchPosts(),
fetchPhotos()
]);
return { users, posts, photos };
}
// Promise.allSettled — get results even if some fail
async function loadWithFallbacks() {
const results = await Promise.allSettled([fetchUsers(), fetchPosts(), fetchPhotos()]);
return results.map(r => r.status === 'fulfilled' ? r.value : null);
}
// Promise.race — first wins (timeout pattern)
async function fetchWithTimeout(url, ms = 5000) {
const timeout = new Promise((_, reject) =>
setTimeout(() => reject(new Error('Request timed out')), ms)
);
return Promise.race([fetch(url), timeout]);
}📋 Copiar
const userIds = [1, 2, 3, 4, 5];
// ❌ forEach DOES NOT await — requests fire but nothing waits
userIds.forEach(async (id) => {
const user = await fetchUser(id); // fires immediately without waiting
console.log(user.name);
});
// ✅ for...of — sequential (each awaits before next starts)
for (const id of userIds) {
const user = await fetchUser(id);
console.log(user.name);
}
// ✅ Promise.all + map — parallel (all fire simultaneously)
const users = await Promise.all(userIds.map(id => fetchUser(id)));
users.forEach(u => console.log(u.name));
// ✅ Batched parallel (avoid overwhelming the server)
async function batchProcess(ids, batchSize = 5) {
const results = [];
for (let i = 0; i < ids.length; i += batchSize) {
const batch = ids.slice(i, i + batchSize);
const batchResults = await Promise.all(batch.map(id => fetchUser(id)));
results.push(...batchResults);
}
return results;
}IIFE assíncrono
📋 Copiar
// Async IIFE — top-level await not available? Use this
(async () => {
const config = await loadConfig();
await startServer(config);
console.log('Server running on port', config.port);
})();📋 Copiar
async function* streamLargeDataset(url) {
let page = 1;
while (true) {
const response = await fetch(url + '?page=' + page);
const data = await response.json();
if (!data.items.length) break;
yield data.items;
page++;
}
}
// Consume with for-await-of
for await (const items of streamLargeDataset('/api/records')) {
processItems(items);
}📋 Copiar
async function fetchWithRetry(url, options = {}, retries = 3, backoff = 1000) {
try {
const res = await fetch(url, options);
if (!res.ok && res.status >= 500 && retries > 0) {
await new Promise(r => setTimeout(r, backoff));
return fetchWithRetry(url, options, retries - 1, backoff * 2);
}
return res;
} catch (err) {
if (retries > 0) {
await new Promise(r => setTimeout(r, backoff));
return fetchWithRetry(url, options, retries - 1, backoff * 2);
}
throw err;
}
}Esquecendo
- — você recebe uma promessa pendente, não um valor
awaitassíncrono em forEach - — usarou
for...ofem vez dissoPromise.allEspera sequencial quando o paralelo é possível - — serialização desnecessária prejudica o desempenhoErros de deglutição
- – blocos de captura vazios escondem bugs. Registrar ou relançar.📋 Copiar
// ❌ Missing await — user is a Promise, not an object
async function broken() {
const user = fetchUser(1); // missing await!
console.log(user.name); // undefined — user is a Promise
}
// ✅ Fixed
async function fixed() {
const user = await fetchUser(1);
console.log(user.name); // "Leanne Graham"
}Um cliente API pronto para produção com tempo limite e tratamento de erros:
📋 Copiar
class ApiClient {
constructor(baseUrl, options = {}) {
this.baseUrl = baseUrl;
this.timeout = options.timeout || 10000;
}
async request(path, options = {}) {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), this.timeout);
try {
const response = await fetch(this.baseUrl + path, {
...options,
signal: controller.signal,
headers: { 'Content-Type': 'application/json', ...options.headers }
});
clearTimeout(timeoutId);
if (!response.ok) {
const err = await response.json().catch(() => ({}));
throw Object.assign(new Error(err.message || 'HTTP ' + response.status), {
status: response.status, body: err
});
}
return response.json();
} catch (error) {
clearTimeout(timeoutId);
if (error.name === 'AbortError') throw new Error('Request timed out');
throw error;
}
}
async get(path) { return this.request(path); }
async post(path, body) { return this.request(path, { method: 'POST', body: JSON.stringify(body) }); }
}
const api = new ApiClient('https://api.example.com', { timeout: 8000 });
const user = await api.get('/users/1');Async/await é um dos padrões JS modernos mais importantes. Explorar
por que o TypeScript torna os padrões assíncronos ainda mais seguros, ou verifiquetodos os guias de programaçãopara mergulhos mais profundos.Perguntas Frequentes
O que é assíncrono/espera?
Açúcar sintático sobre promessas.
marca uma função como assíncrona;asyncpausa até que uma promessa seja estabelecida. Faz com que o código assíncrono seja lido como código de sincronização.awaitDiferença entre async/await e promessas?
Mesmo mecanismo, sintaxe mais limpa. Use async/await para facilitar a leitura; use promessas brutas para
,Promise.all().Promise.race()Como lidar com erros?
Use blocos try/catch. Ou acrescente
para promessas individuais esperadas..catch()Como executar operações em paralelo?
– dispara todos simultaneamente.
await Promise.all([p1, p2, p3])assíncrono/espera em forEach?
Não — forEach ignora retornos de chamada assíncronos. Usar
oufor...of.Promise.all(arr.map(async x => ...))O que é esperar de nível superior?
ES2022 — use await no nível superior do módulo sem wrapper assíncrono. Apenas módulos ES.
ES2022 — use await at module top level without async wrapper. ES modules only.
🔗 Share this article
✍️ Leave a Comment