如何使用Axios的params配置项传递参数并正确获取API接口响应

问题根因 #

• 请求路径不匹配：第一种写法请求的接口路径为/records/owner，第二种可正常运行的写法请求路径为/records，二者对应后端不同的路由规则，后端仅对/records路径配置了查询参数解析和返回逻辑，/records/owner路径无对应处理逻辑所以无法返回正确结果。
• 需排查参数名是否匹配：你给出的第二种可运行写法中，日期参数的key为data，而第一种params中配置的日期参数key为date，如果后端实际接收的日期参数名为data，也会导致参数识别失败。

修复方案 #

修改第一种写法的请求路径和参数名即可正常使用params传参：

axios
        .get('http://localhost:3000/records', { // 替换为正确的接口路径
          params: {
            owner: 'wxTWH8zqSwaIXPAVsjZoRCkvjx73',
            date: '2021-08-30', // 若后端要求参数名为data，此处同步修改为data即可
          },
        })
        .then(function (response) {
          // handle success
          alert(JSON.stringify(response.data));
        })

验证方式 #

修改后可打开浏览器开发者工具的Network面板，查看实际发起的请求完整URL，确认和手动拼接的可运行URL完全一致即可。

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