Question

不能在 VUEJS 中的异步函数外使用关键字“await”

2020-07-11

981

javascript reactjs vue.js

当我尝试在异步函数之外等待时出现此错误 无法在异步函数之外使用关键字“await” ，我想知道应该使用哪种方法来解决这个问题？提前致谢。

这是我的代码：

async addCoursToClassYear() {
  setTimeout(() => {
    this.loading = false;
    await this.$store.dispatch("academicYear/addCoursToClassYear", {
        ...this.form,
        ...this.singleYear
      })
      .then(() => {
        this.handleSuccess();
        this.closeModal();
      })
      .catch(error => {
        if (error.response.status === 422) {
          this.serverValidation.setMessages(error.response.data.errors);
        } else {
          this.handleError(error);
        }
      });
  })
},

Answer 1

您在 setTimeout 中使用了 await。因此，您需要创建异步 setTimeout 函数

async addCoursToClassYear() {
  setTimeout(async() => {
    this.loading = false;
    await this.$store.dispatch("academicYear/addCoursToClassYear", {
        ...this.form,
        ...this.singleYear
      })
      .then(() => {
        this.handleSuccess();
        this.closeModal();
      })
      .catch(error => {
        if (error.response.status === 422) {
          this.serverValidation.setMessages(error.response.data.errors);
        } else {
          this.handleError(error);
        }
      });
  })
},

我已将

setTimeout(() => {

更改为

setTimeout(async() => {

Answer 2

在这里，只需将 async 放在使用 await 的函数中即可。

async addCoursToClassYear() {
  setTimeout(async () => {
    this.loading = false;
    await this.$store.dispatch("academicYear/addCoursToClassYear", {
        ...this.form,
        ...this.singleYear
      })
      .then(() => {
        this.handleSuccess();
        this.closeModal();
      })
      .catch(error => {
        if (error.response.status === 422) {
          this.serverValidation.setMessages(error.response.data.errors);
        } else {
          this.handleError(error);
        }
      });
  })
},