Запрос на получение дает ответ с данными в нем, но при конкретном обращении к .data он дает неопределенный

Question

Извинения, если терминология не велика, все еще плохо знакома с fullstack.

Здравствуйте!Я пытаюсь получить всех пользователей в моей БД.Ответ get() равен OK, так как клиент получает ответ (see image below)

Проблема заключается в том, что при попытке получить.data Я получаю undefined.

Вот мой Vue Component

import UserService from '@/services/UsersService.js'

export default {
  data () {
    return {
      users: null
    }
  },
  async mounted () {
    // GET request for all users.
    this.users = UserService.index().data
    console.log('The response is OK', await UserService.index())
    console.log('when trying to fetch the .data I am getting  ', await this.users)
  }
}

Функция index ()

import Api from '@/services/Api'

export default {
  index () {
    return Api().get('users')
  }
}

Все отлично работает, кроме того, что яполучить undefined данные ...

Answer 1

Я думаю, что вы забыли получить данные асинхронно?

  async mounted () {
    // GET request for all users.

-   this.users = UserService.index().data
+   const res = await UserService.index()
+   this.users = res.data

    console.log('The response is OK', await UserService.index())
    console.log('when trying to fetch the .data I am getting  ', await this.users)
}

Вы правильно используете синтаксис await в первом console.log, что может объяснить, почему данные возвращаются правильно.