Ключевые слова 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

Такая последовательность доказывает, что код внутри функции выполняется асинхронно. Пока ожидается завершение операции, мы можем параллельно выполнять какую-либо другую операцию. При этом код внутри функции выполняется последовательно.

Примечание

Если объект 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>

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов