记录一下vue中的异步循环

刚开始是在使用文件上传的时候，多个文件上传进度进行显示，然后在多文件上传的时候发现，会一次性进行全部上传，查了一下发现是因为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