同步请求的问题

[tandy]

使用 vue 开发时，遇到同步请求的问题，我需要遍历执行一个上传图片的操作，待图片全部上传完毕再执行数据提交，代码逻辑大概如下

methods: {
    submit () {
        this.uploadImg()
        // 需等待图片完成后再执行以下操作
        ......
    },

    uploadImg () {
        this.imgArray.forEach(item => {
            doUpload(item) // 执行上传，这是一个网络的异步请求
        })
    }
}

我试着使用以下方式进行同步

methods: {
    submit () {
        this.uploadImg()
        // 需等待图片完成后再执行以下操作
        ......
    },

    async uploadImg () {
        await this.imgArray.forEach(item => {
            doUpload(item) // 执行上传，这是一个网络的异步请求
        })
    }
}

methods: {
     async submit () {
        await this.uploadImg()
        // 需等待图片完成后再执行以下操作
        ......
    },

    uploadImg () {
        return new Promise((resolve, reject) => {
             this.imgArray.forEach(item => {
                 doUpload(item) // 执行上传，这是一个网络的异步请求
             })
             resolve（）
       }）
    }
}

都不能达到同步效果，图片上传和其他的操作异步执行了，请问各位前端大佬这种需求该怎么做

[sha虫剂]

你把其他操作放在上传网络请求的返回结果里面执行不就好了

[chenrynet]

定义一个变量 上传后更改变量的值 监听该变量 做其他操作

[weixin_50944805]

methods: {
    async submit () {
        await this.uploadImg()
        // 需等待图片完成后再执行以下操作
        ......
    },

    uploadImg () {
        const arr = []
        this.imgArray.forEach(async (item) => {
            arr.push(doUpload(item)) // 执行上传，这是一个网络的异步请求
        })
        return Promise.all(arr)
    }
}

// 试试这样

[weixin_50944805]

第10行不用 async