Question

我有这个错误，尽管在MDN和此处进行了大量研究，但仍未解决。正如标题所说，我正在尝试使用async和await，但是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
            }
          })
        })
    },

我还不能发布图片，但是添加了一个链接，您可以在其中查看js打印“ 3”的控制台日志。（放置在await调用之后）在'2.'之前：图片： console

¿我在做什么错？已经尝试像这样修改await：让foo =等待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()提交新的“标签”之前，我需要使用async theTagExists()检查它是否已存在于标签列表中。

submitNewTag() {
  const that = this;
  this.clearError();

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

异步方法不等待功能-VUE

2 个答案: