H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

页面中有一个搜索的方法,调用时会调用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)
  })

回答:

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

回答:

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

本文地址:H5W3 » vue中methods用async写法报错但能执行

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址