Zendesk开发中预加载异步静态数据的优化模式咨询

核心思路：用Promise缓存预加载数据，按钮点击时自动等待数据就绪 #

不用默认禁用按钮，而是让按钮的点击逻辑自动适配数据加载状态——不管数据是已预加载完成，还是正在加载中，点击操作都能正确等待，彻底避免竞态条件，同时保留预加载的性能优势。

具体实现步骤 #

1. 全局缓存预加载的Promise
   页面加载时发起API请求，把返回的Promise存在全局变量中，而非直接存储数据。这样无论何时调用，都能通过这个Promise获取数据，不管它处于pending还是resolved状态。

// 页面加载阶段启动预加载
window.staticDataPromise = fetch('/api/static-data')
  .then(response => response.json())
  .catch(err => {
    console.error('预加载静态数据失败:', err);
    throw err; // 保留错误状态，让后续调用可捕获
  });

2. 按钮点击逻辑绑定Promise等待
   按钮默认保持启用状态，点击时先等待staticDataPromise完成，再执行核心操作。如果数据已加载完成，Promise会立即resolve，操作几乎无延迟；若数据仍在加载中，点击会自动等待，不会触发竞态。

// 原生JS实现
document.getElementById('action-btn').addEventListener('click', async () => {
  try {
    // 等待预加载Promise完成（无论已完成还是正在加载）
    const staticData = await window.staticDataPromise;
    // 执行核心业务操作
    executeCoreAction(staticData);
  } catch (err) {
    // 处理数据加载失败场景，比如提示用户重试
    alert('数据加载失败，请稍后重试');
  }
});

// jQuery实现
$('#action-btn').on('click', async function() {
  try {
    const staticData = await window.staticDataPromise;
    executeCoreAction(staticData);
  } catch (err) {
    alert('数据加载失败，请稍后重试');
  }
});

3. 可选：添加加载状态反馈
   如果担心用户在数据加载中点击按钮无感知，可以在点击后临时禁用按钮并显示加载状态，操作完成后恢复：

document.getElementById('action-btn').addEventListener('click', async (e) => {
  const btn = e.target;
  // 点击后立即切换状态
  btn.disabled = true;
  btn.textContent = '处理中...';
  try {
    const staticData = await window.staticDataPromise;
    executeCoreAction(staticData);
  } catch (err) {
    alert('数据加载失败，请稍后重试');
  } finally {
    // 无论成功失败，恢复按钮初始状态
    btn.disabled = false;
    btn.textContent = '执行操作';
  }
});

该方案的优势 #

• 用户体验更流畅：按钮始终可用，不会出现“按钮灰化无法判断可用时机”的情况，用户点击后能得到明确的加载反馈。
• 彻底规避竞态条件：Promise的特性保证了所有操作都会等待数据就绪，不会出现数据未加载完成就执行核心逻辑的问题。
• 代码逻辑更集中：无需额外监听数据加载完成事件来启用按钮，所有交互逻辑都集中在按钮点击回调中。

额外优化点 #

• 缓存数据结果：当Promise resolved后，可将数据缓存起来，后续调用直接使用缓存数据，进一步提升性能：

  let cachedStaticData = null;
  window.staticDataPromise = fetch('/api/static-data')
    .then(response => response.json())
    .then(data => {
      cachedStaticData = data;
      return data;
    })
    .catch(err => {
      console.error('预加载静态数据失败:', err);
      throw err;
    });
  
  // 后续可直接判断cachedStaticData是否存在，跳过Promise等待
  

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