现象
昨天写vue的时候，使用await axios 竟然返回了undefined？
代码语言：javascript复制//1.组件挂载就开始请求后端api
const res = await getCourseListAPI()
//2.getCourseListAPI()方法
export async function getCourseListAPI() {
const res=await http.post('/get_course_list', {
})
return res
}
//3.http封装
import axios from 'axios';
export const baseURL = 'http://localhost';
// 创建axios实例
const http = axios.create({
baseURL: baseURL,
timeout: 5000
});
// axios响应拦截器
http.interceptors.response.use(
response => {
return response.data;
},
error => {
console.log(error.response.status);
if (error.response.status === 401) {
ElMessage({
message: '未登录,请先登录',
type: 'error',
})
setTimeout(() => {
// 未授权，跳转到登录页面
// window.location.href = '/login';
}, 1500);
}
return Promise.reject(error);
}
);追溯起源
首先是res为undefined
追踪到getCourseListAPI()内部，发现内容的res也是undefined
但在f12的控制台的网络面板中发现数据是成功的获取到了的，说明数据在中间丢失了
axios的请求是，先由axios实例发出，请求拦截器拦截，响应拦截器拦截，返回到axios实例
深入到响应拦截器中，逐个探查
代码语言：javascript复制response => {
return response.data;
},在这里，发现response.data不是一个响应对象，response才是正确的响应对象，响应拦截器将一个非响应对象返回给axios实例，await解析出来就是undefined
解决方案
将 return response.data 修改为 return response即可
