526互联

记录一下vue中的异步循环

发布时间 2024-01-04 16:20:35作者: 妞妞猪

刚开始是在使用文件上传的时候，多个文件上传进度进行显示，然后在多文件上传的时候发现，会一次性进行全部上传，查了一下发现是因为js是单线程的，所以会有这个问题

于是开始寻找异步循环的方法，代码如下

async submitCreateImgUrl(){//批量上传
      this.submitLoading = true
      for(let i =0;i<this.fileList.length;i++){
        await this.doUploadFiles(this.fileList[i],'create')
      }
      this.checkUpload()
   },
 
doUploadFiles(item,type){
      return new Promise((resolve, reject) => {
        // 转换成接口需要的格式
        const formData = new FormData()
        formData.append("files", item.raw)
        handleUploadFile({FileType:1,RelatedId: this.userId,FileName:item.raw.name,formData:formData})
        .then(res=>{
            console.log(res)
            resolve()
        })
        .catch(err=>{
            console.log(err)
            reject()
        })
      })
    },

 这个功能是需要等多文件全部上传完成后再进行判断是否上传成功，这里使用了promise进行异步 ，结果顺利达到了目的

 

但是在另一个uniapp项目中，这个方式似乎并没有生效，就用到另外一种方法

async loopAsync() {
　　for (let i = 0; i < 5; i++) {
　　　　const result = await this.asyncFunction(i + 1);
　　　　console.log(result);
　　　}
},


asyncFunction(index) {
　　return new Promise((resolve, reject) => {
　　// 模拟异步操作
　　　　setTimeout(() => {
　　　　　　resolve(`第${index}次异步操作完成！`)
　　　　}, index * 500);
　　});
　}
},

参考https://www.cnblogs.com/vickylinj/p/16647850.html

https://www.cnblogs.com/liangtao999/p/13089966.html