ajax并发怎么解决—示例代码

Ajax并发指的是同时发送多个Ajax请求，而不是等待前一个请求完成后再发送下一个请求。解决Ajax并发的常见方法有以下几种：

1. 使用Promise对象：通过使用Promise对象，可以管理多个并发的Ajax请求，并在所有请求都完成后进行相应的处理。示例代码如下：

function sendRequest(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.responseText);
        } else {
          reject(xhr.statusText);
        }
      }
    };
    xhr.send();
  });
}
var urls = ['url1', 'url2', 'url3'];
var requests = urls.map(function(url) {
  return sendRequest(url);
});
Promise.all(requests)
  .then(function(responses) {
    // 所有请求都成功完成后的处理逻辑
    console.log(responses);
  })
  .catch(function(error) {
    // 请求失败的处理逻辑
    console.error(error);
  });

2. 使用async/await：通过使用async/await语法，可以以同步的方式处理并发的Ajax请求。示例代码如下：

async function sendRequest(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.responseText);
        } else {
          reject(xhr.statusText);
        }
      }
    };
    xhr.send();
  });
}
async function fetchData() {
  var urls = ['url1', 'url2', 'url3'];
  var responses = [];
  for (var i = 0; i < urls.length; i++) {
    try {
      var response = await sendRequest(urls[i]);
      responses.push(response);
    } catch (error) {
      console.error(error);
    }
  }
  // 所有请求都完成后的处理逻辑
  console.log(responses);
}
fetchData();

3. 使用第三方库：还可以使用第三方库如axios、jQuery等来处理并发的Ajax请求。这些库提供了更方便的方法来管理并发请求，并提供了更多的功能和选项。示例代码如下：

axios.all([
  axios.get('url1'),
  axios.get('url2'),
  axios.get('url3')
])
  .then(axios.spread(function(response1, response2, response3) {
    // 所有请求都成功完成后的处理逻辑
    console.log(response1.data, response2.data, response3.data);
  }))
  .catch(function(error) {
    // 请求失败的处理逻辑
    console.error(error);
  });