前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >await axios竟然返回undefined?(已解决)

await axios竟然返回undefined?(已解决)

作者头像
金鳞星溅
发布2023-10-18 16:43:10
8550
发布2023-10-18 16:43:10
举报

现象

昨天写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即可

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2023-06-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 现象
  • 追溯起源
  • 解决方案
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档