I have Firebase app with Svelte 5. Svelte is '5.17.5', @sveltejs/kit is '2.15.3', firebase is '11.2.0', vite is '6.0.7'. Here is method, it doesn't stop on await/async. What am I missing?
Here is definition:
import { getDownloadURL, getStorage, listAll, ref } from 'firebase/storage';
import { page } from '$app/state';
import { getZStorageI, zFirestore, zlataTrinket_kategorija, generateKeyword, type ZlataTrinket } from '$lib/common';
Here is code:
let pictureUrl: Array<string> = $state([]);
onMount(async () => {
const _id = page.url.searchParams.get('id');
const storage = getStorage();
const listRef = ref(storage, getZStorageI(_id));
let i = 0;
await listAll(listRef).then(async (res) => {
res.items.forEach(async (itemRef) => {
await getDownloadURL(itemRef).then(async (url) => {
console.log(url);
pictureUrl[i++] = url;
});
});
});
console.log("It should be after?");
});
It show:
It should be after?
+page.svelte:44 https://firebasestorage.googleapis.com/v0/b/zlata-67787.firebasestorage.app/o/zStorage%2F400_499%2F463%2F2.jpg?alt=media&token=fd48f7c8-d90d-4841-91e9-7fd3ca88780a
+page.svelte:44 https://firebasestorage.googleapis.com/v0/b/zlata-67787.firebasestorage.app/o/zStorage%2F400_499%2F463%2F4.jpg?alt=media&token=2329c929-75b8-4251-a02e-82b31b2febcb
+page.svelte:44 https://firebasestorage.googleapis.com/v0/b/zlata-67787.firebasestorage.app/o/zStorage%2F400_499%2F463%2F1.jpg?alt=media&token=5fbdb696-977b-498d-928a-3280843e4748
+page.svelte:44 https://firebasestorage.googleapis.com/v0/b/zlata-67787.firebasestorage.app/o/zStorage%2F400_49
The res.items.forEach
breaks the await
chain.
If you need sequential processing use a regular for
loop.
If not, use await Promise.all(res.items.map(async item => { ... }))
.
(Also note that having async code in onMount
will not stop the component from rendering. It will also mess up any cleanup you try to do, i.e. a function returned from the onMount
callback will not be executed this way.)