使用EJS与NodeJs时偶现data未定义错误，刷新后可恢复

在Node.js+EJS开发场景中，页面偶尔会抛出data is not defined错误，报错指向EJS模板第40行的<%= data.activity %>代码，多次刷新页面后错误会自行消失。

相关代码片段 #

EJS报错位置

38|         <h2 class="card-activity">
    39|           <!-- Show Activity -->
 >> 40|           <%= data.activity %>
    41|         </h2>
    42|         <div class="card-info">
    43|           <span class="card-type">

错误信息：data is not defined

Node.js路由代码（index.js）

app.get("/", async (req, res) => {
  try {
    const response = await axios.get("https://bored-api.appbrewery.com/random");
    const result = response.data;
    res.render("index.ejs", { data: result });
    //res.locals = {data: {}}
  } catch (error) {
    console.error("Failed to make request:", error.message);
    res.render("index.ejs", {
      error: error.message,
    });
  }
});

EJS模板其他使用data的片段（index.ejs）

<div class="card-info">
          <span class="card-type">
            <!-- Show Activity type -->
            <%= data.type %>
          </span>
          <span class="card-participants">
            <!-- participants: Show participant number -->
            <%= data.participants %>
            <span class="card-number"></span>
          </span>
        </div>

1. API请求失败触发异常分支：当第三方API（https://bored-api.appbrewery.com/random）出现请求超时、返回错误或网络波动时，代码会进入catch块，此时渲染EJS模板仅传递了error变量，未传递data。而模板中直接访问data.activity、data.type等属性，导致data未定义报错。
2. 刷新后请求恢复正常：再次刷新页面时，API请求可能恢复成功，进入try块传递了data变量，模板能正常渲染，错误自然消失。

• 异常分支补充默认data：在catch块渲染模板时，添加空的data对象或占位值，避免模板找不到变量：

  catch (error) {
    console.error("Failed to make request:", error.message);
    res.render("index.ejs", {
      error: error.message,
      data: { activity: "暂无活动", type: "未知类型", participants: 0 } // 带占位值的默认对象
    });
  }
  

• 模板中添加存在性检查：在使用data的地方先判断是否存在，避免直接访问属性报错：

  <h2 class="card-activity">
    <%= data?.activity || "暂无活动" %>
  </h2>
  <div class="card-info">
    <span class="card-type">
      <%= data?.type || "未知类型" %>
    </span>
    <span class="card-participants">
      <%= data?.participants || 0 %>
      <span class="card-number"></span>
    </span>
  </div>
  

  这里用可选链操作符?.确保data不存在时不会抛出错误，同时用||设置默认值。

• 统一渲染数据入口：不管请求成功还是失败，都保证data存在，简化分支逻辑：

  app.get("/", async (req, res) => {
    const renderData = { data: {} };
    try {
      const response = await axios.get("https://bored-api.appbrewery.com/random");
      renderData.data = response.data;
    } catch (error) {
      console.error("Failed to make request:", error.message);
      renderData.error = error.message;
    }
    res.render("index.ejs", renderData);
  });
  

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