~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/js/30js-async-await

# JavaScript Async/Await Patterns

Write asynchronous code that looks synchronous.

## Basic Async/Await

```javascript
async function fetchData() {
  let response = await fetch("/api/data");
  let data = await response.json();
  return data;
}

fetchData().then(data => console.log(data));
```

## Error Handling

```javascript
async function getData() {
  try {
    let response = await fetch("/api/data");
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return await response.json();
  } catch (error) {
    console.error("Error:", error.message);
    return null;
  }
}
```

## Sequential vs Parallel

**Sequential** — when each step depends on the previous result:

```javascript
async function sequential() {
  let user = await fetchUser();
  let posts = await fetchPosts(user.id);
  return { user, posts };
}
```

**Parallel** — when operations are independent:

```javascript
async function parallel() {
  let [user, posts] = await Promise.all([fetchUser(), fetchPosts()]);
  return { user, posts };
}
```

**Remember:** Parallel is faster when operations don't depend on each other.

## API Service Example

```javascript
class ApiService {
  #baseUrl;
  #cache = new Map();
  constructor(baseUrl) { this.#baseUrl = baseUrl; }

async get(endpoint) {
    let url = `${this.#baseUrl}${endpoint}`;
    if (this.#cache.has(url)) return this.#cache.get(url);
    let response = await fetch(url);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    let data = await response.json();
    this.#cache.set(url, data);
    return data;
  }

async post(endpoint, body) {
    let response = await fetch(`${this.#baseUrl}${endpoint}`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(body)
    });
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return await response.json();
  }
}
```

## Batch Processing

```javascript
async function batchProcess(items, batchSize = 10) {
  let results = [];
  for (let i = 0; i < items.length; i += batchSize) {
    let batch = items.slice(i, i + batchSize);
    let batchResults = await Promise.all(batch.map(item => processItem(item)));
    results.push(...batchResults);
  }
  return results;
}
```

## Retry and Timeout

```javascript
function withRetry(fn, maxAttempts = 3, delay = 1000) {
  return async function(...args) {
    for (let i = 1; i <= maxAttempts; i++) {
      try { return await fn(...args); }
      catch (error) {
        if (i === maxAttempts) throw error;
        await new Promise(r => setTimeout(r, delay));
      }
    }
  };
}

function withTimeout(promise, ms = 5000) {
  return Promise.race([
    promise,
    new Promise((_, reject) => setTimeout(() => reject(new Error("Timeout")), ms))
  ]);
}
```

## Best Practices

- **Use async/await** — Cleaner than `.then()`
- **Handle errors with try/catch** — Always catch errors
- **Use `Promise.all()` for parallel** — Don't await sequentially
- **Avoid unnecessary awaits** — Don't await synchronous values

## Common Mistakes

- **Forgetting to `await`** — Returns promise instead of value
- **Missing error handling** — Unhandled rejections
- **Overusing `await`** — Sequential when parallel is possible
- **Awaiting in loops** — Use `Promise.all()` instead

No changes yet

cancel