Vue.js 如何在Nuxt'；异步数据

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

导出默认值{
异步数据（上下文）{
让[{安排者}，{作曲家}]=等待承诺([
context.$axios.get（`/api/arrangers`），
context.$axios.get（`/api/composers`），
])
const{arrangers}=wait context.$axios.get（'/api/arrangers'））
const{composers}=wait context.$axios.get（'/api/composers'））
返回{安排人，作曲家}
},
}

您的输入（Promise.all的左侧部分）和axios调用的结果都具有相同的变量名，为了避免命名冲突，您可以重命名结果并返回以下内容：

const{arrangers:fetchedArrangers}=wait context.$axios.get（'/api/arrangers'））
const{composers:fetchedComposers}=wait context.$axios.get（'/api/composers'））
返回{fetchedArrangers，fetchedComposer}

---

编辑，我就是这样写的

async异步数据（{$axios}）{
const[posts，comments]=等待承诺([
$axios.$get（'https://jsonplaceholder.typicode.com/posts'),
$axios.$get（'https://jsonplaceholder.typicode.com/comments'),
])
console.log（'posts'，posts）
console.log（'comments'，comments）
返回{posts，comments}
},

当您在

Promise.all

的结果结束时解构时，您需要根据从API获得的结果来解构。通常，您确实有

数据

，因此

{arrangers}

或

{composers}

通常不起作用。当然，这取决于您自己的API以及是否返回这种类型的数据

由于分解2

数据

是不可行的，因此最好只使用数组分解。这样，它将返回包含

数据
数组的对象

要直接访问数据，您可以使用，这在我们的案例中非常方便。直接解构
$axios
也是一个不错的选择，它将删除不必要的
上下文

在我的示例中，我曾经有一个经典的API行为（特别是
数据
部分），但它可以像这样与任何API一起工作

这是最终结果


此外，如果您只需使用
this.$axios.get
：您将拥有著名的
数据
，您稍后需要访问这些数据（
.data
），以便仅使用API响应的有用部分。这就是为什么我喜欢
$get
快捷方式，它能更快地切入要点



PS：所有这些都是可能的，因为
承诺。所有
保留调用顺序：


EDIT2：关于如何使其更灵活的示例可以是

async异步数据（{$axios}）{
const urlenpointstofetchfrom=['comments'，'photos'，'albums'，'todos'，'posts']
const allResponses=等待承诺(
urlEndpointsToFetchFrom.map（（url）=>$axios.$get(`https://jsonplaceholder.typicode.com/${url}`）、，
)
const[评论、照片、相册、待办事项、帖子]=所有回复
返回{评论、照片、相册、待办事项、帖子}
},

当然，在数组分解中保持顺序很重要。这可能是可行的，在一个动态的方式，但我不知道如何tbh

另外，我不能推荐足够多的方法来尝试
fetch（）
hook替代方法。我发现它更灵活，而且它确实有一个很好的
$fetchState.pending
助手，这里有更多信息：在页面底部的文章中。
您好，您应该一次只问一个问题。对于“如何在一个页面上执行多个asyncData请求”，到目前为止，您的代码是否工作正常？（
asyncData
）不，我得到一个运行时错误。我知道我已经两次定义了编曲和作曲家。但是，如果我去掉任何一个定义（let或const），我不会得到运行时错误，但我也不会得到任何数据。另外，
中的问题部分也有获取…
的问题，应该删除。试着在每个问题贴上只问一件事。如果你想问第二部分，只需创建一个新帖子。否则，您可能会看到您的问题因
需要更多关注
原因而关闭（
此问题当前包含多个问题。它应该只关注一个问题
）。我已编辑您的初始问题，使其仅限于一件事。请随意将第二部分发布到另一个帖子中！谢谢你的回复。我试过：const{data1:arrangers}=wait context.$axios.get（'/api/arrangers'）const{data2:composers}=wait context.$axios.get（'/api/composers'）console.log（arrangers，composers）返回{arrangers，composers}编曲器和编曲器都返回未定义的.Hm wait，我以前没有注意到，但为什么要使用
承诺。所有
和
$axios.get
？你应该只有两个中的一个。最重要的是，您需要将重命名后的变量名放在右边，而不是左边，因此在本例中，
data1
是API返回给您的，所以可能不是这样。API是否公开供我试用？或者你能分享一些网络有效载荷吗？我刚刚更新了我的答案。谢谢你的深入回复！！！这适用于我的两个初学者请求。现在添加其他7个请求。我意识到我有很多东西要学。我确实注意到了Promise和$axios.get的复制，但是单独删除其中任何一个都没有什么区别。你的代码成功了。