Почему Vue.js возвращает __ob__: Observer?

Question

[Андрей]

API:

created () {
    this.loadProfile()
  },
getPosts(author) {
    return axios.get(`${options.serverUrl}/posts/${author}`)
  },

Компонент:

async loadPosts () {
      const response = await services.getPosts(this.$route.params.id)
      this.posts = response.data
    },

А в итоге response.data = [__ob__: Observer]. То есть Vue не дожидается выполнения данного запроса. Почему?

Самая главная странность в том, что это происходит при перезагрузке страницы через браузер. Если происходит перезагрузка через HotReload (при редактировании), или при переходе по роутам, то метод отрабатывает как нужно и возвращает ожидаемые значения.

Comments

[Андрей Хохлов]

Чему изначально равно this.posts (в data компонента)?

Что выведет в консоль тут:

async loadPosts () {
  const response = await services.getPosts(this.$route.params.id)
  console.log(response.data); <--
  this.posts = response.data
},

?

Answer 1

[Павел Корнилов]

axios.get возвращает не response, а Promise


Поэтому надо попробовать:

async loadPosts () {
      await services.getPosts(this.$route.params.id).then((response) => {this.posts = response.data})
    },

Comments

[Андрей]

Таким образом я тоже пробовал, но все равно не срабатывает.

[Андрей]

Повторюсь, что наиболее важный момент в этом вопросе - этот метод не срабатывает только при обычной перезагрузке страницы.

[Павел Корнилов]

Что выводит консоль при обычной загрузке, если поставить так:

async loadPosts () {
      await services.getPosts(this.$route.params.id).then((response) => {console.log(response); this.posts = response.data})
    },

[Андрей]

Павел Корнилов, абсолютно то же самое)

[Павел Корнилов]

AndrewRusinas, тогда ХЗ.
Извини, не помог...

Answer 2

[karambafe]

Павел Корнилов все правильно написал, метод get у axios асинхронный, возвращает промис.

Поэтому метод getPosts тоже нужно сделать асинхронным:

async getPosts(author) {
   try {
     const { data } = await axios.get(`${options.serverUrl}/posts/${author}`);
     return data; 
  } catch(error) {
     return error; // важный момент, что будет возвращать функция при ошибках выполнения запроса на сервер
  }
 },

Сделал небольшой пример на codeSanbox, файл App.vue.
В консоли видна разница вывода для текущего метода getPosts и нового getPostsAsync

p.s.
Из контекста данного примера, на мой взгляд, метод getPosts достаточно бесполезный - увеличивает уровень абстракции, но не дает полноценное понимание кода.

Я бы внес запрос к серверу прямо в метод loadPosts:

async loadPosts () {
  this.loading = true; // вешаем лоадер на момент асинхронного запроса

  try {
     const { data } = await axios.get(`${options.serverUrl}/posts/${this.$route.params.id}`);
     this.posts = data;
     this.loading = false;
  } catch(error) {
     // делаем что-то в случае ошибки
     this.loading = false;
  }
},