JavaScript ES7：页面顶部发起异步请求，底部等待请求完成

这场景太实用了——提前抢发异步请求，同时让页面正常加载，等需要的时候再用数据，完美平衡加载速度和用户体验！我给你捋清楚实现方式，直接上可运行的代码示例：

1. 页面顶部提前发起异步请求 #

在页面最顶部的<script>里（甚至可以放在<head>里）发起请求，把请求的Promise对象存到全局作用域，这样后续任何代码都能访问到它，不用重复发起请求：

// 页面最顶部的脚本，优先发起请求
let dataPromise = (async function() {
  try {
    // 这里换成你的AJAX请求，用fetch/axios都可以
    const response = await fetch('/api/your-target-endpoint');
    if (!response.ok) throw new Error(`请求失败：${response.status}`);
    return await response.json();
  } catch (error) {
    console.error('数据请求出错:', error);
    // 可以返回默认数据或者null，避免后续代码报错
    return { message: '请求失败，使用默认数据' };
  }
})();

这个立即执行的async函数会立刻发起请求，同时返回一个Promise，不管请求成功还是失败，后续代码都能通过await dataPromise获取结果。

2. 让页面正常加载其余内容 #

这一步完全不用额外操作——浏览器在发起异步请求的同时，会继续解析HTML、加载CSS、图片和其他资源，页面该怎么渲染就怎么渲染，不会被请求阻塞。

3. 在需要的时机使用数据 #

你有两种常见的触发时机，都能轻松实现：

时机一：页面DOM加载完成后使用 #

如果要等页面DOM结构完全解析好再处理数据，就监听DOMContentLoaded事件，在回调里等待Promise完成：

// 页面底部的脚本
document.addEventListener('DOMContentLoaded', async function() {
  // 等待初始请求完成，拿到数据
  const data = await dataPromise;
  
  // 这里写你的业务逻辑，比如渲染数据到页面
  console.log('获取到数据:', data);
  renderData(data); // 假设这是你自己的渲染函数
});

时机二：页面底部的自定义函数触发 #

如果是某个特定的函数需要用到数据，直接在函数里await这个全局Promise就行，函数会自动等待请求完成后再执行：

// 页面底部的自定义业务函数
async function handleDataProcessing() {
  const data = await dataPromise;
  
  if (data) {
    // 这里写你的复杂逻辑，比如数据过滤、绑定事件等
    processComplexLogic(data);
  }
}

// 直接调用函数，它会自动等待请求完成
handleDataProcessing();

关键注意事项 #

• 全局Promise的作用域：确保dataPromise在后续代码能访问到的作用域里（比如全局，或者用ES模块的导出导入），避免找不到变量。
• 错误处理不能少：一定要在请求里加try/catch，否则请求失败会导致后续await的代码抛出未捕获的错误，影响页面功能。
• 灵活调整请求时机：如果你的请求依赖某些全局配置，也可以稍微延迟一点发起，但尽量放在页面最前面，最大化利用等待时间。

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