点击按钮时JavaScript fetch()函数无法运行的问题排查

嘿，我一眼就瞅出问题所在了——这是参数命名冲突搞的鬼！咱们慢慢拆解：

问题根源 #

你在$("#hello-btn").click((route) => { ... })里把回调函数的参数命名成了route，但jQuery的点击事件回调函数的第一个参数默认是事件对象（Event Object），根本不是你之前定义的全局route变量。

这就导致：当你点击按钮时，fetch_data(route)里的route其实是个事件对象，而不是你期望的"/a-url"路径。fetch请求用了错误的地址，自然不会按预期执行；而在click外部调用时，你直接传入了正确的全局route，所以能正常运行。

修复方案 #

只需要避免参数名和全局变量名冲突就行，两种简单方式任选：

方式1：移除回调函数的参数

这样函数内部会自动引用外部的全局route变量：

<button id="hello-btn">Say Hello!</button>
<script>
var route = "/a-url";
let fetch_data = (route) => {
  fetch(route)
    .then(res => res.text())
    .then(data => $("#resp").text(data))
}
$("#hello-btn").click(() => { // 去掉route参数
  fetch_data(route);
});
</script>

方式2：改用其他参数名（更清晰，推荐）

把回调参数命名为event（或其他不会冲突的名字），明确区分事件对象和全局变量：

<button id="hello-btn">Say Hello!</button>
<script>
var route = "/a-url";
let fetch_data = (route) => {
  fetch(route)
    .then(res => res.text())
    .then(data => $("#resp").text(data))
}
$("#hello-btn").click((event) => { // 用event作为参数名
  fetch_data(route);
});
</script>

额外调试小技巧 #

可以给fetch加个错误捕获，以后遇到类似问题能快速定位：

let fetch_data = (route) => {
  fetch(route)
    .then(res => {
      if (!res.ok) throw new Error(`请求失败：${res.status}`);
      return res.text();
    })
    .then(data => $("#resp").text(data))
    .catch(err => console.error('出错了：', err)); // 捕获错误并打印到控制台
}

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