Angular离线缓存数据联网后批量调用API并清理的实现方案问询

你的场景不适合用Promise.all或forkJoin这类并行批量处理方案——因为一旦某个API请求失败，批量处理会直接终止，而且大量并发请求可能触发服务器限流，同时失败的数据项无法单独保留重试。更稳妥的方式是串行逐个处理待上传数据，结合网络状态监听实现自动同步。

核心思路 #

1. 离线存储：无网络时将数据存入localStorage的数组中
2. 网络监听：通过online事件监听网络恢复，触发同步逻辑
3. 串行处理：逐个取出待处理数据发起API请求，成功则删除对应条目，失败则保留待下次重试
4. 页面初始化检查：页面加载时若网络在线，自动检查并同步未处理数据

具体代码实现 #

1. 封装localStorage操作函数 #

// 存储待处理数据到localStorage
const savePendingData = (data) => {
  const pendingList = JSON.parse(localStorage.getItem('pendingData')) || [];
  pendingList.push(data);
  localStorage.setItem('pendingData', JSON.stringify(pendingList));
};

// 获取所有待处理数据
const getPendingData = () => {
  return JSON.parse(localStorage.getItem('pendingData')) || [];
};

// 更新待处理数据（移除已成功的项）
const updatePendingData = (remainingData) => {
  localStorage.setItem('pendingData', JSON.stringify(remainingData));
};

2. 单个数据的API请求（可选带重试） #

// 带重试机制的API请求函数
const sendDataWithRetry = async (data, retryTimes = 3) => {
  let attempt = 0;
  while (attempt < retryTimes) {
    try {
      const res = await fetch('/your-api-url', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      });
      if (res.ok) return await res.json();
    } catch (err) {
      console.error(`第${attempt+1}次重试失败:`, err);
    }
    attempt++;
    await new Promise(resolve => setTimeout(resolve, 1000)); // 1秒后重试
  }
  throw new Error(`重试${retryTimes}次仍失败`);
};

3. 串行同步待处理数据 #

const syncPendingData = async () => {
  let pendingList = getPendingData();
  if (pendingList.length === 0) return;

  for (let i = 0; i < pendingList.length; ) {
    const currentItem = pendingList[i];
    try {
      await sendDataWithRetry(currentItem);
      // 请求成功，移除当前项并更新存储
      pendingList.splice(i, 1);
      updatePendingData(pendingList);
    } catch (err) {
      console.error(`处理数据失败，保留待下次重试:`, err);
      // 失败则跳过当前项，处理下一个
      i++;
    }
  }
};

4. 绑定网络监听与页面初始化检查 #

// 网络恢复时触发同步
window.addEventListener('online', () => {
  console.log('网络已恢复，开始同步离线数据');
  syncPendingData();
});

// 页面加载时，若网络在线则自动同步
window.addEventListener('load', () => {
  if (navigator.onLine) syncPendingData();
});

为什么不推荐并行方案？ #

• Promise.all/forkJoin会同时发起所有请求，一旦某一个失败，整个批量会直接 reject，未失败的请求结果也无法单独处理
• 大量并发请求容易触发服务器限流，导致更多失败
• 串行处理可以保证逐个验证数据上传状态，失败项可保留至下次网络恢复时重试，更符合离线缓存的可靠性需求

可选：RxJS实现方式 #

如果你习惯用RxJS，可通过concatMap实现串行处理：

import { from, of } from 'rxjs';
import { concatMap, catchError } from 'rxjs/operators';

const syncWithRxJS = () => {
  const pendingList = getPendingData();
  if (pendingList.length === 0) return;

  from(pendingList).pipe(
    concatMap(item => 
      sendDataWithRetry(item).pipe(
        catchError(err => {
          console.error('处理失败:', err);
          return of(null); // 失败返回null，继续处理下一项
        })
      )
    )
  ).subscribe(result => {
    if (result) {
      // 移除已成功的项（建议数据携带唯一id，避免JSON.stringify匹配误差）
      const updatedList = getPendingData().filter(item => item.id !== result.id);
      updatePendingData(updatedList);
    }
  });
};

// 绑定监听事件
window.addEventListener('online', syncWithRxJS);
window.addEventListener('load', () => navigator.onLine && syncWithRxJS());

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