asyncData() 或 fetch() 不异步工作，但在安装时它工作正常

Question

我够了。我花了几个小时，但无法弄清楚它是如何工作的。我的代码通过 mounted() 挂钩在 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  
});
},

但它不会等待分派完成并且 returns 取消定义。

商店：

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;
    })
}

有人知道我哪里错了吗？

Answer 1

问题是您将 Promise 与一个额外的 then 块相交，当您添加 await 时，您实际上是在等待插入的承诺的结果然后阻塞，你有一个函数没有 return 任何东西，因此它 returns undefined.

这可以像这样轻松解决：

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

另一件事是，根据文档中的示例，它们 return 将值作为对象，您可以试试吗？

参考 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>

Answer 2

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

asyncData() 或 fetch() 不异步工作，但在安装时它工作正常

asyncData() or fetch() does not work async, but in mounted it works correctly

vue.js

vuex

nuxt.js