path: root/files/uk/web/javascript/reference/statements/async_function/index.html

---
title: async function
slug: Web/JavaScript/Reference/Statements/async_function
tags:
  - JavaScript
  - async
  - Функція
  - приклад
translation_of: Web/JavaScript/Reference/Statements/async_function
---
<div>
<div>{{jsSidebar("Statements")}}</div>

<p><span class="seoSummary">Оголошення <code><strong>async function</strong></code> визначає <strong>асинхронну функцію</strong> — функцію, яка є об'єктом {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}}.</span> Асинхронні функції мають окремий від решти функцій порядок виконання, через <a href="/uk/docs/Web/JavaScript/EventLoop">цикл подій</a>, вертаючи неявний {{jsxref("Promise","проміс")}} в якості результату. Але синтаксис та структура коду, який використовує асинхронні функції, виглядають, як стандартні синхронні функції.</p>

<div class="noinclude">
<p>Ви також можете визначити асинхронну функцію за допомогою {{jsxref("Operators/async_function", "виразу async function", "", 1)}}.</p>
</div>
</div>

<div>{{EmbedInteractiveExample("pages/js/statement-async.html", "taller")}}</div>

<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="syntaxbox">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) {
   <em>statements</em>
}
</pre>

<h3 id="Параметри">Параметри</h3>

<dl>
 <dt><code>name</code></dt>
 <dd>Ім'я функції.</dd>
</dl>

<dl>
 <dt><code>param</code></dt>
 <dd>Ім'я аргумента, що передається у функцію.</dd>
</dl>

<dl>
 <dt><code>statements</code></dt>
 <dd>Інструкції, що складають тіло функції.</dd>
</dl>

<h3 id="Значення_що_повертається">Значення, що повертається</h3>

<p>Об'єкт <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>, який буде вирішений зі значенням, поверненим асинхронною функцією, або відхилений з винятком, не перехопленим всередині асинхронної функції.</p>

<h2 id="Опис">Опис</h2>

<p>Асинхронна функція може містити вираз {{jsxref("Operators/await", "await")}}, який призупиняє виконання функції, щоб дочекатись на вирішення об'єкта <code>Promise</code>, після чого відновлює виконання асинхронної функції та повертає вирішене значення.<br>
 <br>
 <strong>Ключове слово <code>await</code> працює тільки всередині асинхронних функцій.</strong> Якщо ви використаєте його поза межами тіла асинхронної функції, то отримаєте помилку <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>.</p>

<p>Поки асинхронна функція призупинена, функція, що її викликала, продовжує виконання (отримавши неявний проміс, повернений асинхронною функцією).</p>

<div class="note">
<p>Метою <code>async</code>/<code>await</code> є спрощення синхронного використання промісів, а також виконання певних дій над групою промісів. Як проміси схожі на структуровані зворотні виклики, так використання <code>async</code>/<code>await</code> схоже на поєднання <a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators">генераторів</a> та промісів.</p>
</div>

<h2 id="Приклади">Приклади</h2>

<h3 id="Асинхронні_функції_та_порядок_виконання">Асинхронні функції та порядок виконання</h3>

<pre class="brush: js">function resolveAfter2Seconds() {
  console.log("починається повільний проміс")
  return new Promise(resolve =&gt; {
    setTimeout(function() {
      resolve("повільний")
      console.log("повільний проміс завершено")
    }, 2000);
  });
}

function resolveAfter1Second() {
  console.log("починається швидкий проміс")
  return new Promise(resolve =&gt; {
    setTimeout(function() {
      resolve("швидкий")
      console.log("швидкий проміс завершено")
    }, 1000);
  });
}

async function sequentialStart() {
  console.log('==ПОСЛІДОВНИЙ СТАРТ==')

  // 1. Виконання доходить сюди майже миттєво
  const slow = await resolveAfter2Seconds()
  console.log(slow) // 2. це виконується 2 секунди після 1.

  const fast = await resolveAfter1Second()
  console.log(fast) // 3. це виконується 3 секунди після 1.
}

