Modern JS Cheatsheet / Памятка по современному JavaScript: Async Await

### Async Await

a_popova 03.10.17 в 15:12

В дополнение к [Промисам](#promises), появился новый синтаксис, который можно встретить для обработки асинхронного кода, который называется *async / await*.

a_popova 03.10.17 в 15:12

Целью функций async/await является упрощение поведения при использовании промисов синхронно и выполнение какой-либо обработки группой промисов. Подобно тому, как промисы похожи на структурированные обратные вызовы, async/await подобны комбинации генераторов и промисов. ([Ссылка: MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function))

a_popova 03.10.17 в 15:13

> **Примечание:** Вы должны понимать, что такое промисы и как они работают перед тем, как пытаться понять async / await, т.к. они основаны на промисах.

a_popova 03.10.17 в 15:13

> **Примечание 2:** [*await* должен использоваться в *async* функции](https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9#f3f0), что означает, что вы не можете использовать await в верхнем уровне вашего кода, т.к. он не находится внутри async-функции.

a_popova 03.10.17 в 15:14

#### Пример кода

a_popova 03.10.17 в 19:50

```js
async function getGithubUser(username) { // ключевое слово async позволяет использование await в функции и означает, что функция возвращает promise
try { // Вот так обрабатываются ошибки с помощью async / await
const response = await fetch(`https://api.github.com/users/${username}`); // "синхронное" ожидание promise перед переходом на новую строку
return response.json();
} catch (err) {
alert(err);
}
}

getGithubUser('mbeaudru').then(user => console.log(user)); // логирование пользователя - не может использовать синтаксис await, т.к. этот код не находится внутри async-функции
```

a_popova 03.10.17 в 19:52

#### Объяснение с помощью примера кода

a_popova 03.10.17 в 15:15

*Async / Await* построены на промисах, но они позволяют использовать более императивный стиль кода.

a_popova 03.10.17 в 19:55

Оператор *async* превращает функцию в *промис*, в котором можно использовать оператор *await*.

a_popova 03.10.17 в 20:09

```js
async function myFunc() {
// можно использовать оператор await, т.к. это async-функция
try {
return "Привет, мир!";
} catch(e) {
throw new Error();
}
}

myFunc().then(msg => console.log(msg)) // "Привет, мир!" -- myFunc превращается в промис из-за оператора async
```

a_popova 03.10.17 в 20:18

Когда достигается оператор *return* async-функции, промис выполняется с возвращаемым значением. Если внутри async-функции выпадает ошибка, состояние промиса изменится на *rejected*.

a_popova 03.10.17 в 20:22

Оператор *await* используется для ожидания выполнения *Промиса* и может быть использован только в теле *async*-функции. При этом выполнение кода приостанавливается, пока не будет выполнен промис.

a_popova 03.10.17 в 20:03

> **Примечание :** *fetch* -- это Промис, который позволяет выполнить AJAX-запрос.

a_popova 03.10.17 в 20:26

Давайте сначала посмотрим, как мы можем получить пользователя github с помощью промисов:

a_popova 03.10.17 в 20:26

```js
function getGithubUser(username) {
return new Promise((resolve, reject) => {
fetch(`https://api.github.com/users/${username}`)
.then(response => {
const user = response.json();
resolve(user);
})
.catch(err => reject(err));
})
}

getGithubUser('mbeaudru')
.then(user => console.log(user))
.catch(err => console.log(err));
```

a_popova 03.10.17 в 20:27

Вот эквивалент с использованием *async / await*:

a_popova 03.10.17 в 20:27

```js
async function getGithubUser(username) { // превращение в промис + разрешено использование ключевого слова await
try { // Мы обрабатываем ошибки в асинхронной функции с помощью try / catch
const response = await fetch(`https://api.github.com/users/${username}`); // Выполнение останавливается здесь, пока не закончится выполнение промиса.
const user = response.json();
return user; // эквивалент разрешения промиса getGithubUser со значением user.
} catch (err) {
throw new Error(err); // эквивалент отклонения промиса getGithubUser со значением err.
}
}

getGithubUser('mbeaudru')
.then(user => console.log(user))
.catch(err => console.log(err));
```

a_popova 03.10.17 в 20:30

Синтаксис *async / await* особенно удобен, когда вам нужно связывать взаимозависимые промисы.

a_popova 03.10.17 в 20:30

Например, вам нужно получить token для того чтобы получить публикацию в блоге в базе данных, а затем информацию об авторе:

a_popova 03.10.17 в 20:31

```js
async function fetchPostById(postId) {
try {
const token = await fetch('token_url');
const post = await fetch(`/posts/${postId}?token=${token}`);
const author = await fetch(`/users/${post.authorId}`);

post.author = author;
return post;
} catch(e) {
throw new Error(e);
}
}

fetchPostById('gzIrzeo64')
.then(post => console.log(post))
.catch(err => console.log(err));
```

a_popova 03.10.17 в 20:31

> **Примечание :** Как вы видите, *try / catch* нужны для обработки ошибок. Но если вы используете *роутинг в express*, вы можете использовать middleware, чтобы избежать необходимости обработки ошибок и иметь приятный для чтения код. Смотрите [эту статью Alex Bazhenov](https://medium.com/@Abazhenov/using-async-await-in-express-with-node-8-b8af872c0016) для получения дополнительной информации.

a_popova 03.10.17 в 20:34

#### Дополнительные материалы

a_popova 03.10.17 в 20:34

- [Async/Await - JavaScript.Info](https://javascript.info/async-await)
- [ES7 Async/Await](http://rossboucher.com/await/#/)
- [6 причин, почему Async/Await в JavaScript заменит Промисы](https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9)
- [awaits в JavaScript](https://dev.to/kayis/javascript-awaits)
- [Использование Async Await в Express с Node 8](https://medium.com/@Abazhenov/using-async-await-in-express-with-node-8-b8af872c0016)
- [Функция Async](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)
- [Await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await)

a_popova 03.10.17 в 20:37