Axios响应与网络响应不一致问题求助

你遇到的浏览器Network面板显示数据与Axios控制台打印数据不一致的问题，通常由以下原因导致，对应解决方法如下：

1. 控制台日志的引用延迟特性 #

JavaScript中对象属于引用类型，console.log(response)时控制台仅记录对象的引用，当你后续展开日志时，显示的是对象当前最新状态，而非打印瞬间的状态。如果之后有代码修改了response.data里的subscriptions，就会出现这种差异。

解决方法：打印时生成数据快照，避免引用问题：

export const getContractData = (refContract) => {
  return axios.get(`${API_CONTRACT_URL}/contrats/${refContract}`)
    .then((response) => {
      // 打印深拷贝后的快照，确保是请求返回时的原始数据
      console.log(JSON.parse(JSON.stringify(response)));
      return response.data;
    });
};

2. 全局Axios响应拦截器修改了数据 #

检查项目中是否存在全局Axios响应拦截器，拦截器可能对返回的subscriptions字段做了修改，导致Network里的原始响应和最终打印的数据不一致。

检查方法：查找项目中类似以下的代码：

axios.interceptors.response.use(
  (response) => {
    // 查看此处是否修改了 response.data.subscriptions 相关字段
    return response;
  },
  (error) => {
    return Promise.reject(error);
  }
);

如果发现有修改逻辑，调整或移除对应代码即可。

3. Vuex状态更新后的副作用 #

虽然在service中打印了响应数据，但后续commit('GET_CONTRACT_DATA_SUCCESS', contractData)将数据存入Vuex后，可能有其他代码（比如其他mutations、组件的watch监听、异步操作）修改了state.contractData里的subscriptions。

排查方法：

• 在GET_CONTRACT_DATA_SUCCESS mutation中添加快照日志，确认存入Vuex时的数据是否与service中一致：

['GET_CONTRACT_DATA_SUCCESS'](state, contractData) {
  console.log(JSON.parse(JSON.stringify(contractData))); // 打印存入前的快照
  state.contractData = contractData;
},

• 检查项目中是否有监听contractData的watch函数，或其他直接修改state.contractData.subscriptions的代码。

4. 组件内异步操作篡改数据 #

组件synchroContractDatas方法里，this.$nextTick或后续代码可能修改了contractData里的subscriptions字段，导致你后续查看控制台日志时数据已变化。

排查方法：在$nextTick前后分别打印this.contractData的快照，确认是否有代码在此处修改了数据。

内容的提问来源于stack exchange，提问作者Adri