Working on a nuxt application utilizing axios for API calls. In my index.vue file, I have the code snippet below.
<template>
<div>
<Hero />
<Homebooks :details="details" />
</div>
</template>
<script>
export default {
// USING ASYNC AWAIT
async asyncData ({ $axios, error }) {
try {
const details = await $axios.$get('http://127.0.0.1:8001/api/books')
return { details }
} catch (e) {
error({
statusCode: 503,
mesage: 'Unable to fetch'
})
}
}
// USING PROMISES
// asyncData ({ $axios, error }) {
// return $axios.$get('http://127.0.0.1:8001/api/books').then((response) => {
// return { details: response }
// }).catch((e) => {
// error({
// statusCode: 503,
// message: 'Unable to fetch data'
// })
// })
// }
}
</script>
Encountering an issue when navigating back to this page using the menu after visiting another page. The following error is displayed:
Unable to fetch event An error occurred while rendering the page. Check the developer tools console for details.
However, upon page refresh, the data reloads without error. Unclear on what might be causing this problem.