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

Question

我有这段代码，我收到了这个错误——“不能在异步函数之外使用关键字'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);                }            },我该如何解决这个问题？被困在这几个小时了。

Answer 1

你不需要自己解开承诺.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) => {

Answer 2

我们知道这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) => { /* 你的代码在这里 */ }

Answer 3

登录函数已经是异步函数，你可以用 await 调用 this.$validator 而不是 .then()。因为内部 .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);

  }```