map方法里使用await

最新推荐文章于 2025-03-23 11:34:42 发布

原创最新推荐文章于 2025-03-23 11:34:42 发布 · 2.9k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

TKP

标签

#javascript #前端 #jquery

javaScript 同时被 2 个专栏收录

48 篇文章

订阅专栏

vue

47 篇文章

订阅专栏

本文讲述了在JavaScript中如何在map方法中正确使用await处理上传图片的压缩任务，通过Promise.all解决并发问题，以及示例代码详解。

map方法里使用await

今天碰到一个需求，上传多张照片时，先进行压缩，再调上传图片接口。
但是在遍历file文件进行压缩是发现了问题，在map里写入await方法就会报错

file.map((item) => {
	// let compressFile = await compressImg(item.file); 报错
)}

后来找到了解决方法：就是使用Promise.all多次调用await方法

// 使用async await 处理异步操作
let results = await Promise.all(arr.map(async (item) => {
// 等待异步操作完成，返回执行结果
return await asyncWorker(item);
}))

完整代码如下

 let results = await Promise.all(
 			//file就是图片列表数组
          file.map(async (item) => {
            // 等待异步操作完成，返回执行结果
            let compressFile = await compressImg(item.file);
            //compressFile为当前压缩完的图片
            //压缩完就可以执行自己想进行的操作了
            var date = new Date();
            var number = date.getTime(); 
            let paramsObj = {
              imageFile: compressFile,
              type: "qtyxzl",
              busId: this.busId,
              number: number, //其他影像资料
            };
            this.uploadFileqtyxzl(paramsObj, index, (fastdfs, ossUrl) => {
              // 接口返回的id  塞到 key + index  的对象里面去
              item.fastdfs = fastdfs;
              item.ossUrl = ossUrl;
            });
          })
        );