Why my first load data axios is return 404 Vue Js?

user_13831564 0
Viewed 448

so guys I've tried to fetch data and show it inside my component. But the problem is, fetching data got 404 or data not show for the first load.. but when I try to reload again data is shown as should be. And one thing.. the data was success upload to the server even the response status 404 as I said

By the way guys this is my component.js

getApi() {
  return api.get("/routeName")
}

this is my Store

async fetchApi({ commit }) {
  try {
    let {
      data: { data }
    } = await component.getApi()
    commit("SET_API", data)
  } catch (error) {
    return Promise.reject(error)
  }
}

and this is how I call fetchApi from a store inside my component

async created() {
  await this.getApi()
}

methods: {
  async getDraft() {
    try {
      await this.$store.dispatch("component/fetchApi")
      this.scrollToTop()
    } catch (error) {
      error
    }
  }
}
axios vue.js javascript
1 Answers

I assume you access VUEX state data in <template> tag (I cannot comment to get more information.)

If I right, the problem is compoent not watch VUEX state when data null while you access.

If you render when VUEX state data is null, when data update while you call fetchDraft in yours store. In component not track your VUEX. I don't know why it happen in low level.

In my case, I need to use setInterval to load Vuex state to local data in component. And use it instead of access direct to vuex.

ex.

created() {
  this.intervalUpdate = setInterval(() => {
      this.updateData();
    }, 1000);
},

destroyed() {
  clearInterval(this.intervalUpdate);
},

methods: {
  async updateData() {
    this.draftData = await this.$store.dispatch("review/fetchDraft");
  }
}

It's not the best solution. But its help me to solve problem that component

user_90024840
Related