项目---前端报错,Uncaught (in promise) error

本文介绍了在前后端交互中,前端使用axios的get请求发送json对象时遇到的问题,即后端无法接收到数据。问题在于get请求的数据应通过params传递而非data。错误的前端代码示例显示了使用data的方式,导致后端无法解析。解决方案是将axios的data参数改为params,正确的代码展示了解决这一问题的方法。理解axios中data和params的区别对于正确进行HTTP请求至关重要。
摘要由CSDN通过智能技术生成

问题描述:在讲师分页列表接口中,后端无法接收到前端axios传递的json对象,前端报错提示Uncaught (in promise) error

问题原因:请求为get方式,需要在url中接收参数,而无法从请求体接收参数。

但是在我配置axios时,使用了data这个配置,下图为错误演示

前端代码:

pageList(page, limit, searchObj) {
    return request({
      url: `${api_name}/list/${page}/${limit}`,
      method: 'get',
      data: searchObj
    })
}

后端代码:

@ApiOperation(value = "讲师分页列表")
@GetMapping("/list/{page}/{limit}")
public R listPage(@ApiParam("当前页码") @PathVariable Long page,
                  @ApiParam("每页的记录数") @PathVariable Long limit,
                  @ApiParam("讲师列表查询对象") TeacherQueryVo teacherQueryVo){

    System.out.println(teacherQueryVo);

    Page<Teacher> pageParam = new Page<>(page, limit);
    Page<Teacher> pageModel = teacherService.selectPage(pageParam,teacherQueryVo);

    List<Teacher> records = pageModel.getRecords();
    long total = pageModel.getTotal();

    return R.ok().data("total",total).data("records",records);
}

解决方法:将data改为params配置,下图为正确演示

pageList(page, limit, searchObj) {
    return request({
      url: `${api_name}/list/${page}/${limit}`,
      method: 'get',
      params: searchObj
    })
}

在axios中

  • data表示在data是添加到请求体(body)中的, 用于post请求
  • params是添加到url的请求字符串中的,用于get请求

所以此处只能用params。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值