异步方法不等待函数完成

Question

我遇到了这个错误，虽然在MDN和这里进行了很多研究，但还没有解决。我正在尝试使用async和await，但JavaScript不等待'await'函数结束。以下是代码示例：

 methods: {
    async search (terms, done) {
      console.log('1.')
      this.filter = this.$refs.chipsInput.input
      await this.loadtags()
      console.log('3.')
      done(this.tagsList)
    },
    loadtags () {
      this.$axios
        .get('/api/tags/?id__icontains=&id=&name__icontains=' + this.filter + '&name=&ordering=name&page_size=20')
        .then(response => {
          console.log('2.', response.data.results)
          let temp = response.data.results
          this.tagsList = temp.map(obj => {
            return {
              name: obj.name,
              label: obj.name,
              value: obj.name,
              idField: obj.id
            }
          })
        })
    },

这是控制台日志的屏幕截图，显示了JavaScript在'await'调用之后打印出'3.'之前打印出'2.'的情况。

我到底做错了什么？已经尝试过修改等待的方式，像这样：let foo = await this.loadtags()，并在loadtags函数的末尾加上了'return 0'，但对我来说没有起作用。

- Leo Prada

---

你没有从 loadTags 返回任何东西来进行 await。 - Jared Smith

Answer 1

您的 loadtags 方法没有返回任何内容，所以代码不会等待。

请将以下代码进行更改:

loadtags () {
  this.$axios
    .get(...

变成了这样：

loadtags () {
  return this.$axios
    .get(...

async/await 实际上只是 Promise 的语法糖，所以返回 Promise 使你在另一个方法中可以等待某些东西。

- Jared Smith

---

为什么不直接声明异步的loadtags，然后等待this.$axios呢？ - Dirigible

@Dirigible，你可以这样做，而且很可能应该这样做，因为这样会更加一致。 - Jared Smith

Answer 2

这是我在Vue应用程序中解决此问题的方法。

在用户使用submitNewTag()提交新“标签”之前，我需要使用async theTagExists()检查它是否已经存在于标签列表中。

submitNewTag() {
  this.clearError();

  this.theTagExists().then((res) => {
    if (!res) {
      console.log("TAG DOES NOT EXIST, SO ADD IT TO THE DATABASE");
      this.saveTagToDatabase();
    }
  });
},
async theTagExists() {
  console.log("CHECKING IF A TAG EXISTS");
  await axios.get(`${this.apiUrl}/alltags`).then((res) => {
    console.log("CHECKING IS DONE");
    this.tagExists = res.data.allTags.some(
      res =>
        res.name.trim().toLowerCase() ===
        this.newTag.tagName.trim().toLowerCase()
    );
  });
  console.log("RETURN THE RESULT");
  return this.tagExists;
},

- Leopold Kristjansson