🤔 В чём преимущество синтаксического сахара в виде async await над promise?

Оба способа позволяют работать с асинхронным кодом в JavaScript, но async/await делает код чище, проще и удобнее.

🟠`async/await` проще читать и писать

Код на Promise.then() часто становится вложенным и запутанным

fetch("https://api.example.com/user")
  .then(response => response.json())
  .then(user => {
    return fetch(`https://api.example.com/orders/${user.id}`);
  })
  .then(response => response.json())
  .then(orders => {
    console.log("Заказы:", orders);
  })
  .catch(error => console.error("Ошибка:", error));

Решение: async/await

async function getUserOrders() {
    try {
        const response = await fetch("https://api.example.com/user");
        const user = await response.json();

        const ordersResponse = await fetch(`https://api.example.com/orders/${user.id}`);
        const orders = await ordersResponse.json();

        console.log("Заказы:", orders);
    } catch (error) {
        console.error("Ошибка:", error);
    }
}

getUserOrders();

async/await лучше обрабатывает ошибки

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => {
    throw new Error("Ошибка в обработке данных");
  })
  .catch(error => console.error("Ошибка:", error));

async/await + try/catch – мощная обработка ошибок

async function fetchData() {
    try {
        const response = await fetch("https://api.example.com/data");
        if (!response.ok) throw new Error("Ошибка HTTP " + response.status);
        
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Ошибка:", error);
    }
}
fetchData();

async/await удобен в for и try/catch

const urls = ["url1", "url2", "url3"];
urls.forEach(url => {
  fetch(url)
    .then(response => response.json())
    .then(data => console.log(data));
});

async/await в for of

async function fetchAll(urls) {
    for (const url of urls) {
        const response = await fetch(url);
        const data = await response.json();
        console.log(data);
    }
}
fetchAll(["url1", "url2", "url3"]);

async/await работает с try/finally

async function fetchData() {
    try {
        console.log("Запрос данных...");
        const response = await fetch("https://api.example.com");
        const data = await response.json();
        console.log("Данные:", data);
    } catch (error) {
        console.error("Ошибка:", error);
    } finally {
        console.log("Закрываем соединение...");
    }
}
fetchData();

async/await можно использовать внутри Promise.all()
Иногда Promise.all() быстрее, потому что запускает промисы параллельно.

async function fetchMultiple() {
    const [user, orders] = await Promise.all([
        fetch("https://api.example.com/user").then(res => res.json()),
        fetch("https://api.example.com/orders").then(res => res.json())
    ]);

    console.log(user, orders);
}
fetchMultiple();

Ставь 👍 и забирай 📚 Базу знаний

🤔 Когда нужно использовать типы, а когда интерфейсы?

- interface — если описывается структура объекта или контракта API (особенно с наследованием).
- type — для объединения, пересечений, объединений с примитивами (type ID = string | number).
Общее правило:
- interface — для объектов.
- type — для композиции, объединений и utility-типов.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Какие проблемы решает eventloop?

Event Loop (Цикл событий) – это механизм, который позволяет JavaScript работать асинхронно, обрабатывать события и не блокировать основной поток выполнения. Он решает несколько важных проблем, которые были бы сложны без него.

🚩JavaScript однопоточный, но нужно выполнять асинхронные задачи

JavaScript работает в одном потоке, то есть выполняет код последовательно. Если одна операция занимает много времени (например, загрузка данных с сервера), выполнение всего кода остановилось бы, пока задача не завершится. Это привело бы к зависанию страницы.
Event Loop позволяет выполнять тяжёлые операции (например, запросы на сервер, таймеры) асинхронно, не блокируя основной поток.

console.log("1: Перед запросом");

setTimeout(() => {
  console.log("2: Данные загружены");
}, 2000);

console.log("3: После запроса");

Вывод в консоль

1: Перед запросом  
3: После запроса  
2: Данные загружены (спустя 2 секунды)

🚩Обработка пользовательских событий без зависаний

Если бы JavaScript не мог обрабатывать события асинхронно, то нажатия кнопок, прокрутка страницы и другие действия зависали бы, пока выполняется тяжёлая операция.
Event Loop ставит события (например, click, keydown) в очередь и обрабатывает их только когда основной поток свободен.

document.querySelector("button").addEventListener("click", () => {
  console.log("Кнопка нажата!");
});

🚩Загрузка данных без блокировки страницы

Когда мы загружаем данные с сервера (fetch, setTimeout, setInterval), они не приходят мгновенно. Без Event Loop браузер бы зависал в ожидании ответа.
Асинхронные запросы (fetch, XMLHttpRequest) выполняются в фоновом режиме. Когда ответ готов, он помещается в очередь задач и обрабатывается, когда основной поток освободится.

console.log("Запрос данных...");

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())
  .then(data => console.log("Данные получены:", data));

console.log("Код выполняется дальше!");

Вывод

Запрос данных...  
Код выполняется дальше!  
(Спустя время) Данные получены: {id: 1, title: "..."}

🚩Обход блокировки в тяжёлых вычислениях

Если в коде идёт сложная операция (например, сложные вычисления или рендеринг огромного списка), интерфейс зависнет.
Можно разбить задачу на части и выполнять её постепенно с помощью setTimeout или requestAnimationFrame.

let count = 0;

function heavyTask() {
  for (let i = 0; i < 1e6; i++) {
    count++;
  }
  console.log("Часть работы выполнена!");

  if (count < 5e6) {
    setTimeout(heavyTask, 0); // Даем Event Loop обработать другие задачи
  }
}

heavyTask();

Ставь 👍 и забирай 📚 Базу знаний

🤔 На какие события video или audio можно подписаться?

Можно подписаться на множество событий, в том числе:
- play — начало воспроизведения;
- pause — приостановка;
- ended — завершение воспроизведения;
- timeupdate — изменение текущего времени;
- loadeddata — когда данные загружены;
- volumechange — изменение громкости;
- seeking и seeked — начало и завершение перемотки;
- error — ошибка загрузки/воспроизведения.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний