工程上遇到了一个逻辑:
要求在提交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))
});
分类: 前端

0 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

隐藏
变装