【ES6】一个页面上需要等两个或多个ajax的数据请求成功以后才正常显示（使用Promise.all和Promise.race）

在ES6中，你可以使用Promise来处理多个Ajax请求，并在所有请求都成功完成后再显示页面内容。以下是一个简单的示例：

// 假设有两个异步函数分别返回两个不同的数据请求
function fetchData1() {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: 'url1',
      success: (data) => resolve(data),
      error: (error) => reject(error)
    });
  });
}
 
function fetchData2() {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: 'url2',
      success: (data) => resolve(data),
      error: (error) => reject(error)
    });
  });
}
 
// 使用Promise.all来同时处理多个请求
Promise.all([fetchData1(), fetchData2()]).then(values => {
  // 当两个请求都成功返回后，执行的操作
  console.log('Both requests succeeded. Data:', values);
  
  // 假设你要显示页面内容
  document.getElementById('content').innerText = '页面内容';
}).catch(error => {
  // 如果任何一个请求失败，执行的操作
  console.error('An error occurred:', error);
});

在这个示例中，fetchData1 和 fetchData2 是两个返回Promise的异步函数，它们分别处理两个不同的数据请求。Promise.all 用于等待这两个请求都完成。当两个请求都成功返回后，.then 方法中的回调会被调用，此时可以安全地显示页面内容。如果任何一个请求失败，.catch 方法会被调用，你可以在这里处理错误情况。