如何在 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)
    })
  }
}