前端Axios封装API代理报错Cannot read 'data' of undefined，修复后原理求解释

错误原因 #

你最初编写的响应拦截器存在返回值缺失问题：

// 原错误拦截器代码
axios.interceptors.response.use(response => {
    sleep(1000).then(() => {
        return response;
    }).catch((error) => {
        console.log("err", error);
        return Promise.reject(error);
    })
})

• Axios要求响应拦截器的回调必须返回响应对象、Promise对象或者抛出异常，否则会默认返回undefined
• 你代码里的return response仅作用于sleep().then()的内部回调，外层的拦截器函数没有任何return语句，JS默认会返回undefined
• 后续的then(responseBody)拿到的入参就是undefined，读取undefined.data自然触发TypeError

修改后代码生效的原理 #

// 修复后的拦截器代码
axios.interceptors.response.use(async response => {
    try {
        await sleep(1000);
        return response;
    } catch (error) {
        console.log(error);
        return await Promise.reject(error);
    }
})

• 用async标记的函数默认会返回Promise对象，符合Axios拦截器的返回值要求
• await sleep(1000)会阻塞后续逻辑直到延迟完成，之后直接return response，这个响应对象会被async包装为已完成的Promise，正确传递到后续的responseBody处理函数
• 异常捕获逻辑也能正确将错误通过Promise.reject抛出，不会出现异常丢失的问题

补充说明 #

其实你不用async/await也能修复问题，只要给sleep的Promise链加上外层return即可：

axios.interceptors.response.use(response => {
    // 加return把整个Promise链返回给拦截器
    return sleep(1000).then(() => {
        return response;
    }).catch((error) => {
        console.log("err", error);
        return Promise.reject(error);
    })
})

本质和async/await的写法逻辑一致，都是把处理后的Promise对象返回给Axios拦截器。

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