Home

Реклама

Зникне через c

    setTimeout(()=>{
        timerId4 = setInterval(adverRend, 1000);
        advertisen.style = "display: block";
    }, 3000);

Проміси

Зміст

  1. Game
  2. Таймери
  3. Інтервали
  4. Дата і час | mdn
  5. Проміси
  6. Методи класу Promise
  7. Проміс fetch (відео Рисіч)

Game

Що тут корисного:

  • Пошук у елемента children
  • Присвоєння кожному children свое значення
  • Реалізація промісу
😜
😎
👀

Таймери - setTimeout

Встановлення таймера setTimeout

Метод setTimeout() дозволяє запланувати запуск функції через певний час. 

    const timerId = setTimeout(callback, delay, arg1, arg2, ...);

Видалення таймера clearTimeout

Якщо нам, з будь-якої причини, потрібно скасувати виклик функції всередині тайм-ауту, використовується метод clearTimeout(id), який приймає ідентифікатор таймера і очищає (видаляє) його. 

            clearTimeout(timerId);

setTimeout - викликає колбек функцію лише один раз. Тому його можна не прибирити. Інша справа з setTimeout(), він буде увесь час працювати навіть у фоновому режимі. Тому його треба прибрати clearInterval(id)

Інтервал

Встановлення інтервалу setInterval()

Метод setInterval() - це простий спосіб повторення коду знову і знову зі встановленим проміжком часу повторень.

Синтаксис і параметри такі самі як у setTimeout(). На відміну від setTimeout(), інтервал запускає виконання функції не один раз, а регулярно повторює її через вказаний проміжок часу. 

const timerId = setInterval(callback, delay, arg1, arg2, ...);

Видалення інтервалу clearInterval()

Зупинити виконання можна викликом методу clearInterval(id).

Counter: 0

Частота спрацьовування лічильника

У браузерного таймера є мінімально можлива затримка. У сучасних браузерах вона коливається приблизно від 0 до 4 мілісекунд. У старіших браузерах затримка може бути більшою і досягати 15 мілісекунд. За стандартом, мінімальна затримка становить 4 мілісекунди, тому різниці між setTimeout(callback, 1) і setTimeout(callback, 4) немає.

Таймер може спрацьовувати рідше, ніж зазначено в параметрі delay, тому що за надто великого завантаження процесора деякі запуски функцій-інтервалів будуть пропущені. Браузери продовжують виконувати тайм-аути та інтервали, навіть якщо вкладка браузера неактивна

Дата і час

Клас Date безпосередньо абстрагує більшу частину роботи з датами. Це дозволяє нам відображати моменти у часі як об'єкти і маніпулювати ними заздалегідь визначеними методами. Використовуючи можливості класу Date, можна створювати годинник, лічильники, календарі та інші інтерактивні елементи інтефрейсу.

Створення дати

Створення дати без аргументів повертає об'єкт, що зберігає дату і час на момент його ініціалізації, тобто поточні. У рядковому перетворенні об'єкт повертає результат виклику методу toString(), тому у першому лозі ми отримаємо рядок, а не об'єкт. 

    const date = new Date();
    // "Fri Jun 18 2021 15:01:35 GMT+0300

Внутрішньо дати відображені в мілісекундах, що минули після опівночі 1 січня 1970 року у часовому поясі UTC. Для комп'ютера - це дата початку відліку часу - Unix час. Тому під час ініціалізації дати одним числом, воно являє собою кількість мілісекунд, що вже минула. 

                    const date = new Date(0);
        // "Thu Jan 01 1970 03:00:00 GMT+0300

Метод getTime() повертає числове значення цієї дати (timestamp) - кількість мілісекунд, що минула з півночі 1 січня 1970 року. 

        const date = new Date();
        console.log(date.getTime());
p>

Встановлення дати

  • const teamDate = new Date("March 16, 2030");
  • const teamDate = new Date("2030-03-16 14:25:00");

Інший спосіб створення нових об'єктів - це передати сім чисел, які описують рік, місяць (починається з 0), день, години, хвилини, секунди і мілісекунди. Обов'язкові тільки перші три. 

const date = new Date(2030, 2, 16, 14, 25, 0, 0);

