记录一次antd访问mock数据失败的原因

本文详细记录了在文章目录组件中配置service路径时遇到的mock数据获取问题,通过排查发现是由于service请求路径中缺少反斜杠导致的。在调整路径后,问题得以解决。文章强调了在开发过程中,细节的重要性,鼓励开发者通过多编码和总结来提升技能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

组件中配置

   const params = {
      value: '0052akr0jgp3ij',
      label: '实验设备',
    };
    getMeasurementValuesByDevice(params).then(response => {
      this.setState({
        dataSource: response.data,
      });
    });

service路径

src/service/measurementValue.js中代码如下:

export async function getMeasurementValuesByDevice(params) {
  return axios.post(`api/measurement/devices/data/values`, params);
}

mock配置

src/mock/measurement.js中代码如下:

'POST /api/measurement/devices/data/values': (req, res) => {
    const { value, label } = req.body;
  	console.log(value);
    console.log(label);
    let data=[]
	
	// todo 根据value返回不通数据
	…………
	res.send(data);
}

问题

测试的时候发现mock数据取不到,查看network发现连接为如下:
在这里插入图片描述

正确的请求路径应该是http://localhost:8009/api/measurement/devices/data/values
怀疑后端代理配置有问题,查看config.js(antd Version 2.0),没有问题,对/api已经进行了过滤

  //后端代理配置
  proxy: {
    '/api': {
      target: 'http://localhost:8080/',
      changeOrigin: true,
      // pathRewrite: { '^/api': '' }, // 把所有请求的/api替换为‘’ 空字符串
    },

最后发现是一个很小的问题,问题出在service的请求路径,少了一个反斜杠,修改为

export async function getMeasurementValuesByDevice(params) {
  return axios.post(`/api/measurement/devices/data/values`, params);
}

问题顺利解决

总结

吃一堑长一智,很多问题都是细节,多用替代法、还原法寻找解决思路。水平再菜,多编码多总结,多写博客,总会有所提高的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值