如何在Express的GET请求内使用fetch获取数据并渲染结果

• 原因1：Node.js版本低于18，无内置全局fetch
  低于18的Node.js版本没有默认集成fetch API，代码执行时会抛出未定义错误直接进入catch分支，导致shows参数未传递到视图。
  解决方法：
  要么升级Node.js到18.x及以上版本，要么手动安装node-fetch依赖：

  npm install node-fetch@2
  

  安装完成后在路由文件顶部引入：

  const fetch = require('node-fetch')
  

  （注：node-fetch@3开始仅支持ESM模块，若你的项目用CommonJS规范，必须安装v2版本）

• 原因2：未捕获接口请求异常
  现有代码未校验接口返回状态，就算API能正常访问，也可能因服务端网络限制、代理配置等问题导致请求失败，且catch分支没有打印错误日志，无法定位问题。
  优化后的路由代码如下：

  router.get('/dashboard', ensureAuth, async (req, res) => {
      try {
          const resp = await fetch("https://api.tvmaze.com/shows?page=1")
          // 新增返回状态校验
          if (!resp.ok) {
              throw new Error(`接口请求失败，状态码：${resp.status}`)
          }
          const respData = await resp.json()
          // 新增日志打印，确认是否拿到正确数据
          console.log('获取到的节目数据：', respData)
          res.render('dashboard', {
              name: req.user.firstName,
              image: req.user.image,
              shows: respData
          })
      } catch (error) {
          // 新增错误日志打印
          console.error('请求出错：', error)
          res.render('dashboard', {
              name: req.user.firstName,
              image: req.user.image
          })
      }
  })
  

• 原因3：模板取值问题
  可先在视图中添加调试代码，确认shows变量是否正确传递：

  <body>
      <!-- 新增调试行，查看数据长度 -->
      <p>节目总数：{{shows ? shows.length : '无数据'}}</p>
      {{#if shows}}
      {{#each shows}}
      <img src="{{image.original}}" alt="{{name}}" />
      <div class="movie-info">
          <h3>{{name}}</h3>
          <span>{{weight}}</span>
      </div>
      {{/each}}
      {{else}}
      <p>No shows available.</p>
      {{/if}}
  </body>
  

  若调试行显示无数据，说明问题出在服务端数据获取环节；若显示了正确的长度但列表未渲染，可将{{name}}替换为{{this.name}}适配模板引擎的上下文规则。

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