Значение ответа useFetch() недоступно
Я использую метод Nuxt useFetch для извлечения данных из API и столкнулся с проблемой невозможности немедленного доступа к данным ответа:
onBeforeMount(() => {
useFetch('/listings')
.then(response => {
console.info(response.data.value)
})
.catch(err => {
console.info(err)
})
})
console.info регистрирует null, но если я добавлю setTimeout в блок .then, то он работает и возвращает array of objects:
setTimeout(() => {
console.info(response.data.value)
}, 1000)
Регистрация только response.data (без .value) возвращает proxy object с _value, и я могу получить доступ к значению из консоли, но попытка получить к нему прямой доступ с помощью response.data.value не работает. Кроме того, проверив вкладку сети браузера и журналы серверной части, я вижу, что API возвращает массив объектов.
Я также пытался использовать метод useFetch, объявив переменную данных и используя async/await, но получил тот же результат.
Я ценю любую помощь!
Рассмотрите возможность предоставления работающего минимального воспроизводимого примера с описанной проблемой. Используйте codeandbox.io или аналогичный.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я думаю, что причина, по которой данные не отображаются, заключается в том, что ваш маршрут находится на ssr по умолчанию .
Если вы хотите отображать данные, используя ваши коды выше, без использования функции тайм-аута, рассмотрите возможность отключения SSR на вашем маршруте. Вы можете сделать это, используя routeRules в вашей конфигурации nuxt. Больше информации в этой документации о рендеринге
Я создал для вас пример с отключенным ssr только на этом конкретном маршруте. https://stackblitz.com/edit/nuxt-starter-oq7mks?file=pages/not-ssr-page.vue
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
routeRules: {
'/your-path/': { ssr: false }
}
})Если вы не хотите отключать SSR на своем маршруте, вам следует рассмотреть возможность использования interceptors. Узнайте больше о перехватчиках в нижней части документации.
Используя перехватчики, вы увидите данные ответа в консоли.
Пример использования
<script lang = "ts" setup>
onBeforeMount(async () => {
const { data } = await useFetch('/api/test', {
method: 'GET',
onResponse(context) {
console.info('Interceptor', context.response._data);
},
});
});
</script>Я также создал пример для него https://stackblitz.com/edit/nuxt-starter-oq7mks?file=pages/index.vue
Надеюсь, это поможет вам.
Беглый взгляд на документацию показывает, что в
pendingесть свойствоresponse, которое можетtrueуказывать «...выгружаются ли данные». Таким образом, очевидно, только потому, что обещание выполнено, это не означает, что выборка завершена. (Я не использую Nuxt, просто просмотрел документы.)