React中使用Axios传递JWT Token到请求头时输出undefined问题排查

• 直接原因：你声明的request是一个函数对象，从未给该函数对象定义id属性，直接访问request.id必然返回undefined，该结果和接口请求逻辑没有关联。
• Axios语法错误：axios.get方法仅接收2个参数，分别是请求地址和配置对象，你当前将headers、data拆分为两个独立对象作为第二、第三个参数传入，导致你传入的data参数完全不会被Axios识别，请求无法携带你预期的参数。正确的写法是将headers、data都放入同一个配置对象中：

const request = (data) => {
    return axios
        .get(api, { 
            headers: authHeader(),
            data: data 
        })
        .then((response) => {
            if (response.data.accessToken) {
                console.log(response.data)
                localStorage.setItem("user", JSON.stringify(response.data));
            }
            return response.data;
        });
};

• 异步逻辑处理错误：request函数的返回值是一个Promise异步对象，接口请求是异步操作，如果你需要读取接口返回的数据中的字段，必须等待Promise状态变为已完成后再读取，不能直接同步读取。正确的读取方式如下：

// 方式1：使用.then回调
request(传入的参数).then(res => {
    console.log(res.id) // 此处才能正常读取接口返回的id字段
})

// 方式2：使用async/await语法
const fetchData = async () => {
    const res = await request(传入的参数)
    console.log(res.id)
}
fetchData()

• 补充注意项：GET请求通常不使用请求体（即data字段）传参，多数后端框架默认不会解析GET请求的请求体内容，如果你需要传递查询参数，建议将参数放入配置对象的params字段中，参数会自动拼接为URL查询字符串，兼容性更好。

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