JavaScript Promise链变量赋值问题及JSON数据缓存模块失效排查

我猜你大概率是在异步处理或者缓存逻辑上踩了坑——这种“只发一次请求，后续直接返回缓存”的模块，最容易出问题的地方就是没处理好Promise的并发状态，或者缓存的时机不对。先给你看一个常见的错误写法（估计你现在的代码类似这样）：

错误示例：

// data_module.js
let cachedData = null;

export async function get_json() {
  if (cachedData) {
    return cachedData;
  }
  const response = await fetch('/api/data');
  cachedData = await response.json();
  return cachedData;
}

这个写法看似没问题，但如果多个组件同时调用get_json()，第一次请求还没完成时，cachedData还是null，这时候会同时发起多个重复请求——完全违背了我们要缓存的初衷。

正确的实现方式：缓存Promise而非最终数据 #

核心思路是：把fetch返回的Promise缓存起来，而不是缓存最终解析后的JSON数据。这样哪怕多个组件同时调用，也只会发起一次请求，所有调用者都会等待同一个Promise完成。

// data_module.js
// 模块级变量，只在模块内部可见
let cachedPromise = null;

export function get_json() {
  // 如果已有缓存的Promise，直接返回
  if (cachedPromise) {
    return cachedPromise;
  }

  // 创建请求Promise并缓存
  cachedPromise = fetch('/api/data')
    .then(response => {
      // 先检查请求是否成功
      if (!response.ok) {
        throw new Error(`请求失败: ${response.status} ${response.statusText}`);
      }
      // 解析JSON并返回
      return response.json();
    })
    .catch(error => {
      // 关键：请求失败时清空缓存，下次调用会重新发起请求
      cachedPromise = null;
      // 把错误抛出去，让外部组件处理
      throw error;
    });

  return cachedPromise;
}

外部组件如何正确调用 #

不管是React、Vue还是原生JS组件，只要通过await或者.then()处理这个Promise就行：

// 示例：React组件中调用
import { get_json } from './data_module.js';

async function loadComponentData() {
  try {
    const data = await get_json();
    // 拿到数据后做业务处理
    console.log('组件拿到数据:', data);
  } catch (error) {
    // 处理请求失败的情况
    console.error('加载数据出错:', error);
  }
}

// 原生JS模块调用
get_json()
  .then(data => {
    console.log('原生模块拿到数据:', data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

几个关键注意点 #

• 缓存Promise而非数据：这是解决并发请求重复调用的核心，因为Promise一旦创建就会执行请求，后续返回同一个Promise就能共享请求结果。
• 错误时清空缓存：如果请求失败（比如网络错误、接口返回500），一定要把cachedPromise设为null，否则下次调用会直接返回失败的Promise，永远拿不到正确数据。
• 模块作用域隔离：确保cachedPromise是模块级的私有变量，不要暴露给外部，避免被意外修改。
• 不要缓存原始Response：一定要在Promise链里把Response解析成JSON再返回，不然外部还要重复处理Response，容易出错。

如果你的问题不是并发请求的问题，而是模块导出/导入的问题（比如用了CommonJS而非ES模块），可以用下面的写法：

// CommonJS版本（适用于Node.js或旧项目）
let cachedPromise = null;

function get_json() {
  if (cachedPromise) {
    return cachedPromise;
  }
  cachedPromise = fetch('/api/data')
    .then(response => {
      if (!response.ok) {
        throw new Error(`请求失败: ${response.status}`);
      }
      return response.json();
    })
    .catch(error => {
      cachedPromise = null;
      throw error;
    });
  return cachedPromise;
}

module.exports = { get_json };

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