使用Express-Handlebars页面加载时异步获取会话用户数据遇请求pending问题

1. 先确认服务器端控制器是否正确返回响应 #

直接浏览器请求能成功，但前端fetch挂起，大概率是服务器端在某些场景下没有完成响应。检查你的getUserController代码，务必确保所有分支都有结束响应的操作：

// 正确的控制器示例
exports.getUserController = (req, res) => {
  if (!req.session.userData) {
    // 未登录场景也要返回响应，不能遗漏
    return res.status(401).json({ message: '未登录' });
  }
  // 确保用res.json/res.send等方法结束响应
  res.json(req.session.userData);
};

如果控制器存在条件分支遗漏响应（比如仅处理登录状态，未登录时无返回），或者内部有未完成的异步操作（比如数据库查询未await），都会导致请求一直处于pending状态。

2. 调整前端事件绑定的时机 #

局部视图的DOM在渲染完成后就已存在，无需等待整个页面的DOMContentLoaded——如果局部视图加载晚于页面的DOMContentLoaded触发时机，事件监听根本不会执行。直接把fetch逻辑放在局部视图末尾：

<!-- 局部视图文件末尾 -->
<script>
  (async () => {
    try {
      console.log('发起用户会话请求');
      const res = await fetch('/user-session', {
        credentials: 'include' // 携带会话Cookie，确保服务器能识别会话
      });
      if (!res.ok) throw new Error(`HTTP错误：${res.status}`);
      const userData = await res.json();
      console.log('获取用户数据:', userData);
      // 后续业务逻辑
    } catch (err) {
      console.error('请求失败:', err);
    }
  })();
</script>

3. 检查会话中间件的加载顺序 #

确认express-session等会话中间件在路由之前加载，否则控制器无法读取req.session.userData，若此时未处理无会话的情况，会导致响应卡住：

// 先加载会话中间件
app.use(session({
  secret: 'your-secret-key',
  resave: false,
  saveUninitialized: false,
  cookie: { secure: process.env.NODE_ENV === 'production' }
}));
// 再加载路由
app.use('/user-session', yourUserRoute);

4. 排查前端代码阻塞问题 #

检查页面中是否有其他JS代码阻塞了事件循环（比如死循环、同步大计算），导致fetch的回调无法执行。可以在fetch前后添加日志，确认请求是否真的发出去：

console.log('准备发起请求');
const res = await fetch('/user-session');
console.log('请求已收到响应');

如果只有前一条日志输出，说明请求已发送但服务器未响应；如果两条都没输出，说明代码根本没执行到fetch逻辑。

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