async function concurrentStart() {
  console.log('==КОНКУРЕНТНИЙ СТАРТ з await==')
  const slow = resolveAfter2Seconds() // запускає таймер негайно
  const fast = resolveAfter1Second() // запускає таймер негайно

  // 1. Виконання доходить сюди майже миттєво
  console.log(await slow) // 2. це виконується 2 секунди після 1.
  console.log(await fast) // 3. це виконується 2 секунди після 1., одразу після 2., оскільки швидкий вже вирішений
}

function concurrentPromise() {
  console.log('==КОНКУРЕНТНИЙ СТАРТ з Promise.all==')
  return Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then((messages) =&gt; {
    console.log(messages[0]) // повільний
    console.log(messages[1]) // швидкий
  });
}

async function parallel() {
  console.log('==ПАРАЛЕЛЬНИЙ з await Promise.all==')

  // Починає 2 "роботи" паралельно та чекає, поки обидві не завершаться
  await Promise.all([
      (async()=&gt;console.log(await resolveAfter2Seconds()))(),
      (async()=&gt;console.log(await resolveAfter1Second()))()
  ])
}

// Ця функція не обробляє помилки. Дивіться застереження нижче!
function parallelPromise() {
  console.log('==ПАРАЛЕЛЬНИЙ з Promise.then==')
  resolveAfter2Seconds().then((message)=&gt;console.log(message))
  resolveAfter1Second().then((message)=&gt;console.log(message))
}

sequentialStart() // через 2 секунди виводить "повільний", далі через ще 1 секунду "швидкий"

// чекає, поки попередній завершиться
setTimeout(concurrentStart, 4000) // через 2 секунди виводить "повільний", а потім "швидкий"

// знову чекає
setTimeout(concurrentPromise, 7000) // такий самий, як і concurrentStart

// знову чекає
setTimeout(parallel, 10000) // справді паралельний: через 1 секунду виводить "швидкий", потім ще через 1 секунду "повільний"

// знову чекає
setTimeout(parallelPromise, 13000) // такий самий, як і parallel
</pre>

<h4 id="await_та_паралелізм"><code>await</code> та паралелізм</h4>

<p>У <code>sequentialStart</code> виконання відкладається на 2 секунди для першого <code>await</code>, а потім ще на секунду для другого <code>await</code>. Другий таймер не створюється, поки перший не завершиться, отже, код завершує виконання через 3 секунди.</p>

<p>У <code>concurrentStart</code> обидва таймери створюються і потім очікуються у <code>await</code>. Таймери виконуються конкурентно, це означає, що код завершує виконання через 2, а не через 3 секунди, тобто, як найповільніший таймер.<br>
 Однак, виклики <code>await</code> все одно запускаються один за одним, це означає, що другий <code>await</code> чекатиме, поки перший не завершиться. У цьому випадку результат швидшого таймера обробляється після повільнішого.</p>

<p>Якщо ви бажаєте виконувати дві або більше робіт паралельно, ви маєте використовувати <code>await Promise.all([job1(), job2()])</code>, як це показано у прикладі <code>parallel</code>.</p>

<div class="warning">
<h4 id="asyncawait_проти_Promisethen_та_обробка_помилок"><code>async</code>/<code>await</code> проти Promise#then та обробка помилок</h4>

<p>Більшість асинхронних функцій також можна написати як звичайні функції, що використовують проміси. Однак, асинхронні функції менш каверзні, коли доходить до обробки помилок.</p>

<p>І <code>concurrentStart</code>, і <code>concurrentPromise</code> функціонально еквівалентні:</p>

<ul>
 <li>У <code>concurrentStart</code>, якщо будь-який з викликів з <code>await</code>-ом зазнає невдачі, виняток буде автоматично перехоплений, виконання асинхронної функції перерветься, а помилка спливе наверх через неявний проміс, що повертається.</li>
 <li>Щоб те саме сталось у випадку з Promise, функція має потурбуватись щодо повернення об'єкту <code>Promise</code>, який захопить завершення функції. У <code>concurrentPromise</code> це означає повернення проміса з <code>Promise.all([]).then()</code> через <code>return</code>. До речі, попередня версія цього прикладу забула це зробити!</li>
</ul>

