返回页面后如何维持API运行状态并保留进度显示？

要实现这个需求，核心是让API请求脱离页面生命周期独立运行，同时持久化进度状态，页面重建时再恢复状态。以下是分场景的具体实现思路：

核心原则 #

• 不要让API请求与页面组件绑定，避免页面销毁时请求中断
• 进度数据必须持久化存储，不能只存在内存中
• 页面重新进入时，先恢复历史进度，再关联正在运行的请求

1. 前端Web场景 #

（1）用Web Worker承载API请求

Web Worker运行在独立线程，页面卸载后仍可继续执行请求，不会被主线程中断。

创建api-worker.js处理请求和进度计算：

self.addEventListener('message', async (e) => {
  const { apiUrl, requestBody } = e.data;
  try {
    const response = await fetch(apiUrl, {
      method: 'POST',
      body: JSON.stringify(requestBody),
      headers: { 'Content-Type': 'application/json' }
    });

    // 流式读取响应计算进度（需API返回Content-Length头）
    const contentLength = +response.headers.get('Content-Length');
    let receivedLength = 0;
    const reader = response.body.getReader();

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      
      receivedLength += value.length;
      const progress = Math.round((receivedLength / contentLength) * 100);
      // 持久化进度到localStorage
      localStorage.setItem('currentApiProgress', progress.toString());
      // 同步进度到主线程（如果页面存在的话）
      self.postMessage({ progress });
    }

    // 标记请求完成
    localStorage.setItem('currentApiProgress', '100');
    localStorage.setItem('apiRequestStatus', 'completed');
  } catch (err) {
    localStorage.setItem('apiRequestStatus', 'failed');
    console.error('API请求失败:', err);
  }
});

（2）页面端逻辑处理

页面加载时恢复进度，关联Worker监听更新：

let apiWorker;

// 页面初始化时恢复状态
window.addEventListener('DOMContentLoaded', () => {
  const savedProgress = localStorage.getItem('currentApiProgress');
  const savedStatus = localStorage.getItem('apiRequestStatus');

  // 先恢复历史进度UI
  if (savedProgress) {
    updateProgressBar(savedProgress);
  }

  // 如果请求还在运行，重启Worker监听进度
  if (savedStatus === 'running' || !savedStatus) {
    apiWorker = new Worker('api-worker.js');
    apiWorker.addEventListener('message', (e) => {
      updateProgressBar(e.data.progress);
    });
  } else if (savedStatus === 'completed') {
    // 请求已完成，清理存储并显示完成状态
    localStorage.removeItem('currentApiProgress');
    localStorage.removeItem('apiRequestStatus');
    updateProgressBar(100);
  }
});

// 发起API请求的入口
function startLongApiCall() {
  localStorage.setItem('apiRequestStatus', 'running');
  apiWorker = new Worker('api-worker.js');
  apiWorker.postMessage({
    apiUrl: 'https://your-api-endpoint.com/long-task',
    requestBody: { /* 你的请求参数 */ }
  });
}

// 更新进度UI的工具函数
function updateProgressBar(progress) {
  const bar = document.getElementById('progress-bar');
  bar.style.width = `${progress}%`;
  bar.textContent = `${progress}%`;
}

2. 移动端场景（Android/iOS） #

Android

• 用WorkManager执行后台API请求：WorkManager会自动处理系统重启、应用被杀等场景，保证任务完成。
• 进度持久化：用SharedPreferences或Room数据库存储当前进度，页面重建时读取并更新UI。
• 页面监听进度：通过LiveData或Flow订阅WorkManager的任务进度，页面进入时自动关联。

iOS

• 用BackgroundTasks框架发起后台任务：申请后台执行权限，让API请求在后台继续运行。
• 进度持久化：用UserDefaults或CoreData存储进度数据。
• 页面恢复：页面进入时读取存储的进度，同时通过NotificationCenter监听后台任务的进度更新。

关键注意事项 #

• 必须处理请求失败的情况：持久化失败状态，页面进入时提示用户重试。
• 清理过期数据：请求完成或失败后，及时清除本地存储的进度和状态，避免下次进入时显示旧数据。
• 平台限制：部分移动端系统对后台任务有时间限制，长时间任务可能需要配合推送通知告知用户完成状态。

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