如何在vue.js中发出响应之前等待axios响应

Question

我在vuejs中有一个小组件用于文件上传（使用axios）。我正在尝试从文件上传中发出响应，如下所示：

methods: {
  ...
  upload (){
    axios.put(URL).then(response => {

    console.log('response', response)
    this.$emit('uploaded', response)

    }).catch(error => {

    })
  }

}

但是在这段代码中，即使console.log()响应显示正常，emit也显示了undefined。我认为在响应准备好之前就已经调用了发射器。

无论如何，有使用async / await解决此问题的方法吗？

Answer 1

console.log响应显示正常，但发射显示未定义。

不确定您的意思是什么，因为如果响应在内部可用，console.log那么它也应该在内部可用this.$emit。（除非this.$emit它本身给您undefined提供了范围问题，但事实并非如此，因为您似乎正在使用箭头功能）。

我认为在响应准备好之前就已经调用了发射器

它在回调内部，因此仅在请求完成后才应调用它。

但是，如果您想尝试异步/等待，请执行以下操作：

async upload() {
  try {
     let response = await axios.put(URL);
     console.log('response', response)
     this.$emit('uploaded', response)
  } catch(error) {
     // error
  }
}