页面中的 Nuxtjs 异步等待在页面刷新时不起作用答案

【问题标题】：Nuxtjs async await in a page doesnt work on page refresh页面中的 Nuxtjs 异步等待在页面刷新时不起作用
【发布时间】：2018-11-12 19:15:35
【问题描述】：

我正在尝试使用 vuex 和 nuxt js 在我的页面的 fetch 方法中获取数据，但是每当有人刷新页面时它就会失败，但是当我通过 nuxt 导航导航时可以工作

所以在我的页面中我有

    fetch ({ store, params }) {
        store.dispatch('getJobspecialisims')
    },

   //IVE ALSO TRIED ASYNC
     async asyncData (context) {
        await context.store.dispatch('getJobspecialisims');
    },

在我的 vuex 操作中我有

   async getJobspecialisims({commit}){
      await axios.get(process.env.baseUrl+'/job-specialisims').then((res)=>{
        commit(types.SET_JOB_SPECIALISIMS, res.data.data)
      },(err)=>{
           console.log("an error occured ", err);
    });
  },

现在在我获取记录的组件上

<div>
  <li v-for="(specialisim) in $store.getters.jobspecialisims">
    <!-DO STUFF HERE->   
 </li>

用户刷新浏览器时不会发送http请求

我哪里出错了？我更喜欢异步等待方法。我知道它会返回一个承诺，但我不知道如何知道承诺何时解决。页面应该一直等待，直到数据被完全提取，因此我在我的页面中调用了 fetch 或 asyncdata 方法

我还需要添加或修改什么？

【问题讨论】：

The http request is nver sent when a person refreshes the browser 是 nuxt.js 还是浏览器缓存？您是否在浏览器（网络选项卡）中使用了开发工具并查看是否在其中缓存了结果？我不确定如何检查 nuxt.js 中的缓存设置，但您可以从浏览器开始。
我没有检查缓存结果

标签： javascript vuejs2 nuxt.js

【解决方案1】：

对于异步操作，当您在中调用它时，您需要将 return 放在 dispatch 之前fetch 或 asyncData：

fetch ({ store, params }) {
  // store.dispatch('getJobspecialisims')
  return store.dispatch('getJobspecialisims')
},

此答案的来源：Problem: Vuex actions, dispatch from page

无论如何，我还是不明白你为什么使用 await 和 then。如果是我，我会像这样使用 async await：

async getJobspecialisims({ commit }) {
  const res = await axios.get(YOUR_URL);
  if (!res.error) {
    commit("getJobspecialisims", res.data.data);
  } else {
    console.log(res.error);
  }
}

【讨论】：