vue中methods用async写法报错但能执行

Question

页面中有一个搜索的方法，调用时会调用service层的分页查询方法，由于这个方法是调用封装的axios异步所以用async和await

但页面初始化和方法触发的时候会报错：Invalid handler for event "click": got undefined

把async和await去掉就不会报错了

可是这个搜索的方法正常执行了啊，结果页正常显示，就是会在控制台出现一堆上面的错误，找不到点击事件

（PS:不知道为啥网站上传不了图片了，就只能贴代码啦）

user.vue

async handleSearch() {
  console.log('搜索啦')
  let res = await this.service.findPage(this.searchInfo)
  console.log(res)
  this.pageList = res.list
  this.total = res.total
}

封装的axios最终处理如下

fetch.js

return axios(settings)
  .then(response => {
    let returnData = response.data.content || {}
    return returnData
  }).catch(err => {
    loadingInstance.close()
    Message.error('哇，请求出错啦~~~')
    return Promise.reject(err)
  })

Answer 1

事件处理函数不能设置为async的，不能会出问题，你可以把你现在的事件处理函数里的代码封装成一个函数。这个函数可以加async，然后再调用

Answer 2

我猜是这里return的这个对象不是Promise对象造成的，但是不是很确定。因为await后面必须是Promise对象才可以的，你看看是不是应该把 return returnData 改成 return Promise.resolve(returnData)