无法使用 Nuxt 组件中的 axios 从 api 获取数据
Can't get data from api with axios in Nuxt components
<template>
<div id="post">
<p>{{ data }}</p>
</div>
</template>
<script>
export default {
data () {
return {
data: ''
}
},
async asyncData({$axios}) {
const res = await $axios.get('/v1/posts')
.catch( error => {
console.log("response error", error)
return false
})
return {
data: res
}
},
}
</script>
起初,我尝试用上面的代码获取数据,它在 pages/post.vue 中有效,但在 components/post.vue 中无效。
然后,我意识到我不能在nuxt组件中使用asyncData并更改代码如下。
<template>
<div id="post">
<p>{{ data }}</p>
</div>
</template>
<script>
export default {
data () {
return {
data: ''
}
},
mounted () {
this.asyncData()
},
asyncData() {
await axios.get('/v1/posts')
.then(res => {
this.data = res.data
})
},
}
</script>
然后,我收到语法错误“意外的保留字 'await'”。
如何在 Nuxt 组件中通过 api 获取数据?
===================================
我阅读了 https://nuxtjs.org/docs/features/data-fetching#accessing-the-fetch-state 并更改了如下代码。
<script>
export default {
data () {
return {
data: ''
}
},
async fetch() {
this.data = await fetch('/v1/posts')
.then(res => res.json())
},
}
</script>
现在,我正在处理另一个错误 'Error in fetch(): SyntaxError: Unexpected token < in JSON at position 0'。
此代码有效。
<script>
export default {
data () {
return {
data: '',
}
},
async fetch() {
const res = await this.$axios.get('/v1/posts')
this.data = res.data
},
}
</script>
很高兴找到了解决您的问题的方法。
如果你不想在后面写 .data
,你甚至可以直接使用 this.$axios.$get
。
<template>
<div id="post">
<p>{{ data }}</p>
</div>
</template>
<script>
export default {
data () {
return {
data: ''
}
},
async asyncData({$axios}) {
const res = await $axios.get('/v1/posts')
.catch( error => {
console.log("response error", error)
return false
})
return {
data: res
}
},
}
</script>
起初,我尝试用上面的代码获取数据,它在 pages/post.vue 中有效,但在 components/post.vue 中无效。 然后,我意识到我不能在nuxt组件中使用asyncData并更改代码如下。
<template>
<div id="post">
<p>{{ data }}</p>
</div>
</template>
<script>
export default {
data () {
return {
data: ''
}
},
mounted () {
this.asyncData()
},
asyncData() {
await axios.get('/v1/posts')
.then(res => {
this.data = res.data
})
},
}
</script>
然后,我收到语法错误“意外的保留字 'await'”。 如何在 Nuxt 组件中通过 api 获取数据?
===================================
我阅读了 https://nuxtjs.org/docs/features/data-fetching#accessing-the-fetch-state 并更改了如下代码。
<script>
export default {
data () {
return {
data: ''
}
},
async fetch() {
this.data = await fetch('/v1/posts')
.then(res => res.json())
},
}
</script>
现在,我正在处理另一个错误 'Error in fetch(): SyntaxError: Unexpected token < in JSON at position 0'。
此代码有效。
<script>
export default {
data () {
return {
data: '',
}
},
async fetch() {
const res = await this.$axios.get('/v1/posts')
this.data = res.data
},
}
</script>
很高兴找到了解决您的问题的方法。
如果你不想在后面写 .data
,你甚至可以直接使用 this.$axios.$get
。