catch捕获Axios错误时如何获取POST请求的payload请求体

直接从错误对象的config属性上取请求数据即可，不需要访问底层error.request对象。

浏览器环境下error.request是原生XMLHttpRequest实例，请求发送完成后实例本身不会留存已发出的请求体内容，直接访问error.request.body会得到undefined。而Axios在抛出错误时，会把本次请求的完整配置挂载到error.config上，其中config.data就是本次请求发送给服务端的请求体内容。

基础用法示例 #

axios.post("url",{
    name: jesus
}).then((response) => {
    // 正常响应处理逻辑
}).catch((error) => {
    // 获取发起请求时传入的请求体
    console.log(error.config.data) // 输出 {name: jesus}
})

注意事项 #

• 如果配置了请求拦截器对请求体做过修改，error.config.data返回的是拦截器处理后、最终发送给服务端的内容，不是调用请求方法时传入的原始值
• FormData、Blob、文件上传类的请求体，同样可以通过error.config.data拿到对应的原始实例
• 如果需要获取序列化后的字符串格式请求体（比如JSON字符串、application/x-www-form-urlencoded格式字符串），可以在请求拦截器中提前把序列化结果挂载到config自定义字段上，捕获错误时直接读取即可，参考配置：

// 全局请求拦截器配置
axios.interceptors.request.use((config) => {
    // 匹配JSON请求的序列化逻辑，若使用其他序列化规则可对应调整判断条件
    if (config.data && typeof config.data === 'object' && !(config.data instanceof FormData)) {
        config.rawRequestBody = JSON.stringify(config.data)
    }
    return config
})

// 错误捕获时读取序列化后的内容
axios.post("url",{
    name: jesus
}).catch((error) => {
    console.log(error.config.rawRequestBody) // 输出 '{"name":"jesus"}'
})

内容的提问来源于stack exchange，提问作者Jesus David Liang Chen