Различия

Показаны различия между двумя версиями страницы.

--- objavlenie_promisi [2024/01/11 07:43]
tro
+++ objavlenie_promisi [2024/01/25 19:27] (текущий)
tro
@@ Строка 5: / Строка 5: @@
   * исполнен (resolve)
   * отклонен (reject)
-===== обявление промиса =====
+===== обявление промиса (Promise) =====
+При створенні промісу всередині буде відразу вконана та дія. Сюди загоняємо те що повинно буде виконано у промісі.
 <code>
 const myPromise = new Promise ((resolve, reject)=>{
@@ Строка 12: / Строка 13: @@
 </code>
 ===== Обробка резуьтата промиса (.then) =====
+В методах then прописуємо що буде виконано коли настане подія вдалого,невдалого або просто факта виконання проміса
+<code>
+promise.then(onFullFild).catch(onReject);
+</code>
 <code>
 myPromse
@@ Строка 48: / Строка 53: @@
 У змінну promise буде записаний проміс (об'єкт) у стані pending, а через дві секунди, щойно буде викликаний resolve() або reject(), проміс перейде у стан fulfilled або rejected, і ми зможемо його обробити. Якщо функції onResolve і onReject містять складну логіку, їх для зручності оголошують як зовнішні функції і передають у метод then() за ім'ям.
+===== Обробка помилки catch() =====
+На практиці в методі then() обробляють тільки успішне виконання промісу.
+Помилку його виконання обробляють у спеціальному методі **catch()** для «відловлювання» помилок.
+<code>
+const isSuccess = true;
+// Create promise
+const promise = new Promise((resolve, reject) => {
+  setTimeout(() => {
+    if (isSuccess) {
+      resolve("Success! Value passed to resolve function");
+    } else {
+      reject("Error! Error passed to reject function");
+    }
+  }, 2000);
+});
+// Registering promise callbacks
+promise
+  .then(value => {
+    console.log(value); // "Success! Value passed to resolve function"
+  })
+  .catch(error => {
+    console.log(error); // "Error! Error passed to reject function"
+  });
+</code>
+===== Метод finally() =====
+метод може бути корисним, якщо необхідно виконати код після того, як проміс буде виконаний незалежно від результату (fulfilled або rejected).
+Колбек-функція не отримає жодних аргументів, оскільки неможливо визначити, чи був проміс виконаний або відхилений. Тут буде виконуватися код, який необхідно запустити в будь-якому разі.
+<code>
+promise
+	.then(value => {
+	  // Promise fulfilled
+	})
+	.catch(error => {
+	  // Promise rejected
+	})
+	.finally(() => {
+	  // Promise fulfilled or rejected
+	});
+</code>
+<code>
+const isSuccess = true;
+// Create promise
+const promise = new Promise((resolve, reject) => {
+  setTimeout(() => {
+    if (isSuccess) {
+      resolve("Success! Value passed to resolve function");
+    } else {
+      reject("Error! Error passed to reject function");
+    }
+  }, 2000);
+});
+// Registering promise callbacks
+promise
+  .then(value => console.log(value)) // "Success! Value passed to resolve function"
+  .catch(error => console.log(error)) // "Error! Error passed to reject function"
+  .finally(() => console.log("Promise settled")); // "Promise settled"
+</code>
+===== Ланцюжки промісів then() =====
+Метод then() повертає новий проміс, який у свою чергу отримує значення від своєї callback-функції onResolve. Ця особливість дозволяє формувати послідовність асинхронних операцій, зв'язуючи проміси в ланцюжок.
+<code>
+const promise = new Promise((resolve, reject) => {
+  setTimeout(() => {
+    resolve(5);
+  }, 2000);
+});
+promise
+  .then(value => {
+    console.log(value); // 5
+    return value * 2;
+  })
+  .then(value => {
+    console.log(value); // 10
+    return value * 3;
+  })
+  .then(value => {
+    console.log(value); // 30
+  })
+  .catch(error => {
+    console.log(error);
+  })
+  .finally(() => {
+    console.log("finally");
+  });
+</code>
+===== Promise.resolve() і Promise.reject() =====
+ статичні методи для швидкого створення промісів, що миттєво успішно виконуються або відхиляються. Вони працюють аналогічно new Promise(), повертають проміс, але мають коротший синтаксис.
+  * Так створюється успішно виконаний проміс через Promise.resolve():
+<code>
+Promise.resolve("success value");
+	.then(value => console.log(value));
+	.catch(error => console.log(error));
+</code>
+  * Так створюється проміс, що виконався з помилкою через Promise.reject():
+<code>
+Promise.reject("error");
+	.then(value => console.log(value));
+	.catch(error => console.log(error));
+</code>
+===== Promise.all() (Обробка множинних промісів) =====
+Є ситуації, коли потрібно чекати на виконання всіх промісів одночасно, а потім обробляти їх результати. Або ситуації, коли достатньо дочекатися виконання хоча б одного з них, ігноруючи інші випадки. Для цих сценаріїв клас Promise має статичні методи для роботи з групою промісів.
+Метод Promise.all() **дозволяє одночасно обробити кілька промісів та отримати їхні результати**. Він приймає масив промісів як вхідні дані, чекає їх виконання та повертає один проміс.
+Якщо всі проміси виконуються успішно, повернений проміс перейде у стан fulfilled, а його значенням буде масив результатів виконання кожного промісу.
+<code>
+const p1 = Promise.resolve(1);
+const p2 = Promise.resolve(2);
+const p3 = Promise.resolve(3);
+Promise.all([p1, p2, p3])
+	.then(values => console.log(values)); // [1, 2, 3]
+	.catch(error => console.log(error));
+</code>
+ **якщо хоча б один з промісів відхиляється, повернений проміс одразу переходить у стан rejected, а його значенням буде помилка**.
+===== Promise.allSettled() =====
+Також дозволяє одночасно обробити кілька промісів та отримати їхні результати.
+Відмінність від Promise.all полягає в тому, що метод Promise.allSettled() **чекає виконання всіх промісів незалежно від того, чи були деякі або навіть всі проміси відхилені**.
+===== Promise.race =====
+приймає масив промісів і повертає "найшвидший", тобто перший виконаний або відхилений проміс з переданих, разом зі значенням або причиною його відхилення.
+<code>
+const p1 = new Promise((resolve, reject) => {
+  setTimeout(() => resolve(1), 1000);
+});
+const p2 = new Promise((resolve, reject) => {
+  setTimeout(() => reject(2), 2000);
+});
+Promise.race([p1, p2])
+	.then(value => console.log(value)); // 1
+	.catch(error => console.log(error));
+</code>
+===== Іньші приклади =====
   * Приклад 2 (web)
 <code>