如何在 Nuxt 的 asyncData 中对 Promise.all 进行数组解构

Question

我正在使用 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>

Answer 1

您的输入（Promise.all 的左侧部分）和 axios 调用的结果确实具有相同的变量名称，为避免命名冲突，您可以重命名结果和 return 这个：

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，如果你return这种类型的数据。

既然解构 2 data 不可行，最好简单地使用数组解构。这样，它将 return 对象内部有一个 data 数组。

要直接访问数据，您可以使用 $get shortcut，这在我们的例子中很方便。直接解构 $axios 也很好，将删除可有可无的 context.

在我的示例中，我使用 JSONplaceholder 来实现经典的 API 行为（尤其是 data 部分），但它可以像这样与任何 API.

这是最终结果。

此外，如果您只是使用 this.$axios.get 会发生这种情况：您将拥有著名的 data，稍后您将需要访问它 (.data)只使用 API 的响应中有用的部分。这就是为什么我喜欢 $get 捷径，更快进入重点。

PS：所有这些都是可能的，因为 Promise.all 保留调用顺序：

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, photos, albums, todos, posts }
},

当然，在数组解构中保持顺序很重要。它可能以动态方式可行，但我不知道如何实现。

此外，我强烈推荐有一天也尝试 fetch() 钩子替代方案。我发现它更灵活，它确实有一个很好的 $fetchState.pending 助手，更多信息在这里：https://nuxtjs.org/blog/understanding-how-fetch-works-in-nuxt-2-12/ 和页面底部的文章中。

如何在 Nuxt 的 asyncData 中对 Promise.all 进行数组解构

How to array destructure a Promise.all in Nuxt's asyncData

vue.js

es6-promise

nuxt.js

asyncdata