Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Ключевые слова async и await
Если перед объявлением функции указать ключевое слово async
, то функция всегда будет возвращать объект Promise
:
async function func() {
return 10;
}
func().then( function(value) {
console.log(value); // 10
});
В этом примере значение 10
будет обернуто в объект Promise
со статусом fulfilled
автоматически. Мы можем явным образом вернуть объект Promise
:
async function func() {
return new Promise( function(resolve, reject) {
setTimeout( function() {
resolve('test');
}, 500);
});
}
func().then( function(value) {
console.log(value); // test
});
Внутри таких функций доступно ключевое слово await
, которое позволяет дождаться завершения операции асинхронно и получить ее результат:
async function func() {
const myPromise = new Promise( function(resolve, reject) {
setTimeout( function() {
resolve('test');
}, 500);
});
let result = await myPromise;
console.log(result); // test
}
func();
console.log('После вызова функции');
В окне консоли получим сообщения в следующем порядке:
После вызова функции
test
Такая последовательность доказывает, что код внутри функции выполняется асинхронно. Пока ожидается завершение операции, мы можем параллельно выполнять какую-либо другую операцию. При этом код внутри функции выполняется последовательно.
await
нельзя использовать внутри обычных функций или вне функций.Если объект Promise
завершается со статусом rejected
, то будет сгенерировано исключение. Для обработки исключения можно использовать конструкцию try...catch
:
async function func() {
const myPromise = new Promise( function(resolve, reject) {
setTimeout( function() {
reject( new Error('Описание ошибки') );
}, 500);
});
try {
let result = await myPromise;
console.log(result); // Инструкция выполнена не будет
} catch (e) {
console.log(e); // Error: Описание ошибки
}
}
func();
Учитывая, что функция возвращает объект Promise
, мы можем обработать исключение с помощью метода catch()
:
async function func() {
const myPromise = new Promise( function(resolve, reject) {
setTimeout( function() {
reject( new Error('Описание ошибки') );
}, 500);
});
let result = await myPromise;
console.log(result); // Инструкция выполнена не будет
}
func().catch( function(e) {
console.log(e); // Error: Описание ошибки
});
Давайте переделаем код функции sendReqGET()
из листинга 3.13 и используем ключевые слова async
и await
вместо методов then()
и catch()
(листинг 3.14).
Листинг 3.14. Ключевые слова async
и await
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>Ключевые слова async и await</title>
</head>
<body>
<div class="container my-3">
<form action="ajax.php" method="GET" onsubmit="return false;">
<div class="form-group">
<input type="text" class="form-control" id="txt1">
</div>
<div class="form-group">
<input type="text" class="form-control" id="txt2">
</div>
<button type="button" class="btn btn-primary"
id="btnSend">Отправить методом GET</button>
</form>
</div>
<div class="container my-3">
<div id="div_ajax"></div>
</div>
<script>
async function sendReqGET() {
if ( !window.fetch ) {
window.alert('Ваш браузер не поддерживает Fetch API');
return;
}
let txt1 = document.getElementById('txt1').value;
let txt2 = document.getElementById('txt2').value;
if (txt1 === '' || txt2 === '') {
window.alert('Не заполнено поле');
return;
}
let url = '/ajax.php?txt1=' + encodeURIComponent(txt1);
url += '&txt2=' + encodeURIComponent(txt2);
document.getElementById('div_ajax').innerHTML = 'Загрузка...';
try {
let response = await fetch(url);
if ( !response.ok ) {
throw new Error('Статус: ' + response.status);
}
let json = await response.json();
const msg = json.txt1 + '<br>' + json.txt2;
document.getElementById('txt1').value = '';
document.getElementById('txt2').value = '';
document.getElementById('div_ajax').innerHTML = msg;
} catch(e) {
document.getElementById('div_ajax').innerHTML = 'Ошибка: ' + e;
}
}
document.getElementById('btnSend').onclick = sendReqGET;
</script>
</body>
</html>
Помощь сайту
ЮMoney (Yandex-деньги): 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов