Различия

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

--- async_await [2023/08/09 20:15]
tro
+++ async_await [2024/02/06 18:27] (текущий)
tro
@@ Строка 1: / Строка 1: @@
 ====== async / await ======
-===== Обява =====
+Синтактическая надстройка над промисами.
+Зручний спосіб написання асинхронного коду, який ззовні схожий на синхронний. Цей механізм був доданий до стандарту ECMAScript 2017 (ES8) і став дуже популярним серед розробників завдяки його зручності та зрозумілості. Будь-яка функція може бути асинхронною.
+===== async =====
+==== Обява ====
 <code>
 async function asyncFn(){
@@ Строка 11: / Строка 14: @@
 }
 </code>
-===== Виклик =====
+Для оголошення асинхронного методу об'єкта async додається перед іменем методу.
-Приклад 1 нормальне повернення
+<code>
+const user = {
+  async getUsername() {
+    // ...
+  },
+};
+}
+</code>
+Для оголошення асинхронного методу класу також використовується async перед іменем методу.
+<code>
+class User {
+  async getUsername() {
+    // ...
+  }
+}
+</code>
+==== Виклик ====
+**Приклад 1** нормальне повернення
 <code>
 asyncFn()
  .then(value=>console.log(value))
 </code>
-Приклад 2 повернення помилки
+**Приклад 2** повернення помилки
 <code>
 const asyncFn = async()=>{
@@ Строка 27: / Строка 49: @@
  .catch(error=>console.log(error))
 </code>
-Приклад 3 Очикування результату промісу та виконання асінхронного виклику
+**Приклад 3** Очикування результату промісу та виконання асінхронного виклику
 <code>
 const timerPromise =()=>
@@ Строка 42: / Строка 64: @@
 console.log('after async') //Будк виконано відразу після попередньої невважаючи що попередня ще не закіньчена
 </code>
+**Приклад 4**
+Якщо не вказувати значення для повернення, буде створений проміс зі значенням undefined.
+<code>
+const foo = async () => {
+	// Не вказуємо значення для повернення
+};
+foo().then(value => {
+	console.log(value); // undefined
+});
+</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>