如何等待所有xhr请求完成？

等待所有XHR（XMLHttpRequest）请求完成通常是在JavaScript中进行异步操作的一个需求。这可以通过多种方式实现，以下是几种常见的方法：

1. 使用Promise.all

如果你使用的是现代的JavaScript环境（ES6+），可以使用Promise.all来等待所有XHR请求完成。每个XHR请求都可以被封装成一个Promise对象。

function makeRequest(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
}

const urls = ['url1', 'url2', 'url3'];
Promise.all(urls.map(makeRequest))
  .then(responses => {
    console.log('All requests completed', responses);
  })
  .catch(error => {
    console.error('An error occurred', error);
  });

2. 使用回调函数

如果你使用的是较旧的JavaScript环境，或者不想使用Promise，可以使用回调函数来实现。

function makeRequest(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onload = () => callback(null, xhr.responseText);
  xhr.onerror = () => callback(xhr.statusText);
  xhr.send();
}

const urls = ['url1', 'url2', 'url3'];
let completedRequests = 0;
const results = [];

function checkAllRequestsCompleted() {
  if (completedRequests === urls.length) {
    console.log('All requests completed', results);
  }
}

urls.forEach(url => {
  makeRequest(url, (error, response) => {
    if (error) {
      console.error('An error occurred', error);
    } else {
      results.push(response);
      completedRequests++;
      checkAllRequestsCompleted();
    }
  });
});

3. 使用async/await

如果你更喜欢使用现代JavaScript的语法，可以使用async/await来简化代码。

async function makeRequest(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
}

async function fetchAllRequests() {
  const urls = ['url1', 'url2', 'url3'];
  try {
    const responses = await Promise.all(urls.map(makeRequest));
    console.log('All requests completed', responses);
  } catch (error) {
    console.error('An error occurred', error);
  }
}

fetchAllRequests();