Axios调用API后控制台日志丢失响应数组元素问题问询

问题场景 #

使用Axios调用API时，API实际返回的响应包含完整数组数据：

{
    "name": "test-name",
    "attributes": {
        "innerAttributes": {
            "fundamentals": {
                "base": [
                    "sample-base-1",
                    "sample-base-2"
                ],
                "ref": [
                    "sample-ref-1",
                    "sample-ref-2"
                ]
            }
        }
    }
}

调用代码如下：

const response = await this.axiosInstance.get("my-ledger-endpoint/ledger-XXXXX");
console.info("from API", response.data);

但控制台输出的response.data中，base和ref数组仅保留第一个元素：

{
    "name": "test-name",
    "attributes": {
        "innerAttributes": {
            "fundamentals": {
                "base": ["sample-base-1"],
                "ref": ["sample-ref-1"]
            }
        }
    }
}

可能原因及解决思路 #

• 控制台日志的引用特性导致显示延迟：浏览器或Node.js控制台默认展示对象引用而非快照，如果日志输出后你修改了数组（比如用shift()、slice(0,1)截断），控制台显示内容会同步变化。可以通过输出深拷贝快照确认原始数据：

  console.info("from API", JSON.parse(JSON.stringify(response.data)));
  

• Axios响应拦截器篡改数据：检查你的axiosInstance是否配置了响应拦截器，是否有逻辑在返回数据前截断数组。比如是否存在类似以下的拦截器代码：

  axiosInstance.interceptors.response.use(response => {
    // 错误截断逻辑示例
    response.data.attributes.innerAttributes.fundamentals.base = [response.data.attributes.innerAttributes.fundamentals.base[0]];
    response.data.attributes.innerAttributes.fundamentals.ref = [response.data.attributes.innerAttributes.fundamentals.ref[0]];
    return response;
  });
  

• API实际返回数据不一致：用抓包工具（Chrome DevTools Network面板、Postman）直接请求接口，确认后端返回的响应是否确实包含两个数组元素。后端可能会根据请求参数、用户会话等返回不同内容，需排除这种情况。

• Axios数据转换逻辑错误：如果axiosInstance自定义了transformResponse函数，可能在序列化/反序列化过程中错误截断数组。检查实例配置中的转换逻辑：

  const axiosInstance = axios.create({
    transformResponse: [function (data) {
      // 检查这里是否有错误处理数组的逻辑
      return JSON.parse(data);
    }]
  });
  

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