时间戳

首页 > 解决方案 > Vue：在函数中正确使用 async/await？

vue.js - Vue：在函数中正确使用 async/await？

问题描述

我仍在尝试习惯异步/等待，但我想我错过了一些东西。我有一个带有@click调用的按钮submitFinalAssets。在里面submitFinalAssets()，我正在尝试查看是否有图像等待上传。如果是这样，那么我想调用triggerDropzoneUpload()并等待它完成，然后再执行submitFinalAssets().

methods: {

 triggerDropzoneUpload: function() {
        if (this.$refs.myVueDropzone.getActiveFiles()) {
            return this.$refs.myVueDropzone.processQueue();
        } else {
        return;
    },

    submitFinalAssets: async function() {
        if (!this.note) {
            this.showError = true;
        }
    
        await this.triggerDropzoneUpload();
        
        axios.post('/upload-urls', {
           image:  this.imageUrl,
        })
    });
  }
}

标签： vue.js

解决方案

您还必须向awaitaxios 发布请求，因为它是异步的。

submitFinalAssets: async function() {
    if (!this.note) {
        this.showError = true;
    }

    await this.triggerDropzoneUpload();

    await axios.post('/upload-urls', { // put the await keyword here to wait for the asynchronous axios post request
       image:  this.imageUrl,
    })
});

有关异步等待的更多信息，这篇文章很好地解释了它。

推荐阅读