CODEWITHSUNDEEP
javascriptvue.js
PinoyStackOverflower
PinoyStackOverflower

Reputation: 5302

VueJS - Can not use keyword 'await' outside an async function

I have this code and I am getting this error - "Can not use keyword 'await' outside an async function":

async login() {
                try {
                    this.$validator.validateAll().then((result) => {
                        if (result) {
                            this.state = 'LOADING';
                            this.response = [];
                            const authResponse = await axios.post('/api/auth/login', this.user);
                            const auth = authResponse.data;

                            if (auth.success) {
                                this.$authLoggedIn(auth);
                                this.$authRedirectToDefault();
                            } else {
                                this.response.push(auth.error);
                                this.state = 'ERROR';
                            }
                        }
                    });
                } catch (error) {
                    this.state = 'ERROR';
                    this.response.push(error);
                }
            },

How can I resolve this? Been stuck on this for a couple of hours.

Thanks.

Upvotes: 6

Views: 2614

Answers (3)

Mahamudul Hasan
Mahamudul Hasan

Reputation: 2823

we know that async..await is pair keyword,

Just you have used async in your upper function.your inner function has not async keyword, but you have used await inside the function. thats why it is showing error. just i marked the function that is not async

(result)/*this function has not async*/ => {
                        if (result) {
                            this.state = 'LOADING';
                            this.response = [];
                            const authResponse = await axios.post('/api/auth/login', this.user);
                            const auth = authResponse.data;

                            if (auth.success) {
                                this.$authLoggedIn(auth);
                                this.$authRedirectToDefault();
                            } else {
                                this.response.push(auth.error);
                                this.state = 'ERROR';
                            }
                        }
                    });

so you have to use async keyword into inner function.

async (result) => { /* your code here */ }

Upvotes: 1

JoinCompany
JoinCompany

Reputation: 514

The login function already async function, you can call this.$validator with await instead .then(). because inside .then(() => {}) is another callback function not async function. This is my suggestion:

try {
    let result = await this.$validator.validateAll();
    if (result) {
      this.state = 'LOADING';
      this.response = [];
      const authResponse = await axios.post('/api/auth/login', this.user);
      const auth = authResponse.data;

      if (auth.success) {
        this.$authLoggedIn(auth);
        this.$authRedirectToDefault();
      } else {
        this.response.push(auth.error);
        this.state = 'ERROR';
      }
    }
  } catch (error) {
    this.state = 'ERROR';
    this.response.push(error);
  }```

Upvotes: 0

Alberto Rivera
Alberto Rivera

Reputation: 3752

You don't need to unwrap the promise yourself with .then, since you are already in an async function. When you use .then((result) => {...}) that arrow function is not async anymore. My suggestion:

  try {
    const result = await this.$validator.validateAll()
    if (result) {
      this.state = 'LOADING';
      this.response = [];
      const authResponse = await axios.post('/api/auth/login', this.user);
      const auth = authResponse.data;

      if (auth.success) {
        this.$authLoggedIn(auth);
        this.$authRedirectToDefault();
      } else {
        this.response.push(auth.error);
        this.state = 'ERROR';
      }
    }
  } catch (error) {
    this.state = 'ERROR';
    this.response.push(error);
  }

Alternatively, you can mark the arrow function as async by doing:

this.$validator.validateAll().then(async (result) => {

Upvotes: 3

Related Questions