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

user_822465 0
Viewed 1933

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.

vue.js javascript
3 Answers

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) => {
user_52784320

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 */ }

user_52567590

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);
  }```
user_55413450
Related