asyncData() 或 fetch() 不能异步工作，但在挂载时它可以正常工作答案

【问题标题】：asyncData() or fetch() does not work async, but in mounted it works correctlyasyncData() 或 fetch() 不能异步工作，但在挂载时它可以正常工作
【发布时间】：2021-07-30 05:12:33
【问题描述】：

我够了。我花了几个小时，但无法弄清楚它是如何工作的。我的代码通过 mount() 钩子在 SPA 中工作，但我现在迁移到 nuxt 并遇到了问题。

我正在尝试通过 asyncData() 从存储中获取数据

async asyncData({store}) {
console.log("start getting schools")
const schools = await store.dispatch('GET_SCHOOLS_FROM_API').then((schools) => {
  console.log(schools)
})
console.log(schools + " schools")     
return schools
 },

或 fetch()

async fetch({store}) {
const sch = await store.dispatch('GET_SCHOOLS_FROM_API')
  this.schools = store.SCHOOLS; //SCHOOLS is a getter in store  
});
},

但它不等待调度完成并返回 undefind。

商店：

async GET_SCHOOLS_FROM_API({ commit }) {
    return axios.get('http://localhost:3000/schools').then((schools) => {
        commit('SET_SCHOOLS_TO_STATE', schools.data)
        return schools;
    }).catch((error) => {
        console.log(error);
        return error;
    })
}

有人知道我哪里错了吗？

【问题讨论】：

标签： vue.js nuxt.js vuex

【解决方案1】：

问题是您将Promise 与额外的then 块相交，当您添加await 时，您实际上是在等待插入到 then 块中的承诺的结果，您有一个函数不返回任何东西，因此它返回undefined。

这很容易解决：

async asyncData({ store }) {
    console.log("start getting schools");
    const schools = await store.dispatch('GET_SCHOOLS_FROM_API');
    console.log(schools);
    
    return { schools };
}

另一件事是，根据文档中的示例，他们将值作为对象返回，你可以试试吗？

参考 https://nuxtjs.org/docs/2.x/features/data-fetching/

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.description }}</p>
  </div>
</template>

<script>
  export default {
    async asyncData({ params, $http }) {
      const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
      return { post } // <===== Like this
    }
  }
</script>

【讨论】：

谢谢，但我从这种方式开始，它不起作用:(
再次感谢。是的，丹尼尔，我已经阅读了文档并尝试了它。但事情是这样的，该代码异步工作，并且 return { result } = return undefined。组件渲染后，可以在 vuedev 工具中看到 SCHOOLS。

【解决方案2】：

问题是，我没有从组件中删除 data()，这是一个错误。之后，上面的代码就可以正常工作了

【讨论】：