vue.js 异步方法不等待函数

9jyewag0  于 7个月前  发布在  Vue.js
关注(0)|答案(2)|浏览(99)

我有这个错误,还没有得到解决,虽然已经研究了很多在MDN和这里。我试图使用的是javascript和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在“2.”之前打印“3.”(位于await调用之后):


的数据
我做错了什么?已经尝试过修改await:let foo = await this.loadtags(),并在loadtags函数的末尾包含一个'return 0',但对我不起作用。

tzxcd3kk

tzxcd3kk1#

您不会从loadtags方法返回任何内容,因此代码不会等待。
更改此:

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

字符串
对此:

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


async/await或多或少只是在Promise上加糖,所以返回Promise会给你一些在另一个方法中等待的东西。

r9f1avp5

r9f1avp52#

这就是我在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;
},

字符串

相关问题