<p>Однак, асинхронні функції все ж можуть ковтати помилки.<br>
 Візьміть для прикладу асинхронну функцію <code>parallel</code>. Якби вона не мала <code>await</code> (чи <code>return</code>) для повернення результату виклику <code>Promise.all([])</code>, будь-яка помилка не спливала б.<br>
 В той час, як приклад <code>parallelPromise</code> виглядає простішим, він взагалі не обробляє помилки! Для цього знадобилося б схожа конструкція <code>return </code><code>Promise.all([])</code>.</p>
</div>

<h3 id="Заміна_ланцюжка_промісів_на_асинхронну_функцію">Заміна ланцюжка промісів на асинхронну функцію</h3>

<p>API, який вертає {{jsxref("Promise")}}, створить ланцюжок промісів, і це розбиває функцію на багато частин. Розглянемо наступний код:</p>

<pre class="brush: js">function getProcessedData(url) {
  return downloadData(url) // вертає проміс
    .catch(e =&gt; {
      return downloadFallbackData(url) // вертає проміс
    })
    .then(v =&gt; {
      return processDataInWorker(v) // вертає проміс
    })
}
</pre>

<p>його можна переписати єдиною асинхронною функцією наступним чином:</p>

<pre class="brush: js">async function getProcessedData(url) {
  let v
  try {
    v = await downloadData(url)
  } catch(e) {
    v = await downloadFallbackData(url)
  }
  return processDataInWorker(v)
}
</pre>

<p>У наведеному вище прикладі немає оператора <code>await</code> після ключового слова <code>return</code>, тому що повернене значення <code>async function</code> неявно загортається у {{jsxref("Promise.resolve")}}.</p>

<div class="blockIndicator note">
<h4 id="return_await_promiseValue_проти_return_promiseValue"><code>return await promiseValue;</code> проти <code>return promiseValue;</code></h4>

<p>Неявне загортання повернених значень у {{jsxref("Promise.resolve")}} не означає, що <code>return await promiseValue;</code> є функціонально еквівалентним <code>return promiseValue;</code></p>

<p>Розглянемо наступну переробку наведеного вище коду, яка вертає null, якщо <code>processDataInWorker</code> відхиляється з помилкою:</p>

<pre class="brush: js">async function getProcessedData(url) {
  let v;
  try {
    v = await downloadData(url)
  } catch(e) {
    v = await downloadFallbackData(url)
  }
  try {
    return await processDataInWorker(v) // Зауважте `return await` у порівнянні з `return`
  } catch (e) {
    return null
  }
}
</pre>

<p>Варіант <code>return processDataInWorker(v);</code> спричинив би відхилення об'єкта {{jsxref("Promise")}}, поверненого функцією, замість вирішення його зі значенням <code>null</code>, якщо <code>processDataInWorker(v)</code> відхилено.</p>

<p>Це висвітлює тонку різницю між <code>return foo;</code> та <code>return await foo;</code> — <code>return foo;</code> негайно вертає <code>foo</code> і ніколи не викидає помилку, навіть якщо <code>foo</code> є промісом, який відхиляється. <code>return await foo;</code> <em>чекатиме</em> на вирішення чи відхилення <code>foo</code>, якщо це проміс, і викидає помилку <strong>до повернення</strong>, якщо його відхилено.</p>
</div>

<h2 id="Специфікації">Специфікації</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Специфікація</th>
   <th scope="col">Статус</th>
   <th scope="col">Коментар</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td>Початкове визначення у ES2017.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES8', '#sec-async-function-definitions', 'async function')}}</td>
   <td>{{Spec2('ES8')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>

<div>


<p>{{Compat("javascript.statements.async_function")}}</p>
</div>

<h2 id="Див._також">Див. також</h2>

<ul>
 <li>{{jsxref("Operators/async_function", "вираз асинхронної функції")}}</li>
 <li>Об'єкт {{jsxref("AsyncFunction")}}</li>
 <li>{{jsxref("Operators/await", "await")}}</li>
 <li><a href="http://innolitics.com/10x/javascript-decorators-for-promise-returning-functions/">"Decorating Async Javascript Functions" на "innolitics.com"</a></li>
</ul>