this await throwing unexpected token error

Question

I have a simple async function. It just sends a request and returns the data:

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
}

And this is how I'm using the function:

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

The problem is, the code after catch runs if there's an error inside then. But this way I don't know whether the catch error is an request error or and error triggered by the code inside then.

I'm trying try and catch to solve that problem:

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')
  })
},

However, I get an unexpected token error in this line: await this.updatePanorama(payload)

What am I doing wrong?

you can't use await unless the function is `async` – Jaromanda X Dec 19 '16 at 02:50 — Jaromanda X, Dec 19 '16 at 02:50
FYI, `async/await` is not part of ES7. – Felix Kling Dec 19 '16 at 07:16 — Felix Kling, Dec 19 '16 at 07:16

score 1 · Accepted Answer · edited May 23 '17 at 12:13

1

The problem is, the code after catch runs if there's an error inside then

The solution for that is to not use catch, but the second then parameter. Have a look at the difference between .then(…).catch(…) and .then(…, …) for details.

I'm trying try and catch to solve that problem

That won't work, the catch clause will still be called if there's an exception thrown by setIsLoading or handleAlert.

I get an unexpected token error. What am I doing wrong?

You have not declared the handleUpdatePanorama method as async.

To mitigate the issues and fix the syntax, you could write

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)
},

edited May 23 '17 at 12:13

Community

1
1

answered Dec 19 '16 at 02:50

Bergi

630,263
148
957
1,375

They say that using the second then parameter is an anti-pattern? – alex Dec 19 '16 at 02:56
`They` don't always know what `they` are talking about :p - it has its uses – Jaromanda X Dec 19 '16 at 02:59
@alex Who is *they*? No, it's not an antipattern when you *want* this (in other use cases undesirable) behaviour. – Bergi Dec 19 '16 at 03:07
@Bergi By they I meant the Internet - okay, maybe you're right. – alex Dec 19 '16 at 03:08
1

@alex Hey, *I'm* the internet here! :-P – Bergi Dec 19 '16 at 03:08

score 1 · Answer 2 · answered Dec 19 '16 at 02:56

If you need to handle errors specifically from updatePanorama, use the second argument to .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')
    })
}

note: if you return (or have no return statement) from the error handler, any subsequent .then(onSuccess will execute, if you throw an error (or return Promise.reject() for example, then the .catch() code will also run

this await throwing unexpected token error

2 Answers2