Firebase Storage下載網址問題

firebase storage firebase 非同步 js

yoyokuo2007 2022-11-20 18:47:37 ‧ 771 瀏覽

分享至

小弟是使用Firebase Storage來存圖片
(使用js)
我想將下方的Array(list1)使用迴圈迭代成下載網址的型態(註1)
list1 = [,1.png,2.png,3.jpg]
(list1總共有4項，我直接把第0項設為null)

目前js代碼如下

function replace_img(list1) {
    for (var i = 1; i < list1.length; i++) {
        const fileRef = firebase.storage().ref("steps/" + list1[i])
        fileRef.getDownloadURL().then((url) => {
            list1[i] = url;
        })
    }
}

但最後list1跑出來變成

[,1.png,2.png,3.jpg,https://firebasestorage.googleapis.com/v0/b/專案名稱.appspot.com/o/steps%2F1.png?alt=media&token=af268a1d-fe83-4db3-8ce9-19c971e89ddf]

我有去爬了一下文應該是遇到非同步的問題導致i值一直停留在4
請問各位大大要如何修改才能達成我要的效果?
感謝!

註1:目標的list1

[,https://firebasestorage.googleapis.com/v0/b/專案名稱.appspot.com/o/steps%2F1.png?alt=media&token=af268a1d-fe83-4db3-8ce9-19c971e89ddf,https://firebasestorage.googleapis.com/v0/b/專案名稱.appspot.com/o/steps%2F2.png?alt=media&token=5433635b-6144-4f79-8e4e-cc26b02eb3fd,https://firebasestorage.googleapis.com/v0/b/專案名稱.appspot.com/o/steps%2F3.jpg?alt=media&token=0ff63eb1-5e64-4785-bb8a-32142010809c]

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

froce

iT邦大師 1 級 ‧ 2022-11-21 15:21:20

最佳解答

async function replace_img(list1) {
    for (var i = 1; i < list1.length; i++) {
        const fileRef = firebase.storage().ref("steps/" + list1[i])
        list1[i] = await fileRef.getDownloadURL()
    }
    return list1
}

replace_img.then((imgs_list)=> ...)

另外，以Array、Map這種可變資料型態當參數輸入，變動參數的時候，自己要注意。
我會建議在函數裡多一個Array把變動後的資料存進去。而非直接改動參數內的元素。

以及像這種函數，建議不要從特定index開始做，從0開始做，然後對null、undefined做例外處理會比較好。