如何在vuejs中执行其他操作之前等待函数的响应

Question

我有一个图片上传功能，这个上传完成后返回一个数据，我在该功能下面有一行来做另一个任务。问题是vuejs / js不会等到第一个函数完成任务。所以，这就是我的代码：

methods : {

    uploadImage (file) {

        this.uploadModule.upload(file); 

        if(this.uploadModule.isSuccess) {
             this.images.push(this.uploadModule.response)
        }

      // someFunction()
  }
}

因此，在上面的示例中，由于upload（）方法需要一些时间，因此someFunction()部分会在this.images.push()部分之前运行。

是否需要等到上传完成后再运行其他功能？

Answer 1

您可以从上传方法返回Promise，并在Promise的“next”方法中执行下一部分代码作为回调。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

它应该是这样的：

methods : {

  uploadImage (file) {

    this.uploadModule.upload(file).then(function () {
      if(this.uploadModule.isSuccess) {
        this.images.push(this.uploadModule.response)
      }

      // someFunction()
    })
  }
}

如果上传未完成，您还可以使用Promise拒绝回调来处理错误，并使用catch方法处理错误：

methods : {

  uploadImage (file) {

    this.uploadModule.upload(file).then(function () {
      this.images.push(this.uploadModule.response)
    }).catch(function (error) {
      console.log(error)
    })
  }
}