在ForEach下使用Promise – 凤曦的小窝

工程上遇到了一个逻辑：
要求在提交json前先上传图片，并将上传图片返回的Url写入上传的json结构中

一看要求很明白了，先并行提交所有的图片并拿到返回的URl值，最后上传。
很简单的逻辑

然而，做起来的时候才发现，一大堆问题

首先选择对所有需要进行图片处理的对象进行ForEach，
在ForEach回调里面请求上传接口

let aa = () => {
    this.album.forEach(item => {
        let data = new FormData();
        data.append("file", item);
        this.$api.store.upload({}, data).then(response => {
            this.form.album[index].img = response;
        })
    });
}

因为有多个图片上传的字段，所以使用Promise.all来并行请求

Promise.all([aa]).then(_ => {
    this.$api.info.publish({}, {
        type: "xxx",
        info: JSON.stringify(this.info_studio_form)
    }).then(_ => {
        this.$emit("finish")
    }).catch(e => console.log(e.message))
});

然后尴尬的发现，promise在图片请求完成之前就提交上传了
即使对上传函数包装一层也没有效果
查阅资料后发现，ForEach本身就是并行的，ForEach中的Promise自然就无法等待。

因此决定在Foreach中将上传的Promise提取成一个Promise数组，
再去Promise.all()执行

let promise_array = [];
this.album.forEach(item => {
    let data = new FormData();
    data.append("file", item);
    promise_array.push(
        this.$api.store.upload({}, data).then(response => {
            //todo someting
        })
    );
});
Promise.all(promise_array).then(_ => {
    this.$api.info.publish({}, {
        type: "xxx",
        info: JSON.stringify(this.info_studio_form)
    }).then(_ => {
        this.$emit("finish")
    }).catch(e => console.log(e.message))
});

声明: 本文采用 BY-NC-SA 协议进行授权，如无注明均为原创，转载请注明转自凤曦的小窝
本文地址: 在ForEach下使用Promise