ASYNC AWAIT

когда сто и как использовать

Редактировать...

🎯 Правила:

  1. await ставим там, где нужен результат операции
  2. Без await = получаем промис (обещание результата)
  3. Параллельность достигается созданием нескольких промисов ДО await
  4. Последовательность достигается await между операциями


🔧 Практические примеры из нашего блога:


Пример 1: Последовательная загрузка

typescript

// +page.server.ts
export async function load({ params }) {
// 1. Ждём статью
const post = await db.getPost(params.id); // ⏸️

// 2. Только после этого ждём автора
const author = await db.getAuthor(post.author_id); // ⏸️

// 3. И только потом комментарии
const comments = await db.getComments(post.id); // ⏸️

return { post, author, comments }; // Всего: ~300мс
}



Пример 2: Параллельная загрузка

typescript

export async function load({ params }) {
// Запускаем ВСЕ запросы сразу!
const postPromise = db.getPost(params.id);
const authorPromise = db.getAuthor(params.id); // Можно даже не зная author_id
const commentsPromise = db.getComments(params.id);

// Ждём когда ВСЕ завершатся
const [post, author, comments] = await Promise.all([
postPromise,
authorPromise,
commentsPromise
]);

return { post, author, comments }; // Всего: ~100мс (самый медленный)
}



Пример 3: Смешанный подход

typescript

export async function load({ params }) {
// 1. Сначала ждём статью (нужен её id для остального)
const post = await db.getPost(params.id);

// 2. Теперь параллельно автор + комментарии
const [author, comments] = await Promise.all([
db.getAuthor(post.author_id),
db.getComments(post.id)
]);

return { post, author, comments };
}


🚀 Когда что использовать:

Используй последовательно (await друг за другом) если:

  1. Вторая операция зависит от результата первой

typescript

const user = await db.getUser(id); // ⏸️ Нужен user.id
const orders = await db.getOrders(user.id); // ⏸️

Используй параллельно (Promise.all) если:

  1. Операции независимы
  2. Нужна максимальная скорость

typescript

const [user, stats, notifications] = await Promise.all([
db.getUser(id),
db.getUserStats(id),
db.getNotifications(id)
]);


Не используй await вообще если:

  1. Не нужен результат сразу
  2. Фоновые операции

typescript

// Фоновая задача - не ждём
function logAnalytics() {
fetch('/api/analytics'); // Без await!
}

logAnalytics(); // Запустили и забыли


🎮 Простая аналогия:

javascript

// Представь что ты готовишь ужин:

// 1. Последовательно (как await друг за другом)
async function cookSequential() {
const water = await boilWater(); // ⏸️ Ждём кипячения
const pasta = await cookPasta(water); // ⏸️ Ждём пасту
const sauce = await makeSauce(); // ⏸️ Ждём соус
// Ужин через 45 минут
}

// 2. Параллельно (как Promise.all)
async function cookParallel() {
const waterPromise = boilWater(); // 🏃 Кипятим
const saucePromise = makeSauce(); // 🏃 Готовим соус
const [water, sauce] = await Promise.all([waterPromise, saucePromise]);
const pasta = await cookPasta(water); // ⏸️ Ждём пасту
// Ужин через 25 минут!
}


💡 Вывод:

await = "подожди здесь".

Без await = "запусти и иди дальше".

Параллельность = запусти несколько операций ДО того как начать ждать.

Правильно: "Без await мы запускаем операцию, но не ждём её завершения прямо сейчас" 🚀