@AndrewRusinas

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

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 (при редактировании), или при переходе по роутам, то метод отрабатывает как нужно и возвращает ожидаемые значения.
  • Вопрос задан
  • 3966 просмотров
Пригласить эксперта
Ответы на вопрос 2
KorniloFF
@KorniloFF Куратор тега JavaScript
Работаю по font-end / JS
axios.get возвращает не response, а Promise
5c7239376688a253999293.png

Поэтому надо попробовать:
async loadPosts () {
      await services.getPosts(this.$route.params.id).then((response) => {this.posts = response.data})
    },
Ответ написан
@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;
  }
},
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
19 апр. 2024, в 05:01
999999 руб./за проект
19 апр. 2024, в 03:52
1000 руб./за проект
19 апр. 2024, в 03:01
1000 руб./за проект