Асинхронный метод не ожидает функции - VUE - PullRequest
Новая
       10

Асинхронный метод не ожидает функции - VUE

0 голосов
/ 25 августа 2018

У меня есть эта ошибка, и мне не нужно ее исправлять, хотя я много исследовал в MDN и здесь.Как говорится в заголовке VUE, я пытаюсь использовать 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».(который ставится после ожидающего вызова) перед '2.': Изображение: console

¿Что я делаю не так?я уже пытался изменить await следующим образом: let foo = await this.loadtags () и включил 'return 0' в конце функции loadtags, но у меня не получилось.Наверное, это глупость, извините за это.

Ответы [ 2 ]

0 голосов
/ 16 ноября 2018

Вот как я решил это в своем приложении 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;
},
0 голосов
/ 25 августа 2018

Вы ничего не возвращаете из метода loadtags, поэтому код не ждет.

Измените это: 

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

На это: 

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

async/await более или менее просто сахар по сравнению с Обещаниями, поэтому возвращение Обещания дает вам что-то, что можно ожидать в другом методе.

...