Node.js+Express+MySQL预约系统：Fetch请求Pending问题求助

后端（router.js）优先检查这几点 #

• 必须给请求发响应：Express路由如果不调用res.send()/res.json()/res.end()，请求会一直挂着。比如你查完数据库忘了返回结果，直接结束函数，前端就会一直等待。一定要确保成功、失败的分支都有响应：

  // 正确示例：覆盖所有场景的响应逻辑
  router.get('/available-slots', (req, res) => {
    const targetDate = req.query.date;
    // 先校验参数是否存在
    if (!targetDate) {
      return res.status(400).json({ msg: '请传入日期参数' });
    }
    // 执行数据库查询
    db.query('SELECT slot_time FROM slots WHERE booking_date = ? AND is_booked = 0', [targetDate], (err, results) => {
      if (err) {
        console.error('数据库查询出错：', err);
        return res.status(500).json({ msg: '查询失败' });
      }
      // 把查询结果返回给前端
      res.json(results);
    });
  });
  

• 确认请求真的到达后端：在路由最开头加一行日志，比如console.log('收到时段查询请求，日期：', req.query.date);，如果控制台没输出，说明前端请求的URL根本不对，直接跳到前端排查。
• 数据库连接是否正常：如果数据库连不上，查询的回调函数根本不会执行，自然发不了响应。可以单独测试下数据库查询语句，或者在数据库连接代码处加日志，确认连接状态。

前端客户端的常见问题 #

• 请求URL路径错误：比如后端路由是/api/available-slots，前端写成available-slots（少了开头斜杠）或者/slots（路径名不对），导致后端收不到请求。打开浏览器F12的Network标签，查看请求的URL是否和后端路由匹配，还要注意日期参数用encodeURIComponent()处理，避免特殊字符破坏请求：

  // 正确写法示例
  const selectedDate = '2024-05-20';
  fetch(`/api/available-slots?date=${encodeURIComponent(selectedDate)}`)
  

• 没处理fetch的错误：fetch返回的Promise如果不写.catch()或者用try/catch包裹，就算请求失败你也看不到错误。必须加上错误处理，不然pending的原因根本找不到：

  // 用then/catch处理错误
  fetch(`/api/available-slots?date=${encodeURIComponent(selectedDate)}`)
    .then(res => {
      if (!res.ok) throw new Error(`请求失败：${res.status}`);
      return res.json();
    })
    .then(slots => {
      // 更新页面显示可用时段
      console.log('可用时段：', slots);
    })
    .catch(err => {
      console.error('出问题了：', err);
    });
  
  // 或者用async/await写法
  async function loadSlots(date) {
    try {
      const res = await fetch(`/api/available-slots?date=${encodeURIComponent(date)}`);
      if (!res.ok) throw new Error(`请求失败：${res.status}`);
      const slots = await res.json();
      console.log('可用时段：', slots);
    } catch (err) {
      console.error('加载时段失败：', err);
    }
  }
  

• 跨域问题：如果前端和后端跑在不同端口（比如前端3000，后端5000），浏览器会拦截请求，导致pending。解决方法是给Express装个cors中间件：

  npm install cors
  

  然后在你的app.js里添加：

  const cors = require('cors');
  app.use(cors());
  

快速排查流程 #

1. 打开浏览器F12，切换到Network标签，选择日期后查看请求状态：
   • 要是pending，去Console标签看有没有CORS相关报错
   • 要是404，说明URL路径错误
   • 要是500，去后端控制台查看具体错误信息
2. 后端加日志确认请求是否到达
3. 检查后端每个分支都有响应语句
4. 单独测试数据库查询语句能否正常返回结果

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