Suggest an edit

Improve this article

Refine the answer for “async/await for asynchronous requests”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 1. What is a Promise

A `Promise` is an object that represents the **result of an asynchronous operation**, which can end up:

- succeeding (`fulfilled`) -> returning a value
- failing (`rejected`)
- or being in progress (`pending`)

### Example with Promise:

```javascript
function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('Data received'), 1000);
  });
}

getData().then(result => console.log(result)); // "Data received"
```

> Here we manually create a promise and handle the result via `.then()`.

---

## 2. What async/await does

- `async` turns a function **into a function that always returns a promise**.
- `await` pauses code execution **until the promise settles**.

### Example with async/await:

```javascript
async function getData() {
  const result = await new Promise(resolve => {
    setTimeout(() => resolve('Data received'), 1000);
  });
  console.log(result);
}

getData(); // "Data received"
```

> The code becomes simpler, more readable, and looks almost synchronous. But under the hood, it's still the same promises.

---

## Example 2. Comparing Promise vs async/await

### Promise chain:

```javascript
fetch('https://api.example.com/user')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));
```

### async/await:

```javascript
async function loadUser() {
  try {
    const res = await fetch('https://api.example.com/user');
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

loadUser();
```

> Same thing, but without the "`.then()` ladder", it reads like ordinary sequential code.

---

## 3. Key features of async/await

### Simplifies reading the code

Asynchronous operations can be written **in logical order**, rather than as nested `.then()` calls.

### Works only inside an async function

```javascript
await fetch('...'); // Error - await can only be used inside an async function
```

---

## Example 3. Using it with several promises

```javascript
async function getData() {
  const user = await fetch('/user').then(r => r.json());
  const posts = await fetch('/posts').then(r => r.json());

console.log(user, posts);
}
```

> Here the second request runs **only after the first one**, which is sometimes inefficient.

If the requests do not depend on each other, run them in parallel:

```javascript
async function getData() {
  const [user, posts] = await Promise.all([
    fetch('/user').then(r => r.json()),
    fetch('/posts').then(r => r.json())
  ]);

console.log(user, posts);
}
```

> `Promise.all()` lets you run several asynchronous operations at the same time.

---

## 4. Error handling

### Via try...catch (recommended):

```javascript
async function getData() {
  try {
    const res = await fetch('https://wrong-url');
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error('Request error:', err);
  }
}
```

### Via .catch() (less convenient):

```javascript
getData().catch(err => console.error(err));
```

---

## 5. Returning a value from an async function

```javascript
async function sum(a, b) {
  return a + b;
}

const result = sum(2, 3);
console.log(result); // Promise { 5 }
```

> `async` **always returns a Promise**, even if you explicitly return a plain value.

To get the result:

```javascript
sum(2, 3).then(console.log); // 5
```

```javascript
const result = await sum(2, 3);
console.log(result); // 5
```

---

## 6. Differences between async/await and Promise.then

| Criterion | `Promise / .then()` | `async/await` |
|---|---|---|
| Syntax | `.then()` chains | Sequential, like synchronous code |
| Error handling | `.catch()` | `try...catch` |
| Readability | Sometimes hard due to nesting | Very high |
| Parallel execution | `Promise.all()` | Same |
| Return value | Implicit via `.then()` | Via `return` inside an async function |
| Function type | Regular | Always returns a `Promise` |

---

## Example 4. Visual comparison

### Promise chain:

```javascript
getUser()
  .then(user => getPosts(user.id))
  .then(posts => getComments(posts[0].id))
  .then(comments => console.log(comments))
  .catch(err => console.error(err));
```

### async/await:

```javascript
async function loadComments() {
  try {
    const user = await getUser();
    const posts = await getPosts(user.id);
    const comments = await getComments(posts[0].id);
    console.log(comments);
  } catch (err) {
    console.error(err);
  }
}
```

> async/await makes asynchronous logic **step by step and predictable**, especially when you need to handle an error at any stage.

---

## In short:

> `async/await` is "syntactic sugar" over `Promise` that lets you write asynchronous code **as if it were synchronous**, while under the hood the same **promises** are still at work.

A formula to remember:
`async` -> the function returns a Promise
`await` -> "wait until the Promise settles"

Markdown · drag & drop images · ⌘B / ⌘I shortcuts695 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.