不等待函数的异步方法 - VUE

Question

我遇到了这个错误，虽然在 MDN 和此处进行了很多研究，但还没有解决它。正如标题所说，VUE 我正在尝试使用异步和等待，但 js 没有等待 '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
            }
          })
        })
    },

我还不能 post 图片，但是添加一个 link 在那里你可以查看 js 打印'3'的控制台日志。（放在 await 调用之后）在 '2.' 之前：图片： console

¿我做错了什么？已经尝试像这样修改 await ：让 foo = await this.loadtags() 并在 loadtags 函数末尾包含一个 'return 0' 但对我不起作用。可能是个蠢货，不好意思。

Answer 1

您没有从 loadtags 方法返回任何内容，因此代码不会等待。

改变这个：

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

为此：

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

async/await 或多或少只是 Promises 的糖分，所以返回 Promise 可以让你在另一种方法中等待。

Answer 2

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

在用户提交带有 submitNewTag() 的新 "tag" 之前，我需要使用 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;
},

不等待函数的异步方法 - VUE

Async method not waiting for a function - VUE

javascript

asynchronous

async-await

vue.js

quasar