Vue.js实现Cloudinary图片上传未等待请求完成就执行后续逻辑问题求解

你遇到的核心问题是forEach循环不支持等待异步任务执行完成，uploadFileToCloudinary返回的是异步Promise，循环执行时只会批量发起上传请求，不会等待请求返回结果，就会直接执行后续的dispatch操作，导致存入数据库的cloud_image还未填充完返回的图片链接。

1. 调整上传调用逻辑 #

使用Promise.all等待所有上传任务全部执行完成后，再调用接口存入数据库，修改后的调用代码如下：

if (this.images.length > 4){
    alert("⚠ Maximum 4 images autorisées !⚠")
    return ; 
} else {
    // 把每个上传任务转成Promise，收集到任务数组
    const uploadTasks = this.images.map((image,index) => { 
        return this.uploadFileToCloudinary(image,index,this)
        .then((response) =>{
            console.log('image ',index,' 上传成功')
            this.pourcentageComplete[index] = 100
            return response.secure_url // 直接返回上传后的url，后续统一收集
        })
        .catch((err) =>{
            console.log('上传到Cloudinary失败:',err)
            // 如果要求所有图片上传成功才能提交，保留下行抛错
            throw err 
            // 如果允许部分图片上传失败依然提交，把上行换成下行，后续过滤无效值即可
            // return null
        })
        .finally(()=>{
            console.log('迭代完成:',index)
        })
    })

    // 等待所有上传任务执行完毕
    Promise.all(uploadTasks)
    .then(cloudImageUrls => {
        // 收集所有有效图片链接
        this.cloud_image = cloudImageUrls
        // 如果前面设置了允许部分失败，打开下行过滤空值
        // this.cloud_image = cloudImageUrls.filter(url => !!url)
        
        // 构造payload后再调用存储接口
        const payload = {
            // 此处补充你的其他产品属性
            cloud_image: this.cloud_image
        }
        return this.$store.dispatch('moduleMonture/addMonture',payload)
    })
    .then(() => {
        console.log('产品信息存入数据库成功')
    })
    .catch(err => {
        console.log('流程执行失败：', err)
    })
}

2. （可选）优化上传方法的状态判断逻辑 #

原有uploadFileToCloudinary方法中，状态判断逻辑存在触发时机错误的问题，当请求还未完成时就会提前判断状态码抛错，调整后更稳定：

request.onreadystatechange = () => {
    // 先判断请求是否完成
    if(request.readyState === 4) {
        // 请求完成后再判断状态码
        if(request.status ===200) {
            let response = JSON.parse(request.responseText)
            resolve(response)
        } else {
            let response = JSON.parse(request.responseText)
            let error = response.error.message
            alert('error, status != 200 : '+ error)
            reject(error)
        }
    }
}

内容的提问来源于stack exchange，提问作者Yapi225