问题描述
我正在使用 Nuxt 和 Vue,以及 MysqL 数据库,所有这些对我来说都是新的。我正在从 WebMatrix 过渡,在那里我有一个用于多个表的管理页面,带有用于选择特定选项的下拉列表。在此页面上,我可以选择添加、编辑或删除所选选项,例如作曲家或音乐作品。以下是仅用于 2 个表的一些代码(获取模块构建失败的运行时错误):
<script>
export default {
async asyncData(context) {
let [{arrangers},{composers}] = await Promise.all([
context.$axios.get(`/api/arrangers`),context.$axios.get(`/api/composers`),])
const {arrangers} = await context.$axios.get('/api/arrangers')
const {composers} = await context.$axios.get('/api/composers')
return { arrangers,composers }
},}
</script>
解决方法
对于输入(Promise.all
的左侧部分)和 axios 调用的结果,您确实具有相同的变量名称,为了避免命名冲突,您可以重命名结果并返回:
const { arrangers: fetchedArrangers } = await context.$axios.get('/api/arrangers')
const { composers: fetchedComposers } = await context.$axios.get('/api/composers')
return { fetchedArrangers,fetchedComposers }
编辑,这就是我写的方式
async asyncData({ $axios }) {
const [posts,comments] = await Promise.all([
$axios.$get('https://jsonplaceholder.typicode.com/posts'),$axios.$get('https://jsonplaceholder.typicode.com/comments'),])
console.log('posts',posts)
console.log('comments',comments)
return { posts,comments }
},
在 Promise.all
的结果末尾进行解构时,您需要根据从 API 获得的结果进行解构。通常,您确实有 data
,因此 { arrangers }
或 { composers }
通常不起作用。当然,这取决于您自己的 API 以及您是否返回这种类型的数据。
由于解构 2 data
是不可行的,所以最好简单地使用数组解构。这样,它将返回包含 data
数组的对象。
要直接访问数据,您可以使用 $get
shortcut,这在我们的案例中很方便。直接解构 $axios
也很不错,将删除可有可无的 context
。
在我的示例中,我使用 JSONplaceholder 来获得经典的 API 行为(尤其是 data
部分),但它可以像这样与任何 API 一起工作。
这是最终结果。
此外,如果您只使用 this.$axios.get
,就会发生这种情况:您将拥有著名的 data
,您稍后需要访问它 (.data
)使用 API 响应的有用部分。这就是我喜欢 $get
快捷方式的原因,它可以更快地切入正题。
PS:所有这些都是可能的,因为 Promise.all
保留了调用顺序:https://stackoverflow.com/a/28066851/8816585
EDIT2:一个关于如何使它更灵活的例子
async asyncData({ $axios }) {
const urlEndpointsToFetchFrom = ['comments','photos','albums','todos','posts']
const allResponses = await Promise.all(
urlEndpointsToFetchFrom.map((url) => $axios.$get(`https://jsonplaceholder.typicode.com/${url}`)),)
const [comments,photos,albums,todos,posts] = allResponses
return { comments,posts }
},
当然,在数组解构中保持顺序很重要。它可能以动态方式可行,但我不知道如何。
另外,我不能推荐足够多的东西,有一天也可以尝试 fetch()
钩子替代方案。我发现它更灵活,而且它确实有一个很好的 $fetchState.pending
助手,更多在这里:https://nuxtjs.org/blog/understanding-how-fetch-works-in-nuxt-2-12/ 和页面底部的文章中。