如何在Nuxt；s AsyncData中对Promise.All进行数组解构

问题描述

我正在使用Nuxt和Vue，使用MySQL数据库，所有这些对我来说都是新的。我正在从WebMatrix过渡，在WebMatrix中，我有一个用于多个表的Admin页面，带有用于选择特定选项的下拉列表。在这个页面上，我可以选择添加、编辑或删除所选选项，比如作曲家或音乐作品。以下是其中两个表的一些代码(获取模块构建失败的运行时错误)：

<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以及您是否返回这种类型的数据。

由于析构2data是不可行的，所以最好简单地使用数组析构。这样，它将返回其中包含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, photos, albums, todos, posts }
},

当然，在数组析构过程中保持顺序很重要。这可能是动态可行的，但我不知道怎么做。

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

这篇关于如何在Nuxt；s AsyncData中对Promise.All进行数组解构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！