如何用React/Node.js处理API限流问题及修复ReferenceError报错

1. 报错原因 #

你遇到的ReferenceError: data is not defined是变量作用域导致的：
你用let data = response.data.items是在axios的.then回调函数内部声明的，这个变量的作用域仅局限在该回调函数内部，外部的app.get("/youtube")路由处理函数完全访问不到这个变量，所以触发了未定义报错。

2. 修复方案&需求实现 #

你提出的「定时拉取第三方API数据缓存到自有接口、供前端无限制调用」的方案是合理的，属于绕过第三方API频率限制的常用实现方案，修正后的完整代码如下：

const express = require('express')
const axios = require('axios')
const app = express()

const url = "**Youtube API URL**"
// 在外层作用域声明缓存变量，存储拉取到的API数据
let cachedYoutubeData = null
// 封装拉取数据的函数，方便定时重复调用
const fetchYoutubeData = async () => {
  try {
    const response = await axios.get(url)
    // 拉取成功才更新缓存
    cachedYoutubeData = response.data.items
    console.log("Youtube数据更新成功", new Date().toLocaleString())
  } catch (err) {
    console.error("拉取Youtube数据失败:", err)
    // 报错时不更新缓存，继续使用上一次成功拉取的有效数据
  }
}

// 服务启动时先拉取一次数据
fetchYoutubeData()
// 设置30分钟定时拉取，30分钟等于1800000毫秒
setInterval(fetchYoutubeData, 30 * 60 * 1000)

app.get("/youtube", (req,res) => {
  // 兜底判断：如果缓存还没初始化（第一次拉取还没完成/首次拉取失败），返回友好提示
  if (!cachedYoutubeData) {
    return res.status(503).send("数据暂未准备好，请稍后重试")
  }
  res.send(cachedYoutubeData)
})

app.listen(5000, () => {console.log("server started on port 5000")})

3. 可选优化建议 #

• 如果数据量较大，可以把缓存从内存迁移到Redis这类缓存数据库，避免服务重启丢失缓存，同时减少内存占用
• 可以给接口加缓存响应头，让前端也能缓存数据，进一步减少请求量
• 如果需要更高的可用性，可以配置降级数据，第一次拉取失败的时候返回兜底的静态数据

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