如何无需重复执行node app.js即可刷新Node.js应用获取新图片？

问题根源 #

你当前的代码在服务启动时仅调用一次API获取图片，之后/hent路由一直返回这张固定的图片，所以必须重启服务才能更新。

方案1：刷新页面换图（修改后端） #

直接将API调用移到路由处理函数内部，让每次访问/hent都重新获取新图片：

// app.js 修改后
const Anime_Images = require("anime-images-api");
const API = new Anime_Images();

app.get("/hent", async function (req, res) {
  try {
    // 每次请求都调用API获取新图片
    let { image } = await API.nsfw.hentai();
    res.render("list", {
      Ejs: image,
    });
  } catch (error) {
    res.status(500).send("获取图片失败，请重试");
  }
});

修改后，刷新http://localhost:3000/hent页面即可看到新图片，无需重启服务。

方案2：按钮无刷新换图（前后端配合） #

如果不想刷新页面，可通过前端按钮触发异步请求，后端新增接口返回图片URL：

1. 修改后端app.js，新增API接口

const Anime_Images = require("anime-images-api");
const API = new Anime_Images();

// 页面路由，首次加载返回图片
app.get("/hent", async function (req, res) {
  try {
    let { image } = await API.nsfw.hentai();
    res.render("list", {
      Ejs: image,
    });
  } catch (error) {
    res.status(500).send("获取图片失败，请重试");
  }
});

// 新增接口：仅返回图片URL的JSON数据
app.get("/api/hent", async function (req, res) {
  try {
    let { image } = await API.nsfw.hentai();
    res.json({ image });
  } catch (error) {
    res.status(500).json({ error: "获取图片失败" });
  }
});

2. 修改list.ejs，添加按钮和异步逻辑

<body>
    <img id="hentaiImg" src="<%=Ejs%>">
    <button id="refreshBtn">换一张</button>

    <script>
        const refreshBtn = document.getElementById('refreshBtn');
        const hentaiImg = document.getElementById('hentaiImg');

        refreshBtn.addEventListener('click', async () => {
            try {
                // 请求后端API获取新图片地址
                const response = await fetch('/api/hent');
                const data = await response.json();
                // 更新图片src
                hentaiImg.src = data.image;
            } catch (err) {
                alert('换图失败，请重试');
            }
        });
    </script>
</body>

现在点击页面上的「换一张」按钮，就能无刷新加载新图片，完全不需要重启服务。

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