initial commit

1 files changed, 297 insertions, 0 deletions

diff --git a/files/uk/web/javascript/reference/global_objects/promise/then/index.html b/files/uk/web/javascript/reference/global_objects/promise/then/index.html
new file mode 100644
index 0000000000..8cbcc884fc
--- /dev/null
+++ b/files/uk/web/javascript/reference/global_objects/promise/then/index.html
@@ -0,0 +1,297 @@
+---
+title: Promise.prototype.then()
+slug: Web/JavaScript/Reference/Global_Objects/Promise/then
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Promise
+  - метод
+translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then
+---
+<div>{{JSRef}}</div>
+
+<p>Метод <code><strong>then()</strong></code> вертає об'єкт {{jsxref("Promise")}}. Він приймає два аргументи: функції зворотного виклику для випадків успішного та неуспішного проміса.</p>
+
+<div>{{EmbedInteractiveExample("pages/js/promise-then.html")}}</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>
+
+<div class="note">
+<p>Якщо один чи обидва аргументи пропущені, або надані не функції, тоді <code>then</code> не матиме обробників, але не згенерує помилок. Якщо <code>Promise</code>, на якому викликається <code>then</code>, приймає стан (<code>виконання</code> або <code>відхилення</code>), для якого <code>then</code> не має обробника, новий <code>Promise</code> створюється без додаткових обробників, просто приймаючи кінцевий стан оригінального проміса, на якому було викликано <code>then</code>.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><var>p.then(onFulfilled[, onRejected])</var>;
+
+p.then(value =&gt; {
+  // виконання
+}, reason =&gt; {
+  // відхилення
+});
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>onFulfilled</code> {{optional_inline}}</dt>
+ <dd>{{jsxref("Function","Функція")}}, що викликається, якщо <code>Promise</code> виконано. Ця функція має один аргумент, <code>значення виконання</code>. Якщо це не функція, вона внутрішньо замінюється на функцію "Identity" (вона повертає отриманий аргумент).</dd>
+ <dt><code>onRejected</code> {{optional_inline}}</dt>
+ <dd>{{jsxref("Function","Функція")}}, що викликається, якщо <code>Promise</code> відхилено. Ця функція має один аргумент, <code>причина відхилення</code>. Якщо це не функція, вона внутрішньо замінюється на функцію "Thrower" (вона викидає помилку, яку отримала в якості аргумента).</dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Як тільки {{jsxref("Promise","проміс")}} був виконаний або відхилений, відповідна функція-обробник (<code style="font-style: normal; font-weight: normal;">onFulfilled</code> або <code style="font-style: normal; font-weight: normal;">onRejected</code>) буде викликана <strong>асинхронно</strong> (запланована у активному циклі потоку). Поведінка функції-обробника відповідає спеціальному набору правил. Якщо функція-обробник:</p>
+
+<ul>
+ <li>вертає значення, проміс, повернений <code>then</code>, вирішується з поверненим значенням в якості його значення.</li>
+ <li>не вертає нічого, проміс, повернений <code>then</code>, вирішується зі значенням <code>undefined</code>.</li>
+ <li>викидає помилку, проміс, повернений <code>then</code>, відхиляється з викинутою помилкою в якості значення.</li>
+ <li>вертає вже виконаний проміс, то проміс, повернений <code>then</code>, виконується зі значенням цього проміса в якості свого значення.</li>
+ <li>вертає вже відхилений проміс, то проміс, повернений <code>then</code>, відхиляється зі значенням цього проміса в якості свого значення.</li>
+ <li>вертає інший проміс <strong>у стані очікування</strong>, вирішення/відхилення проміса, поверненого <code>then</code>, буде результатом вирішення/відхилення проміса, поверненого обробником. Також, вирішене значення проміса, поверненого <code>then</code>, буде тим самим, що й вирішене значення проміса, поверненого обробником.</li>
+</ul>
+
+<p>Наступний приклад демонструє асинхронність методу <code>then</code>.</p>
+
+<pre class="brush: js">// при використанні вирішеного проміса блок 'then' буде негайно запущений,
+// але його обробники запустяться асинхронно, як демонструє console.log
+const resolvedProm = Promise.resolve(33);
+
+let thenProm = resolvedProm.then(value =&gt; {
+    console.log("Це запускається після завершення головного стеку. Отримане й повернене значення: " + value);
+    return value;
+});
+// негайне логування значення thenProm
+console.log(thenProm);
+
+// використовуючи setTimeout, ми можемо відкласти виконання функції, поки стек не стане порожнім
+setTimeout(() =&gt; {
+    console.log(thenProm);
+});
+
+
+// порядок логування:
+// Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
+// "Це запускається після завершення головного стеку. Отримане й повернене значення: 33"
+// Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 33}</pre>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Оскільки методи <code>then</code> та {{jsxref("Promise.prototype.catch()")}} вертають проміси, їх <a href="/uk/docs/Web/JavaScript/Guide/Using_promises#Chaining">можна поєднувати в ланцюги</a> — ця операція зветься <em>композицією</em>.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Використання_метода_then">Використання метода <code>then</code></h3>
+
+<pre class="brush: js">var p1 = new Promise((resolve, reject) =&gt; {
+  resolve('Успіх!');
+  // або
+  // reject(new Error("Помилка!"));
+});
+
+p1.then(value =&gt; {
+  console.log(value); // Успіх!
+}, reason =&gt; {
+  console.error(reason); // Помилка!
+});
+</pre>
+
+<h3 id="Ланцюгування">Ланцюгування</h3>
+
+<p>Метод <code>then</code> вертає об'єкт <code>Promise</code>, що дозволяє використовувати ланцюгування.</p>
+
+<p>Якщо функція, передана у <code>then</code> в якості обробника, вертає об'єкт <code>Promise</code>, аналогічний об'єкт <code>Promise</code> буде переданий у наступний <code>then</code> ланцюга методів. Наведений нижче фрагмент імітує асинхронний код функцією <code>setTimeout</code>. </p>
+
+<pre class="brush: js">Promise.resolve('ква')
+  // 1. Отримати "ква", приєднати "драт" та вирішити це для наступного then
+  .then(function(string) {
+    return new Promise(function(resolve, reject) {
+      setTimeout(function() {
+        string += 'драт';
+        resolve(string);
+      }, 1);
+    });
+  })
+  // 2. отримати "квадрат", призначити функцію зворотного виклику для обробки цього рядка
+  // та вивести його на консоль, але не раніше повернення необробленого рядка
+  // string у наступний then
+  .then(function(string) {
+    setTimeout(function() {
+      string += 'ура';
+      console.log(string);
+    }, 1)
+    return string;
+  })
+  // 3. вивести допоміжні повідомлення щодо того, як виконується код в цьому розділі,
+  // раніше, ніж рядок string буде оброблений імітованим асинхронним кодом у
+  // попередньому блоці then.
+  .then(function(string) {
+    console.log("Останній Then:  йой... ми не створили та не повернули екземпляр проміса " +
+                "у попередньому then, тому послідовність може бути трохи " +
+                "несподіваною");
+
+    // Зауважте, що `string` не матиме частини 'ура' в цій точці. Це тому,
+    // що ми імітували його асинхронне виконання за допомогою функції setTimeout
+    console.log(string);
+  });
+
+// порядок виведення:
+// Останній Then: йой... ми не створили та не повернули екземпляр проміса у попередньому then, тому послідовність може бути трохи несподіваною
+// квадрат
+// квадратура</pre>
+
+<p>Коли значення просто повертається з обробника <code>then</code>, він поверне <code>Promise.resolve(&lt;значення, повернене обробником, що викликався&gt;)</code>.</p>
+
+<pre class="brush: js">var p2 = new Promise(function(resolve, reject) {
+  resolve(1);
+});
+
+p2.then(function(value) {
+  console.log(value); // 1
+  return value + 1;
+}).then(function(value) {
+  console.log(value + ' - Синхронне значення працює');
+});
+
+p2.then(function(value) {
+  console.log(value); // 1
+});
+</pre>
+
+<p>Виклик <code>then</code> поверне відхилений проміс, якщо функція викидає помилку або повертає відхилений проміс.</p>
+
+<pre class="brush: js">Promise.resolve()
+  .then(() =&gt; {
+    // Змушує .then() повернути відхилений проміс
+    throw new Error('О, ні!');
+  })
+  .then(() =&gt; {
+    console.log('Не викликається.');
+  }, error =&gt; {
+    console.error('Викликано функцію onRejected: ' + error.message);
+  });</pre>
+
+<p>У всіх інших випадках повертається вирішений об'єкт Promise. У наступному прикладі перший <code>then()</code> поверне значення <code>42</code>, загорнуте у вирішений проміс, незважаючи на те, що попередній проміс ланцюжка був відхилений.</p>
+
+<pre class="brush: js">Promise.reject()
+  .then(() =&gt; 99, () =&gt; 42) // onRejected вертає 42, обгорнуте у вирішений Promise
+  .then(solution =&gt; console.log('Вирішений зі значенням ' + solution)); // Вирішений зі значенням 42</pre>
+
+<p>На практиці часто бажано перехоплювати відхилені проміси, як продемонстровано нижче, а не використовувати синтаксис <code>then</code> для двох випадків.</p>
+
+<pre class="brush: js">Promise.resolve()
+  .then(() =&gt; {
+    // Змушує .then() повернути відхилений проміс
+    throw new Error('О, ні!');
+  })
+  .catch(error =&gt; {
+    console.error('Викликано функцію onRejected: ' + error.message);
+  })
+  .then(() =&gt; {
+    console.log("Мене завжди викликають, навіть якщо проміс попереднього then відхилено");
+  });</pre>
+
+<p>Ви також можете використати ланцюгування, щоб реалізувати функцію з API на промісах, на основі іншої такої функції.</p>
+
+<pre class="brush: js">function fetch_current_data() {
+  // API <a href="/uk/docs/Web/API/GlobalFetch/fetch">fetch</a>() вертає проміс. Ця функція
+  // створює схожий API, крім того, що над значенням
+  // виконанного проміса цієї функції виконується
+  // більше дій.
+  return fetch('current-data.json').then(response =&gt; {
+    if (response.headers.get('content-type') != 'application/json') {
+      throw new TypeError();
+    }
+    var j = response.json();
+    // можливо, зробити щось із j
+    return j; // значення виконання, що надається користувачу
+              // fetch_current_data().then()
+  });
+}
+</pre>
+
+<p>Якщо <code>onFulfilled</code> вертає проміс, повернене значення <code>then</code> буде вирішене чи відхилене промісом.</p>
+
+<pre class="brush: js">function resolveLater(resolve, reject) {
+  setTimeout(function() {
+    resolve(10);
+  }, 1000);
+}
+function rejectLater(resolve, reject) {
+  setTimeout(function() {
+    reject(new Error('Помилка'));
+  }, 1000);
+}
+
+var p1 = Promise.resolve('ква');
+var p2 = p1.then(function() {
+  // Повернути тут проміс, який буде вирішений зі значенням 10 через 1 секунду
+  return new Promise(resolveLater);
+});
+p2.then(function(v) {
+  console.log('вирішений', v);  // "вирішений", 10
+}, function(e) {
+  // не викликається
+  console.error('відхилений', e);
+});
+
+var p3 = p1.then(function() {
+  // Повернути тут проміс, що відхилятиметься з помилкою 'Помилка' через 1 секунду
+  return new Promise(rejectLater);
+});
+p3.then(function(v) {
+  // не викликається
+  console.log('вирішений', v);
+}, function(e) {
+  console.error('відхилений', e); // "відхилений", 'Помилка'
+});
+</pre>
+
+<h3 id="Поліфіл_у_стилі_window.setImmediate_на_основі_промісів">Поліфіл у стилі <a href="/uk/docs/Web/API/Window/setImmediate" title="Цей метод використовується для розбиття довгих у виконанні операцій та запуску функції зворотного виклику негайно після того, як переглядач завершив інші операції, такі, як події та оновлення відображення">window.setImmediate</a> на основі промісів</h3>
+
+<p>Використання методу {{jsxref("Function.prototype.bind()")}} <code>Reflect.apply</code> ({{jsxref("Reflect.apply()")}}) для створення функції (що не скасовується) у стилі setImmediate.</p>
+
+<pre class="brush: js">const nextTick = (() =&gt; {
+  const noop = () =&gt; {}; // буквально
+  const nextTickPromise = () =&gt; Promise.resolve().then(noop);
+
+  const rfab = Reflect.apply.bind; // (thisArg, fn, thisArg, [...args])
+  const nextTick = (fn, ...args) =&gt; (
+    fn !== undefined
+    ? Promise.resolve(args).then(rfab(null, fn, null))
+    : nextTickPromise(),
+    undefined
+  );
+  nextTick.ntp = nextTickPromise;
+
+  return nextTick;
+})();
+</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Специфікація</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
+
+<p>{{Compat("javascript.builtins.Promise.then")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{jsxref("Promise.prototype.catch()")}}</li>
+</ul>