如何缓存API响应至内存，实现应用生命周期内仅一次获取数据？

嘿，这个需求太常见了——毕竟数据不常更新的话，反复请求完全是浪费资源。咱们可以从几个不同的角度来实现，既能保证只发起一次API请求，又能让数据在应用整个生命周期里（除非完全退出前后台）都保存在内存里：

要解决你的问题，关键要抓住两个点：

1. 确保只发起一次API请求，哪怕多个组件同时尝试获取数据
2. 把数据存在内存里，只要应用进程没被杀掉（用户没完全退出前后台），就一直保留

1. 全局单例模块（通用所有JS环境） #

这是最基础、无框架依赖的方式，创建一个独立的服务模块来管理数据和请求状态：

比如新建一个categoryService.js文件：

// 模块级变量，会一直驻留在内存中（直到应用完全退出）
let categories = [];
// 标记是否正在请求，防止并发场景下重复发起请求
let isFetching = false;

export async function getCategories() {
  // 已有数据，直接返回缓存
  if (categories.length > 0) {
    return Promise.resolve(categories);
  }
  // 正在请求中，等待请求完成后返回数据
  if (isFetching) {
    return new Promise(resolve => {
      const checkTimer = setInterval(() => {
        if (!isFetching) {
          clearInterval(checkTimer);
          resolve(categories);
        }
      }, 50);
    });
  }
  // 首次请求/缓存为空，发起API请求
  isFetching = true;
  try {
    const response = await fetch('你的API接口地址');
    categories = await response.json();
    return categories;
  } catch (error) {
    console.error('获取分类数据失败:', error);
    throw error; // 抛出错误让组件处理
  } finally {
    isFetching = false;
  }
}

之后在任何组件里调用：

import { getCategories } from './categoryService';

// 组件加载时获取数据
async function loadCategories() {
  const cats = await getCategories();
  // 用数据更新组件状态即可
}

这种方式下，只要模块没被销毁（应用没完全退出），categories变量就会一直存在，每次调用都会优先返回缓存，不会重复请求。

2. 框架全局状态管理（React/Vue等） #

如果你的项目用了状态管理库（比如React的Zustand/Redux，Vue的Pinia/Vuex），可以把数据存在全局状态中，同时在状态层实现单次请求逻辑：

举个React用Zustand的例子：

import { create } from 'zustand';

const useCategoryStore = create((set, get) => ({
  categories: [],
  isFetching: false,
  fetchCategories: async () => {
    const { categories, isFetching } = get();
    // 已有数据或正在请求，直接返回
    if (categories.length > 0 || isFetching) return;
    
    set({ isFetching: true });
    try {
      const res = await fetch('你的API接口地址');
      const data = await res.json();
      set({ categories: data });
    } catch (err) {
      console.error('请求分类数据出错:', err);
    } finally {
      set({ isFetching: false });
    }
  }
}));

然后在组件里使用：

function MyComponent() {
  const { categories, fetchCategories } = useCategoryStore();
  
  useEffect(() => {
    fetchCategories();
  }, []);
  
  // 直接用categories渲染即可
  return <div>{categories.map(cat => <div key={cat.id}>{cat.name}</div>)}</div>;
}

全局状态里的categories会一直存在，直到应用完全退出，任何组件需要数据都直接从状态里取，不用重复发起请求。

3. 根组件初始化（无状态管理库时） #

如果不用状态管理，也可以在应用的根组件里发起一次请求，然后通过上下文（Context）或者props把数据传递给所有子组件：

比如React用Context的实现：

import { createContext, useContext, useState, useEffect } from 'react';

// 创建分类数据的Context
const CategoryContext = createContext([]);

// 根组件
function App() {
  const [categories, setCategories] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    async function fetchInitialData() {
      if (categories.length > 0) return;
      setIsLoading(true);
      const res = await fetch('你的API接口地址');
      const data = await res.json();
      setCategories(data);
      setIsLoading(false);
    }
    fetchInitialData();
  }, []);

  return (
    <CategoryContext.Provider value={categories}>
      {/* 你的路由和子组件 */}
      {isLoading ? <div>加载中...</div> : <Outlet />}
    </CategoryContext.Provider>
  );
}

// 子组件中获取数据
function ChildComponent() {
  const categories = useContext(CategoryContext);
  // 直接使用categories渲染
}

根组件只会在应用启动时加载一次，所以请求只会发一次，数据通过Context传递给所有需要的子组件，只要应用不退出，数据就一直在内存里。

额外提醒 #

• 这种内存存储的方式，当用户完全退出应用（比如从后台划掉），数据会丢失，下次打开会重新请求，这正好符合你的需求。
• 如果需要更持久的存储（比如退出后还保留数据），可以结合localStorage，但要注意加个时间戳判断数据是否过期，避免展示旧数据。
• 一定要处理请求失败的情况，比如给组件加错误提示，避免用户一直看不到内容。

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