resources.map(r => fetchRest(r.endpoint))
).then(res => {
resources.forEach((r, i) => r.store.set(r.pre ? r.pre(res[i]) : res[i]));
});
}
import { loadAll as funkyOtherStuff } from '@/anotherModule/store.js';
export const something = writable([]);
export const rhymesboi = writable([]);
export const loadAll = Promise.all([
loadResources([
{
endpoint: '/api/something/',
store: something
},
{
endpoint: 'rhymesboi.il',
store: rhymesboi,
pre: v => parseMd(v)
}
]),
funkyOtherStuff
]);
а вот мой велосипед)
лучше allSettled вместо all
Вот мой. Оказывается, перепутал. Использовал allSettled export default async function fetchAll(uriList: string[], fetch: fetch): Promise<any> { async function getData(uri: string) { const response = await fetch(uri); return await response.json(); } const responses = await Promise.allSettled( uriList.map(uri => getData(uri)) ); return responses.map(response => { return (response.status === "fulfilled") ? response.value : []; }); }
fetch Это this.fetch сапперовский
а у тебя ещё и молча пустые массивы оставляет, а не громко выкладывает кирпичей с ошибкой :)
Да, сразу избежал казусов😅
#фетчинг помнится как-то написал фуфло, которому нашёл отличную альтернативу) у меня SPA'шка без SSR, на которой очень желательна предварительная параллельная загрузка ресурсов, чтобы не заставлять юзера мучаться в ожидании, когда он всё-таки инстанциирует тот самый компонент // module store.js export const someStore = writable([], (set) => { fetchRest('/api/some-endpoint/').then(set); }); export const otherStore = writable([], (set) => { fetchRest('/assets/some-big-file.md/').then(parseMd).then(set); }); export function preload() { return preloader([someStore, otherStore]); } // some lib.js export function preloader(stores) { const unsubs = stores.map((store) => store.subscribe()); return () => unsubs.forEach((unsub) => unsub()); } в главном компоненте, который включает в себя компоненты, желающие предзагрузку до своей инстанциации в onMount пихаем preload, импортируемый из стора и вуаля, он подписывается на всё перечисленное и запускает предзагрузку второй функцией writable'а) на onDestroy отпишется ещё наводя порядок понял, что можно же красиво сбрасывать стейт в изначальный и заодно обновлять контент с сервера по требованию накидал себе вот такой кастомный стор, который делает тоже самое что и writable, только позволяет перезапустить функцию загрузки по запуску метода reload export function reloadableStore(value, onSubscribe) { const { set, update, subscribe } = writable(value); const reload = () => onSubscribe(set); onSubscribe(set); return { set, update, subscribe, reload }; } подобным preload'у образом можно создать в сторе функцию reload, которая дёрнет во всех указанных сторах метод reload чота я ваще доволен
продолжая идею: export function reloadableStore() { const stores = []; function reloadable(value, onSubscribe) { if (!onSubscribe) onSubscribe = (set) => set(value); const { set, update, subscribe } = writable(value, onSubscribe); const reload = () => onSubscribe(set); const store = { set, update, subscribe, reload }; stores.push(store); return store; } function preload() { const unsubs = stores.map((store) => store.subscribe(() => {})); return () => unsubs.forEach((unsub) => unsub()); } function reload() { stores.forEach((store) => store.reload()); } return { reloadable, reload, preload }; } В сторе модуля store.js: export const { reloadable, preload, reload } = reloadableStore(); export const someStore = reloadable([], (set) => { fetchRest('/api/some-endpoint/').then(set); }); export const someStoreWithoutFetch = reloadable([]); Использование в корневом компоненте: import { preload, reload } from './store.js'; ... onMount(preload); <button on:click={reload}>Сбросить состояние</button> @PaulMaly как тебе ?
и ватерфола не будет?
ну подписка в руте затригерит все сторы и они пойдут качать данные, когда компоненты подпишутся данные скорее всего там уже будут
Обсуждают сегодня