[Извините за дублированный вопрос]
Это моя рабочая JS-функция для загрузки изображений. Проблема в том, что функция загрузки «инструмента» (данных) в базу данных не ждет URL-адреса изображения из Firebase. Мне нужен какой-то асинхронно / жду без использования тайм-аута. Я хочу загрузить данные в firebase, как только будут загружены все URL-адреса изображений.
Вот JS-код (vuex):
createTool ({ commit }, payload) {
let toolData = {
croppas: payload.croppas,
title: payload.title
}
var imageURLS = []
// outputArray = imageURLS
function forEachImage(images, outputArray) {
return new Promise((resolve) => {
images.forEach(file => {
file.generateBlob(
blob => {
if (blob != null) {
let rand = (Math.random().toString(36).substring(2, 16) + Math.random().toString(36).substring(2, 16)).toUpperCase()
let imageRef = firebase.storage().ref('toolImages/').child(rand)
imageRef.put(blob)
.then( data => {
imageRef.getDownloadURL()
.then( downloadURL => {
console.info('The Download Link is: ', downloadURL)
outputArray.push(downloadURL)
console.info('The imageArray after push is: ', outputArray)
})
})
}
})
})
resolve()
})
}
async function uploadEachImage () {
await forEachImage(toolData.croppas, imageURLS)
console.info(imageURLS)
const mergedToolData = {
title: payload.title,
URLS: imageURLS
}
console.info('Uploading to database...')
firebase.database().ref('tools').push(mergedToolData)
.then((data) => {
const key = data.key
commit('createTool', {
title: payload.title,
URLS: imageURLS,
id: key
})
})
}
uploadEachImage()
},
Моя попытка здесь состоит в том, чтобы дождаться завершения функции "forEachImage".
Функция будет:
Мой желаемый результат таков: после того, как эта функция завершит все изображения, асинхронная функция продолжит работу и загрузит данные в базу данных (также содержащую imageURLS[]. Как я уже упоминал, я хочу сделать это без использования тайм-аута. (таймер).
Мне удалось найти решение с желаемым результатом, хотя и довольно примитивное.
createTool ({ commit, getters }, payload) {
commit('setLoading', true)
const toolData = {
title: payload.title,
selectedCategory: payload.selectedCategory,
description: payload.description,
kontaktInfo: payload.kontaktInfo,
creatorId: getters.user.id
}
const croppas = {
croppas: payload.croppas
}
var imageURLS = []
async function forEachImage(images, outputArray) {
return new Promise((resolve) => {
images.forEach(async (file) => {
file.generateBlob(
async (blob) => {
if (blob != null) {
let rand = (Math.random().toString(36).substring(2, 16) + Math.random().toString(36).substring(2, 16)).toUpperCase()
let imageRef = firebase.storage().ref('toolImages/').child(rand).put(blob)
.then( data => {
return data.ref.getDownloadURL()
})
let url = await imageRef
outputArray.push(url)
console.info('The imageArray after push is: ', outputArray)
console.info('Antall croppas er: ', croppas.croppas.length)
console.info('Antall images in imageURLS: ', imageURLS.length + 1)
if (croppas.croppas.length == imageURLS.length + 1) {
resolve()
}
}
})
})
})
}
async function uploadEachImage () {
await forEachImage(croppas.croppas, imageURLS)
.then(() => {
console.info('Waiting is over')
})
console.info(imageURLS)
const mergedToolData = {
...toolData,
URLS: imageURLS
}
console.info('Uploading to database...')
firebase.database().ref('tools').push(mergedToolData)
.then((data) => {
const key = data.key
commit('createTool', {
title: payload.title,
URLS: imageURLS,
id: key
})
console.info(croppas.croppas.length)
console.info('Antall images in imageURLS: ', imageURLS.length)
})
.catch((error) => {
console.info(error)
})
commit('setLoading', false)
}
uploadEachImage()
commit('setLoading', false)
},