如何从Axios响应的自定义响应头中获取指定参数的值？

问题原因 #

• 你拿到的response.headers['x-customName']本质是JSON格式的字符串，不是可直接访问属性的JS原生对象，所以直接用.或[]取属性肯定返回undefined
• 你之前使用JSON.stringify属于操作方向完全错误：JSON.stringify的作用是把JS对象转为JSON字符串，你已经拿到字符串了再做序列化相当于给内容又套了一层字符串包装，更不可能正常取到属性

正确实现方案 #

你需要先把响应头拿到的JSON字符串解析为JS对象，再做属性访问即可，修正后的代码如下：

const CallAPI = async param => {
    await axios.get("api url...")
    .then(response => {
        // 第一步：把响应头的JSON字符串解析为JS对象
        const headerValues = JSON.parse(response.headers['x-customName']);
        // 第二步：正常访问属性即可
        console.log(headerValues.Parameter1); // 输出 633
        console.log(headerValues["Parameter2"]); // 输出 10
    });
}

如果担心后端返回的响应头格式异常导致解析报错，可以加异常捕获兼容：

let headerValues;
try {
  headerValues = JSON.parse(response.headers['x-customName']);
} catch (err) {
  console.error('自定义响应头格式非法，解析失败', err);
}

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