В этой части учебника мы разберём что такое в JavaScript async и await, для чего нужны и как использовать, думаю будет очень интересно.
Для чего нужно в JavaScript async и await:
Если кратко говоря, то это специальный JavaScript синтаксис, для более простой работы с промисами, его надо обязательно знать для полноценной работы с асинхронным JS.
Работа в JavaScript async и await:
Для начала разберём async, его надо вставлять перед объявлением функции, таким образом вы говорите, что это функция работает асинхронно, или то что это промис, давайте разберём простой пример:
1 2 3 4 5 | async function funAsync() { return "Hello"; } funAsync().then(data => {console.log(data)}); |
Кае видите мы создали функцию, но перед ключевым словом function, мы использовали слово async, таким образом мы обозначаем что функция асинхронная и может работать как промис.
Если вы взгляните на код, ниже, вы увидите, что мы вызываем функцию, и после этого используем then, в которой передаём data, в ней и храниться то, что мы вернули во функции funAsync(), то есть слово «Hello», выводим его в консоль.
Также вы можете точно так же как и с обычными промисами, возвращать промис, или ошибку используя такой синтаксис Promise.reject(new Error("Ошибка")), но про обработку ошибок чуть ниже.
Теперь перейдём к await, оно ставиться перед функцией которое вызывается внутри асинхронной функции.
Важно:
await можно использовать только внутри функций при объявление которой использовалось ключевое слово async.
Если вы вызываете промис с await, то в таком случае программа дальше не начнёт работать, пока не выполниться промис при вызове которое использовался await.
Для наглядности, давайте покажу вам не большой пример:
1 2 3 4 5 6 7 8 9 10 11 12 | async function funAsync() { let promise = new Promise((resolve, reject) => { setTimeout(() => resolve("Hello World!"), 5000) }); let result = await promise; alert(result); } funAsync(); |
Здесь мы внутри функции создаём промис, который должен проработать пять секунд, потому что внутри есть таймер который длиться пять секунд, чуть ниже запускаем его с ключевым словом await, и ещё чуть ниже запускаем alert(), внутрь которого передаём результат нашего промиса, то есть «Hello World!».
Таким образом вся эта функция должна проработать пять секунд, так как кроме этого промиса с таймером у нас больше не чего нет. Как вы уже поняли, благодаря await, вы можете запускать промисы последовательно, внутри асинхронной функции.
Последние что мы тут рассмотрим, так это обработку ошибок, вы можете их обрабатывать тремя способами, первый как и в обычных промисах, делать условие и возвращать Promise.resolve() или Promise.reject().
Второй способ похож на первый, только вместо Promise.reject(), используем throw new Error("Ошибка"), ну и последний способ использовать синтаксис try catch, вот его пример:
1 2 3 4 5 6 7 8 9 10 | async function funAsync() { try { let response = await fetch('http://no-such-url'); } catch(err) { console.log(err); } } funAsync(); |
Тут если внутри try возникнет ошибка, то код сразу перестанет выполняться и сработает catch, внутри которого она обработается и выведет в консоль саму ошибку, ну или произойдут другие действия, тут как вы пожелаете.
Также можете использовать .сatch() как с промисами, в таком случае ошибка тоже обработается.
Вывод:
В этой части вы прочитали про что такое в JavaScript async и await, и как с ними работать, думаю вам было интересно и полезно. Если вам тут что то не понятно, то почитайте часть учебника про промисы.
Подписываетесь на соц-сети:
Оценка:
Загрузка...