async_await

Различия

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

Ссылка на это сравнение

Предыдущая версия справа и слева Предыдущая версия
Следующая версия 		Предыдущая версия
async_await [2024/02/05 20:17]
tro 		async_await [2024/02/06 18:27] (текущий)
tro
Строка 2: Строка 2:
 Синтактическая надстройка над промисами. Синтактическая надстройка над промисами.
 Зручний спосіб написання асинхронного коду, який ззовні схожий на синхронний. Цей механізм був доданий до стандарту ECMAScript 2017 (ES8) і став дуже популярним серед розробників завдяки його зручності та зрозумілості. Будь-яка функція може бути асинхронною. Зручний спосіб написання асинхронного коду, який ззовні схожий на синхронний. Цей механізм був доданий до стандарту ECMAScript 2017 (ES8) і став дуже популярним серед розробників завдяки його зручності та зрозумілості. Будь-яка функція може бути асинхронною.
-===== Обява =====+===== async ===== 
 +==== Обява ====
 <code> <code>
 async function asyncFn(){ async function asyncFn(){
Строка 23: Строка 24:
 } }
 </code> </code>
-===== Виклик =====+Для оголошення асинхронного методу класу також використовується async перед іменем методу. 
 +<code> 
 +class User { 
 +  async getUsername() { 
 +    // ... 
 +  } 
 +} 
 + 
 +</code> 
 +==== Виклик ====
 **Приклад 1** нормальне повернення **Приклад 1** нормальне повернення
 <code> <code>
Строка 66: Строка 76:
  
 </code> </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>
 +
  • /sites/data/attic/async_await.1707164263.txt.gz
  • Последнее изменение: 2024/02/05 20:17
  • — tro