JS使用JSON.parse解析axios响应报unexpected character错误且无法读取属性

问题根因 #

1. 不必要的JSON.parse操作导致语法报错
   Axios 检测到响应头content-type为application/json时，会自动将服务端返回的JSON响应体解析为JavaScript对象，不需要手动调用JSON.parse。你代码中update方法返回的是Axios封装好的响应对象，不是JSON字符串，直接对对象执行JSON.parse必然会抛出格式错误。

2. 属性读取路径错误导致返回undefined
   Axios 封装的响应对象固定结构为：

• res.status：HTTP状态码
• res.data：服务端返回的原始JSON内容
• res.headers：响应头信息
  如果服务端返回的JSON本身就包含data和attributes字段，你需要的完整读取路径为res.data.data.attributes，而非res.data.attributes，你之前少嵌套了一层服务端返回的data字段，自然读不到对应值。

你补充测试中先stringify再parse的操作只是复制了一遍Axios的响应对象，没有解决路径错误的问题，自然还是读不到对应属性。

修复方案 #

直接修改handleUpdate函数即可：

const handleUpdate = async ({ username, email }) => {
    const token = Cookies.get("token");
    const body = { user: { username: username, email: email } };
    const res = await update(`/users/${currentUser.id}`, body, token);
    // 可先打印完整响应确认结构，避免层级判断错误
    console.log('完整响应结构：', res)
    if (res.status === 200) {
        // res.data就是服务端返回的完整JSON内容，不需要额外解析
        handleChange(res.data);
        // 要取attributes请用下面的路径
        // const attributes = res.data.data?.attributes
    }
};

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