Cum sa folosesti async/await in JavaScript

In this tutorial, you'll learn about Cum sa folosesti async/await in JavaScript. We cover key concepts, practical examples, and best practices.

async/await este o sintaxa moderna pentru a lucra cu operatii asincrone, facand codul mai citibil ca si cum ar fi sincron. Acest ghid iti arata cum sa-l folosesti corect.

Quick Fix

1. Declararea unei functii async

O functie async returneaza intotdeauna un Promise:

async function getGreeting(name) {
    return `Salut, ${name}!`;
}

getGreeting('Ion').then(console.log);

Salut, Ion!

2. Asteptarea cu await

await pauzeaza executia pana cand Promise-ul se rezolva:

function delay(ms) {
    return new Promise(r => setTimeout(r, ms));
}

async function demo() {
    console.log('Incepe...');
    await delay(1000);
    console.log('Dupa 1 secunda');
}

demo();

Incepe...
Dupa 1 secunda

3. Gestionarea erorilor cu try/catch

Foloseste try/catch pentru a prinde rejectiile:

async function fetchUser(id) {
    try {
        const response = await fetch(`https://api.example.com/users/${id}`);
        if (!response.ok) throw new Error('Eroare HTTP: ' + response.status);
        const user = await response.json();
        console.log('Utilizator:', user.name);
        return user;
    } catch (error) {
        console.error('Esuat:', error.message);
        return null;
    }
}

await fetchUser(1);

Utilizator: Ion

4. Executie paralela cu Promise.all si await

Nu awaita secvential operatii independente:

async function loadDashboard() {
    const [users, products, orders] = await Promise.all([
        fetch('/api/users').then(r => r.json()),
        fetch('/api/products').then(r => r.json()),
        fetch('/api/orders').then(r => r.json())
    ]);
    return { users, products, orders };
}

5. for-await-of pentru iterabile asincrone

Parcurge stream-uri sau generatoare async:

async function* generateNumbers() {
    for (let i = 1; i <= 3; i++) {
        await delay(500);
        yield i;
    }
}

async function processNumbers() {
    for await (const num of generateNumbers()) {
        console.log('Primit:', num);
    }
}

await processNumbers();

Primit: 1
Primit: 2
Primit: 3

6. Top-level await (module)

In module, await poate fi folosit direct la nivel de top:

// utils.js
const config = await fetch('/config.json').then(r => r.json());
export default config;

Prevention

• Nu awaita in bucla secvential -- foloseste Promise.all() pentru operatii paralele
• Intotdeauna inconjoara await cu try/catch
• Nu uita ca o functie async returneaza un Promise
• Top-level await functioneaza doar in module ES (nu in scripturi clasice)

Common Mistakes

1. A awaita in bucla -- for (const item of items) { await process(item) } este secvential; foloseste Promise.all(items.map(process))
2. A uita try/catch -- o exceptie intr-o functie async returneaza un Promise respins neprins
3. A returna await fara motiv -- return await x este inutil in afara try/catch
4. A nu astepta Promise.all -- const data = Promise.all([...]) returneaza un Promise, nu array-ul
5. A folosi async fara scop -- daca nu ai await in corp, functia nu trebuie sa fie async

FAQ

Construit de dezvoltatorii Doda Browser, DodaZIP si Durga Antivirus Pro. Instrumentele DodaTech se integreaza perfect cu JavaScript pentru productivitate si securitate sporite.