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