Vue js - async await issue

Question

My Code in Login.Vue is as below

methods: {
            async validateLoginBeforeSubmit () {
                this.$validator.validate().then((result) => {
                    if (result) {
                        var data = {
                            email: this.email,
                            password: this.password
                        }
                        var response =  await this.$api('POST', 'login', data);
                    }
                })
            },
        },

and this is the prototype function

import Vue from 'vue';

Vue.prototype.$api = async() => function(method, url, data){
    if (method == 'POST') {
      return new Promise((resolve) => {
        this.$http.post(url, data).then((response) => {
          resolve(response);
        }).catch((error) => {
          if (error.response.status == '401') {
            /* Destroy token from local storage and redirect to login page */
          }
          resolve(error.response);
          return false;
      });
    });
  }
}

It is throwing below error

error  Parsing error: Unexpected reserved word 'await'.

Can anyone help me for the same?

You’re not using await in an async function.

Terry
– Terry

2021-12-24 15:01:02 +00:00
Commented Dec 24, 2021 at 15:01 — Terry
– Terry, Commented Dec 24, 2021 at 15:01
Avoid the Promise constructor antipattern in $api!

Bergi
– Bergi

2021-12-25 02:18:14 +00:00
Commented Dec 25, 2021 at 2:18 — Bergi
– Bergi, Commented Dec 25, 2021 at 2:18

match · Accepted Answer · 2021-12-24 14:57:08Z

2

You shouldn't mix and match async/await and traditional then promise handling as it can cause confusion.

Insted try:

async validateLoginBeforeSubmit () {
  var result = await this.$validator.validate()
  if (result) {
    var data = {
      email: this.email,
      password: this.password
    }
    var response = await this.$api('POST', 'login', data);
  }
}

answered Dec 24, 2021 at 14:57

match

11.2k3 gold badges25 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ronak Solanki Over a year ago

@match- Your solution works at all, amazing Now i have one small question What if i don't want to return anything if catch block execute from the Vue.prototype.$api function and just alert there and return false?

Collectives™ on Stack Overflow

Vue js - async await issue

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related