Геттери використовуються для читання усієї дати або окремої складової. Значення, що повертається, залежить від поточного часового поясу, встановленого на вашому комп'ютері.

  • const date = new Date();
  • console.log("getDate(): ", date.getDate());
  • console.log("getUTCDate(): ", date.getUTCDate());
  • console.log("getDay(): ", date.getDay());
  • console.log("getUTCDay(): ", date.getUTCDay());
  • console.log("getMonth(): ", date.getMonth());
  • console.log("getUTCMonth(): ", date.getUTCMonth());
  • console.log("getFullYear(): ", date.getFullYear());
  • console.log("getUTCFullYear(): ", date.getUTCFullYear());
  • console.log("getHours(): ", date.getHours());
  • console.log("getUTCHours(): ", date.getUTCHours());
  • console.log("getMinutes(): ", date.getMinutes());
  • console.log("getUTCMinutes(): ", date.getUTCMinutes());
  • console.log("getSeconds(): ", date.getSeconds());
  • console.log("getUTCSeconds(): ", date.getUTCSeconds());
  • console.log("getMilliseconds(): ", date.getMilliseconds());

UTC - не адаптовані до поточного часового поясу користувача.

Все, що можна прочитати - можна записати, методи для запису називаються також геттери, але починаються з префіксу set. Також для всіх методів існують їх UTC еквіваленти.

  • date.setMinutes(50);
  • date.setFullYear(2040, 4, 8);

Форматування дати

  • const date = new Date("March 16, 2030 14:25:00");
  • date.toString();
  • date.toTimeString();
  • date.toLocaleTimeString(); // "2:25:00 PM"
  • date.toDateString();// "2030-03-16T12:25:00.000Z"
  • date.getTime(); // 1899894300000

Проміси

Проміс може бути у трьох станах:

  • Очікування (pending) - початковий стан під час створення промісу.
  • Виконано (fulfilled) - операція виконана успішно
  • Відхилено (rejected) - операція відхилена з помилкою.
  • (settled) - проміс завершений

Колбеки - це функції, обіцянки - це об'єкти.

Створення

const promise = new Promise((resolve, reject) => {
                    // Asynchronous operation
                  });
  • resolve(value) - функція для виклику у разі успішної операції.
  • reject(error) - функція для виклику у разі помилки.
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);
  });

Метод then() і catch() finally()

Після створення промісу, його результат обробляється в callback-функції. Код пишеться таким чином, ніби ми думаємо про те, що може статися, якщо проміс виконається або не виконається, не думаючи про часові рамки.

Метод then() приймає два аргументи - callback-функції, які будуть викликані, коли проміс змінить свій стан. Результат промісу, значення або помилку, вони отримають як аргументи. 

promise.then(onResolve, onReject)
  • onResolve(value) - буде викликана у разі успішного виконання промісу і отримає його результат як аргумент.
  • onReject(error) - буде викликана у разі виконання промісу з помилкою і отримає її як аргумент.

На практиці в методі then() обробляють тільки успішне виконання промісу, а помилку його виконання у спеціальному методі catch() для «відловлювання» помилок.

Метод finally() - Цей метод може бути корисним, якщо необхідно виконати код після того, як обіцянка буде дозволена (fulfilled або rejected), незалежно від результату. Дозволяє уникнути дублювання коду в обробниках then() і catch(). 

const isSuccess = true;

    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);
    });
                    
    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"

Моя примітка! then має приймати одну колбк фу. Зазвичай роблять два then один парсить другий обробляє!!!!

У другий then потрапляє результат функції (return) від першого then і це теж проміс

Помилка потрапляє у catch Та нічого не потрапляє у finally

Ланцюжки промісів

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("Final task");
        });

Ось два варінти реалізації кода

const fetchUserFromServer = (username, onSuccess, onError) => {
    console.log(`Fetching data for ${username}`);
                  
    setTimeout(() => {
      // Change value of isSuccess variable to simulate request status
      const isSuccess = true;
  
      if (isSuccess) {
        onSuccess("success value");
      } else {
        onError("error");
      }
    }, 2000);
  };
                  
  const onFetchSuccess = user => {
    console.log(user);
  };
                  
  const onFetchError = error => {
    console.error(error);
  };
                  
  fetchUserFromServer("Mango", onFetchSuccess, onFetchError);
const fetchUserFromServer = username => {
    return new Promise((resolve, reject) => {
        console.log(`Fetching data for ${username}`);

        setTimeout(() => {
        // Change value of isSuccess variable to simulate request status
        const isSuccess = true;

        if (isSuccess) {
            resolve("success value");
        } else {
            reject("error");
        }
        }, 2000);
    });
    };

    fetchUserFromServer("Mango")
    .then(user => console.log(user))
    .catch(error => console.error(error));

