vue method for loop wait for function complete

Question

In this vue component, I have a method containing a for loop, calling another method. The second method does a request to the appserver. I need the first function waiting for the second to continue the for-loop. I've tried several async await options but doesn't understand how to implement it.

methods: {
selectFiles(files) {
  this.progressInfos = [];
  this.selectedFiles = files;
},
uploadFiles() {
  this.message = "";
  //var result = 0;
  for (let i = 0; i < this.selectedFiles.length; i++) {
    console.log(i)
    //result = await this.upload(i, this.selectedFiles[i]);
    this.upload(i, this.selectedFiles[i]);
  }
},
upload(idx, file) {
  this.progressInfos[idx] = { percentage: 0, fileName: file.name };
  //console.log("FinDocuNum:" + financialDocument.finDocId)
  FinancialDocumentDataService.upload(1, file, (event) => {
    this.progressInfos[idx].percentage = Math.round(100 * event.loaded / event.total);
  }).then((response) => {
      let prevMessage = this.message ? this.message + "\n" : "";
      this.message = prevMessage + response.status;
      return 1;
  }).catch(() => {
      this.progressInfos[idx].percentage = 0;
      this.message = "Could not upload the file:" + file.name;
      return 0;
    });
}

}

You don't return a promise from upload, so there's nothing to await — Estus Flask
– Estus Flask, Commented Apr 10, 2022 at 13:26
@EstusFlask, so I must make Upload return a promise in order for this to work? — Sunfile
– Sunfile, Commented Apr 10, 2022 at 13:53

Medab · Accepted Answer · 2022-04-10 14:59:46Z

1

The upload function must be async and return a promise like this:

async upload(file) {
    return new Promise((resolve, reject) => {

        axios({url: url, data: file, method: 'POST'})
            .then(resp => {
                resolve(resp)
            })
            .catch(err => {
                reject(err)
            })
    })
},

answered Apr 10, 2022 at 14:59

Medab

638 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue method for loop wait for function complete

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related