JavaScript fetch的.then回调内更新的变量无法在外部生效

• 布尔值修改无法同步到外部，核心是异步代码执行顺序和预期不一致：fetch是非阻塞异步API，发起请求后JS引擎会直接执行后续所有同步代码，不会等请求返回。你写在.then外部的console.log和if判断，会在请求还没完成、.then回调还没触发时就全部执行完毕，此时data_inserted必然是初始值false。等后续请求成功进入.then修改变量时，判断逻辑早就执行完了，根本不会触发IDB更新分支。
• 直接在fetch的.then里操作IDB报事务已完成错误，是因为IDB事务生命周期和当前事件循环的同步任务绑定：只要同步代码执行完毕、没有后续绑定到该事务的操作，事务就会自动提交回收。等fetch的异步微任务触发时，之前在同步代码里创建的事务早就结束了，自然无法执行写入。

不要用外部布尔变量做状态标记判断，直接把IDB更新逻辑放到异步流程的正确执行节点，保证IDB事务创建、写入操作都在同一个同步执行段内完成。

方案1：原生Promise链式调用 #

直接在fetch的.then回调内处理完响应数据后，重新创建IDB事务执行写入，不要复用fetch发起前提前创建的事务：

fetch(你的请求地址, 请求配置)
  .then(response => response.json()) // 解析响应数据
  .then(storeData => {
    // 此处新开IDB读写事务
    const idbTransaction = db.transaction(['你的存储表名'], 'readwrite');
    const objectStore = idbTransaction.objectStore('你的存储表名');
    // 执行写入
    const putReq = objectStore.put(storeData);

    putReq.onsuccess = () => console.log('IDB数据更新完成');
    putReq.onerror = (err) => console.error('IDB写入失败', err);
  })
  .catch(err => console.error('请求执行失败', err));

方案2：async/await写法（逻辑更清晰） #

用async/await抹平异步写法的顺序差，代码逻辑和同步写法一致，更不容易出执行顺序问题：

async function syncDataToIDB() {
  try {
    // 等待请求和响应解析完成
    const response = await fetch(你的请求地址, 请求配置);
    const storeData = await response.json();

    // 拿到数据后再新开IDB事务写入
    const idbTransaction = db.transaction(['你的存储表名'], 'readwrite');
    const objectStore = idbTransaction.objectStore('你的存储表名');
    const putReq = objectStore.put(storeData);

    putReq.onsuccess = () => console.log('IDB数据更新完成');
    putReq.onerror = (err) => console.error('IDB写入失败', err);
  } catch (err) {
    console.error('流程执行异常', err);
  }
}

// 调用函数执行同步逻辑
syncDataToIDB();

关键注意点：IDB事务不会等待异步操作，不要在异步操作发起前提前创建事务，必须等异步操作拿到待存储数据后，再新建事务执行写入，否则必然触发事务已完成的报错。

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