Как извлечь из promise нужный мне объект с данными?

Question

По API получаю данные с помощью axios. Если выводит в функции, то выводится объект:

При вызове функции в переменную data добавляется объект Promise в котором содержится нужный мне объект, но я не знаю как его оттуда вызвать.

Вот код:

async function getData() {
  try {
    return await axios.get('http://localhost:8000/first')
  } catch (error)  {
    console.error(error)
  }
}

export default {
  data() {
    return {
      data: getData()
    }
  }
}

Answer 1

Переделал код и в итоге в переменную data зачисляются все объекты из promise.

export default {
  data() {
    return {
      data: [] 
    }
  },
  async mounted() {
    await this.getData();
  },
  methods: {
    async getData() {
      try {
        const response = await axios.get('http://localhost:8000/first');
        this.data = response.data; 
      } catch (error) {
        console.error(error);
      }
    }
  }
}

Answer 2

Твоя проблема в том, что getData() — это асинхронная функция, и при вызове она возвращает Promise, а не сразу объект с данными. В data() ты присваиваешь data: getData(), но Vue не ждет завершения Promise, а сразу записывает его как есть. Чтобы корректно получить данные, нужно использовать async внутри created().

Исправленный код:

    async function getData() {
        try {
            const response = await axios.get('http://localhost:8000/first')
            return response.data // Возвращаем только данные
        } catch (error) {
            console.error(error)
        }
    }

    export default {
        data() {
            return {
                data: null // Сначала пусто
            }
        },
        async created() {
            this.data = await getData() // Ждем загрузки данных и записываем
        }
    }

Что изменилось?

Инициализация data в null, потому что данные приходят асинхронно.
created() - асинхронный хук, где ждем getData(), чтобы data уже содержал объект, а не Promise.

Теперь data внутри компонента будет содержать массив объектов, и можно спокойно рендерить их в шаблоне.

БЛОГ НА HUSL

Как извлечь из promise нужный мне объект с данными?

Ответы (2 шт):

Исправленный код:

Что изменилось?