JavaScript中如何在fetch外部访问获取的数据以初始化计时器？

问题根源 #

fetch是异步操作，你的completedata仅存在于fetch的回调函数（比如.then()的回调）作用域内，且外部代码会在fetch请求完成前就执行——这时候不仅找不到completedata，就算提前声明变量，值也还没被赋值。

解决方案 #

方案1：将依赖数据的代码移到Fetch回调内部 #

直接把创建allPegs的代码放到fetch获取到数据后的回调里，确保数据就绪后再执行逻辑：

fetch('https://fakestoreapi.com/products')
  .then(res => res.json())
  .then(completedata => {
    const timeOne = completedata[2].price;
    // 在这里创建allPegs，确保能拿到timeOne
    const allPegs = [
      createPeg('peg-1', timeOne * 60),
      createPeg('peg-2', 0.05 * 60),
      createPeg('peg-3', 60 * 60),
      createPeg('peg-4', 300 * 60),
      createPeg('peg-5', 5 * 60),
      createPeg('peg-6', 60 * 60),
      createPeg('peg-7', 15 * 60),
      createPeg('peg-8', 20 * 60),
      createPeg('peg-9', 30 * 60),
      createPeg('peg-10', 90 * 60),
      createPeg('peg-11',60 * 60),
      createPeg('peg-12', 70 * 60),
    ];
    // 此处可继续使用allPegs完成计时器初始化等后续操作
  })
  .catch(err => console.error('请求失败:', err));

方案2：使用Async/Await简化异步代码 #

用async/await让异步代码逻辑更接近同步写法，避免嵌套回调：

async function initPegs() {
  try {
    const res = await fetch('https://fakestoreapi.com/products');
    const completedata = await res.json();
    const timeOne = completedata[2].price;
    
    const allPegs = [
      createPeg('peg-1', timeOne * 60),
      createPeg('peg-2', 0.05 * 60),
      createPeg('peg-3', 60 * 60),
      createPeg('peg-4', 300 * 60),
      createPeg('peg-5', 5 * 60),
      createPeg('peg-6', 60 * 60),
      createPeg('peg-7', 15 * 60),
      createPeg('peg-8', 20 * 60),
      createPeg('peg-9', 30 * 60),
      createPeg('peg-10', 90 * 60),
      createPeg('peg-11',60 * 60),
      createPeg('peg-12', 70 * 60),
    ];
    // 后续操作allPegs
  } catch (err) {
    console.error('请求失败:', err);
  }
}

// 调用初始化函数
initPegs();

方案3：提前声明全局变量（不推荐，易引发时序问题） #

如果一定要在外部访问数据，可以提前声明全局变量，但必须严格确保数据请求完成后再使用相关变量：

let completedata = null;
let allPegs = [];

fetch('https://fakestoreapi.com/products')
  .then(res => res.json())
  .then(data => {
    completedata = data;
    const timeOne = completedata[2].price;
    allPegs = [
      createPeg('peg-1', timeOne * 60),
      // 其他peg配置...
    ];
    // 必须在这里或之后调用依赖allPegs的代码
    initTimers();
  });

// 计时器初始化函数，需确保allPegs已赋值
function initTimers() {
  // 使用allPegs执行操作
}

此方案不推荐，因为极易出现“数据未就绪就调用变量”的错误，仅适合能严格控制代码执行顺序的场景。

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