Различия

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

--- async_await [2024/02/05 20:16]
tro
+++ async_await [2024/02/06 18:27] (текущий)
tro
@@ Строка 2: / Строка 2: @@
 Синтактическая надстройка над промисами.
 Зручний спосіб написання асинхронного коду, який ззовні схожий на синхронний. Цей механізм був доданий до стандарту ECMAScript 2017 (ES8) і став дуже популярним серед розробників завдяки його зручності та зрозумілості. Будь-яка функція може бути асинхронною.
-===== Обява =====
+===== async =====
+==== Обява ====
 <code>
 async function asyncFn(){
@@ Строка 13: / Строка 14: @@
 }
 </code>
-===== Виклик =====
+Для оголошення асинхронного методу об'єкта async додається перед іменем методу.
+<code>
+const user = {
+  async getUsername() {
+    // ...
+  },
+};
+}
+</code>
+Для оголошення асинхронного методу класу також використовується async перед іменем методу.
+<code>
+class User {
+  async getUsername() {
+    // ...
+  }
+}
+</code>
+==== Виклик ====
 **Приклад 1** нормальне повернення
 <code>
@@ Строка 56: / Строка 76: @@
 </code>
+===== await =====
+Всередині асинхронних функцій можна використовувати оператор await, розмістивши його праворуч від будь-якого виразу, який повертає проміс.
+Коли інтерпретатор зустрічає await, він призупиняє виконання функції і чекає, доки не завершиться виконання промісу, який знаходиться праворуч від await.
+<code>
+const foo = async () => {
+	console.log("Before await");
+	const promiseValue = await new Promise(resolve => {
+		setTimeout(() => resolve(5), 2000)
+	});
+	console.log("After await", promiseValue);
+};
+foo(); // через 2 секунди виведеться в консоль  "After await" 5
+</code>
+Вже .then не потрібна і повернеться саме значення результат функції а не проміс
+===== HTTP-запити =====
+Використаємо синтаксис async/await при роботі з HTTP-запитами, щоб зробити код більш читабельним.
+<code>
+const fetchUsers = async () => {
+	const response = await axios.get("<https://jsonplaceholder.typicode.com/users>");
+	return response.data;
+};
+fetchUsers()
+	.then(users => console.log(users));
+</code>
+===== Обробка помилок =====
+Якщо результат асинхронної функції (проміс) не використовується в зовнішньому коді, помилки оброблюються у самому тілі функції за допомогою конструкції try...catch. Значення параметра error у блоці catch — це помилка, яку генерує await, якщо проміс був відхилений.
+<code>
+const fetchUsers = async () => {
+	try {
+		const response = await axios.get("<https://jsonplaceholder.typicode.com/users>");
+		console.log(response.data);
+	} catch(error) {
+		console.log(error);
+	}
+};
+</code>
+====== Приклади ======
+===== Виконання декількох запитів HTTP асінхронно =====
+<code>
+async function f1(){
+    const url = 'http://lovalhost:3000/book';
+    //сам запит до сервера робимо аасинхронно для швидкості
+    const p1 = fetch(url);
+    const p2 = fetch(url);
+    const p3 = fetch(url);
+    const p4 = fetch(url);
+    const p5 = fetch(url);
+    //кладемо проміси у масив
+    const promise = [p1,p2,p3,p4,p5]
+    //а тепер у результат кладемо результати проміі і чекаємо тільки коли усі вони виконаються
+    const result = await Promise.allSettled(promise);
+    console.log(result)
+}
+//Викликаємо саму функцію
+f1();
+</code>