开发者问题收集

VueJS-不能在异步函数之外使用关键字“await”

2020-06-23
2584

我有此代码,但出现此错误 - “无法在异步函数之外使用关键字‘await’”:

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

我该如何解决这个问题?我被这个问题困扰了几个小时。

谢谢。

3个回答

您无需使用 .then 自行解开承诺,因为您已处于异步函数中。当您使用 .then((result) => {...}) 时,该箭头函数不再是异步的。我的建议:

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

或者,您可以通过执行以下操作将箭头函数标记为异步:

this.$validator.validateAll().then(async (result) => {
Alberto Rivera
2020-06-23

我们知道 async..await 是成对的关键字,

正如您在上层函数中使用了 async 一样,您的内部函数没有 async 关键字,但是您在函数内部使用了 await 。这就是为什么它显示错误。我只是标记了非 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';
                            }
                        }
                    });

因此您必须在内部函数中使用 async 关键字。

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

Mahamudul Hasan
2020-06-23

登录函数已经是异步函数,你可以用 await 代替 .then() 来调用 this.$validator。因为 .then(() => {}) 里面是另一个回调函数,而不是异步函数。 这是我的建议:

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);
  }```
JoinCompany
2020-06-23