Потоковая передача данных с промисами в load
Возвращайте из load неразрешённые промисы, чтобы передавать данные после исходного HTML.
«Потоковая передача данных с промисами в load» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Зачем нужна потоковая передача
Потоковая загрузка позволяет странице отобразиться до завершения получения медленных данных и улучшает воспринимаемую производительность.
Возврат промисов
Возвращайте данные, указывая некоторые свойства как ещё не разрешённые промисы.
export async function load() {
return {
fast: getFastData(),
slow: getSlowData() // promise, not awaited
};
}Ожидание в разметке
Используйте {#await} на странице для обработки промиса, передаваемого потоком.
{#await data.slow}
<p>Loading...</p>
{:then result}
<p>{result}</p>
{/await}Исходный HTML
Быстрые данные отображаются сразу, а медленные появляются после их получения.
Интерфейс как у Suspense
Показывайте скелетоны или индикаторы загрузки, пока данные поступают потоком.
Несколько свойств в потоке
Передавайте несколько свойств независимо друг от друга: каждое будет готово в своё время.
Ошибки в потоках
Используйте {:catch} в блоке ожидания для обработки отклонённых промисов.
Требуется сервер
Потоковая загрузка работает только при включённом SSR.
Ограничения адаптеров отсутствуют
Большинство адаптеров (node, vercel, cloudflare) поддерживают потоковую передачу.
Типобезопасность
Возврат значений Promise
Когда использовать
Медленные API, контент, созданный ИИ, большие запросы. Всё, что не должно блокировать первую отрисовку.
Быстрая проверка
Что происходит, когда из load возвращается промис, которого не дождались?
Повторение
Организуйте потоковую передачу, возвращая из load неразрешённые промисы, и обрабатывайте их в разметке с помощью {#await}.
Часто задаваемые вопросы
Урок «Потоковая передача данных с промисами в load» бесплатный?
Да — полный текст урока «Потоковая передача данных с промисами в load» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Потоковая передача данных с промисами в load»?
Возвращайте из load неразрешённые промисы, чтобы передавать данные после исходного HTML. Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Потоковая передача данных с промисами в load»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Потоковая передача данных с промисами в load
- Отложенная загрузка и интерфейс по типу Suspense
- Потоковая передача с сервера через +server.js
- Постепенная гидратация