Question

我有一个简单的async功能。它只发送一个请求并返回数据：

export const updatePanorama = async ({ commit }, payload) => {
  const urlEnd = '/v1/pano/update'
  const type = 'post'
  const resp = await api.asyncRequest(urlEnd, type, payload)
  commit('SET_PANORAMA', resp.data)
  return resp
}

这就是我使用该功能的方式：

handleUpdatePanorama (panorama) {
  const payload = {}
  this.updatePanorama(payload).then(resp => {
    this.setIsLoading(false)
    this.handleAlert('updateSuccess', 'success')
  }).catch(() => {
    this.setIsLoading(false)
    this.handleAlert('updateError', 'danger')
  })
},

问题是，如果catch内有错误，then之后的代码就会运行。但是这样我就不知道catch错误是一个请求错误还是由内部代码触发的错误。

我正在尝试try和catch来解决这个问题：

handleUpdatePanorama (panorama) {
  try {
    const payload = {}
    const resp = await this.updatePanorama(payload)
    console.log('resp:', resp)
    this.setIsLoading(false)
    this.handleAlert('updateSuccess', 'success')
  } catch (err) {
    this.setIsLoading(false)
    this.handleAlert('updateError', 'danger')
  })
},

但是，我在此行中收到意外的令牌错误：await this.updatePanorama(payload)

我做错了什么？

Answer 1

问题是，如果catch
内有错误，then之后的代码就会运行

解决方法是不使用catch，而是使用第二个then参数。有关详细信息，请查看difference between .then(…).catch(…) and .then(…, …)。

我正在尝试try和catch来解决这个问题

如果catch或setIsLoading引发异常，那么handleAlert子句仍会被调用。

我收到意外的令牌错误。我做错了什么？

您尚未将handleUpdatePanorama方法声明为async。

要缓解问题并修复语法，您可以编写

async handleUpdatePanorama (panorama) {
  var result
  try {
    const payload = {}
    const resp = await this.updatePanorama(payload)
    console.log('resp:', resp)
    result = ['updateSuccess', 'success']
  } catch (err) {
    result = ['updateError', 'danger']
  } finally {
    this.setIsLoading(false)
  }
  this.handleAlert(...result)
},

Answer 2

如果你需要专门处理来自updatePanorama的错误，请使用.then的第二个参数（onSuccess，onError）

handleUpdatePanorama(panorama) {
    const payload = {}
    this.updatePanorama(payload).then(resp => {
        this.setIsLoading(false)
        this.handleAlert('updateSuccess', 'success')
    }, err => {
        // handle error from updatePanorama
        // you can throw err if you also want to handle the error in .catch()
    }).catch(() => {
        this.setIsLoading(false)
        this.handleAlert('updateError', 'danger')
    })
}

注意：如果你从错误处理程序中return（或者没有return语句），那么任何后续的.then(onSuccess都将执行，如果你抛出错误（或者返回Promise.reject（），例如，那么.catch（）代码也将运行

这等待抛出意外的令牌错误

2 个答案: