vue 循环中使用promise异步的差异

const uploadImage = (files: any) => {

const data: { title: any; url: string }[] = []

files.forEach(async (file: any) => {

const formData = new FormData()

formData.append('file', file)

const res = await uploadFile(7, formData)

data.push({ title: file.name, url: config.file_host + res.data.fileUrl })

console.log(data) })

return data } 

这段代码接口还没调用完就返回了 空的结果，要怎么修改？

你的问题似乎是关于JavaScript的异步操作。在你的代码中，forEach内部是一个异步操作（uploadFile(7, formData)），但是你没有等待它完成。forEach不会等待每个迭代都完成，所以它会立即返回，这就是为什么你得到一个空的结果。

你需要使用for...of循环或者for...in循环来代替forEach，以便能够等待每个异步操作完成。以下是修改后的代码：

const uploadImage = (files: any) => {
const data: { title: any; url: string }[] = []
for (let file of files) { // 使用for...of循环
const formData = new FormData()
formData.append('file', file)
const res = await uploadFile(7, formData)
data.push({
title: file.name,
url: config.file_host + res.data.fileUrl
})
console.log(data)
}
return data
}

注意：这段代码还是会有一些问题。当你使用await在一个普通的函数(forEach内部)中时，它将使这个函数返回一个Promise，而这并不是forEach所期望的。在forEach的上下文中，你无法直接使用await。

如果你需要处理一个文件数组并且每个文件都需要进行异步操作，你可能需要使用像map这样的函数来生成一个Promise数组，然后使用Promise.all()等待所有操作都完成。但是这需要将你的上传函数(uploadFile)进行一些修改，使其能够返回一个Promise。例如：

const uploadImage = async (files: any) => {
const data: { title: any; url: string }[] = []
const promises = files.map(file => {
const formData = new FormData()
formData.append('file', file)
return uploadFile(7, formData).then(res => {
data.push({
title: file.name,
url: config.file_host + res.data.fileUrl
})
console.log(data)
})
})
await Promise.all(promises)
return data
}