Більшість сучасних бібліотек ґрунтуються на промісах. У разі виклику методу для асинхронної операції його результат доступний як проміс, якому можна причепити обробники в методах then() і catch().

Методи класу Promise

Promise.all()

Приймає масив промісів, очікує їх виконання і повертає проміс. Якщо всі проміси виконаються успішно, проміс, що повертається, перейде у стан fulfilled, а його значенням буде масив результатів виконання кожного промісу. У разі, коли хоча б один з промісів буде відхилений, проміс, що повертається, перейде у стан rejected, а його значенням буде помилка. 

const makePromise = (text, delay) => {
         return new Promise(resolve => {
           setTimeout(() => resolve(text), delay);
         });
       };
                  
       const promiseA = makePromise("promiseA value", 1000);
      const promiseB = makePromise("promiseB value", 3000);
                  
      Promise.all([promiseA, promiseB])
        .then(value => console.log(value)) //["promiseA value", "promiseB value"]
        .catch(error => console.log(error));

Колбек методу then() буде викликаний через три секунди, тобто коли виконається проміс promiseB. Проміс promiseA виконається через одну секунду і просто чекатиме. Якщо будь-який з промісів буде відхилений, то буде викликаний колбек методу catch().

Promise.race()

Повертає виконаний або відхилений проміс, залежно від того, з яким результатом завершиться «найшвидший» з переданих промісів, зі значенням або причиною його відхилення.

Коли хоча б один проміс з масиву виконається або буде відхилений, проміс, що повертається, перейде у стан resolved або rejected, а всі інші будуть відкинуті. 

const makePromise = (text, delay) => {
        return new Promise(resolve => {
          setTimeout(() => resolve(text), delay);
        });
      };
                  
      const promiseA = makePromise("promiseA value", 1000);
      const promiseB = makePromise("promiseB value", 3000);
                  
      Promise.race([promiseA, promiseB])
        .then(value => console.log(value)) // "promiseA value"
        .catch(error => console.log(error));

Колбек методу then() або catch() буде викликаний через одну секунду, коли виконається promiseA. Другий проміс promiseB буде проігнорований.

Promise.resolve() і Promise.reject()

Статичні методи для створення промісів, що миттєво успішно виконуються або відхиляються. Працюють аналогічно new Promise() за винятком можливості вказати затримку, але мають коротший синтаксис. 

// Fulfilled promise
    new Promise(resolve => resolve("success value")).then(value =>
      console.log(value)
    );
    
    Promise.resolve("success value").then(value => console.log(value));
    
    // Rejected promise
    new Promise((resolve, reject) => reject("error")).catch(error =>
      console.error(error)
    );
    
    Promise.reject("error").catch(error => console.error(error));

Виконаємо рефакторинг наступного коду.

const makeGreeting = guestName => {
        if (guestName === "" || guestName === undefined) {
          return {
            success: false,
            message: "Guest name must not be empty",
          };
        }
      
        return {
          success: true,
          message: `Welcome ${guestName}`,
        };
      };
      
      const result = makeGreeting("Mango");
      
      if (result.success) {
        console.log(result.message);
      } else {
        console.error(result.message);
      }

Використовуючи колбек, відпадає необхідність повертати складні об'єкти зі статусом операції і перевіряти його у зовнішньому коді. 

const makeGreeting = (guestName, onSuccess, onError) => {
        if (guestName === "" || guestName === undefined) {
          return onError("Guest name must not be empty");
        }
        onSuccess(`Welcome ${guestName}`);
      };
      
      makeGreeting(
        "Mango",
        greeting => console.log(greeting),
        error => console.error(error)
      );

Останнім кроком буде промісифікація функції makeGreeting() для того, щоб повністю усунути її залежність від зовнішнього коду. 

const makeGreeting = guestName => {
        if (guestName === "" || guestName === undefined) {
          return Promise.reject("Guest name must not be empty");
        }
      
        return Promise.resolve(`Welcome ${guestName}`);
      };
      
      makeGreeting("Mango")
        .then(greeting => console.log(greeting))
        .catch(error => console.error(error));

Проміс fetch (відео Рисіч)

Приклад реального використання промісів 99% 

    const myPromise = fetch("https://pokeapi.co/api/v2/pokemon/ditto");

    myPromise.then(resp => resp.json()) // Парсимо дані
        .then(data => console.log(data)) // Обробляємо дані
        .catch(error => console.log(error))
        .finally(()=> console.log("finally"));

Promise.allSettled()