Vue.js和Axios：转换请求返回未定义的数据

Question

I was trying to use transformRequest and transformResponse in order to display a loader while data is rendering. When I have done this, it worked perfectly but it is appeared that my POST and PATCH requests are not processed properly now. There are no error messages on console but when I try to modify some entity (and send PATCH request), nothing happens. When I delete transformRequest function, I can send POST and PATCH.

Can somebody explain what I did wrong?

UPDATE! Here is what I added in http/index.js:

...
transformRequest(data) {
 console.log(data); // returns undefined
 store.dispatch('loadingData');
 console.log(data) // returns undefined
 return console.log(JSON.stringify(data)); // returns undefined
},
transformResponse(data) {
 store.dispatch('finishLoadingData');
 const parsedData = JSON.parse(data);
 if (parsedData.error === 'Access denied') {
   cookies.remove('access_token');
   window.location = `${config.mainSite}/login`;
 }
 return parsedData;
},
...

Here is the store:

export default {
 state: {
  loading: false,
 },
 actions: {
  loadingData({ commit }) {
   commit('LOADING_DATA');
 },
 finishLoadingData({ commit }) {
   commit('FINISH_LOADING_DATA');
 },
},
mutations: {
 LOADING_DATA(state) {
  state.loading = true;
 },
 FINISH_LOADING_DATA(state) {
  state.loading = false;
 },
},
getters: {
  getLoading(state) {
   return state.loading;
  },
 },
};

Answer 1

As we use Axios , transformRequest and transformResponse accepts an array of functions and not a single function. Can you try this:

...
transformRequest: [(data) => {
    store.dispatch('loadingData');

    return data;
}],

transformResponse: [(data) => {
    store.dispatch('finishLoadingData');

    const parsedData = JSON.parse(data);

    if (parsedData.error === 'Access denied') {
        cookies.remove('access_token');
        window.location = `${config.mainSite}/login`;
    }
    return parsedData;
}],
...