在无法更改后台接口的情况下，如何在 for 循环中调用 ajax，且保证顺序

2023-11-30 18:16:17

一、问题背景

在实际开发中，我们经常会遇到需要在 for 循环中调用 ajax 的场景。例如，我们需要从服务器获取一组数据，并根据这些数据进行后续操作。但是，由于 ajax 是异步的，因此如果我们在 for 循环中直接调用 ajax，则无法保证请求的顺序。这可能会导致数据错乱，甚至程序崩溃。

二、解决方案

为了解决这个问题，我们可以采用以下几种方法：

使用同步 ajax

同步 ajax 是指在发送请求后，浏览器会等待服务器响应后再继续执行代码。这样可以保证请求的顺序，但是会阻塞浏览器，导致页面卡顿。

使用回调函数

回调函数是一种在异步操作完成后执行的函数。我们可以将回调函数作为 ajax 请求的最后一个参数，并在回调函数中处理服务器的响应。这样可以避免阻塞浏览器，但需要编写更多的代码。

使用 Promise

Promise 是一种表示异步操作的返回值的对象。我们可以使用 Promise 来处理 ajax 请求，并在 Promise 完成后执行后续操作。这样可以使代码更加简洁，但需要对 Promise 有所了解。

三、方法比较

以下表格比较了这三种方法的优缺点：

方法	优缺点
同步 ajax	保证请求顺序，但会阻塞浏览器
回调函数	不阻塞浏览器，但需要编写更多的代码
Promise	代码简洁，但需要对 Promise 有所了解

四、推荐方法

在实际开发中，我们通常推荐使用 Promise 来处理 ajax 请求。Promise 可以使代码更加简洁，同时也能保证请求的顺序。

五、具体实现

以下代码演示了如何在 for 循环中使用 Promise 来调用 ajax，并确保请求的顺序：

const data = [];

for (let i = 0; i < 10; i++) {
  const url = 'https://example.com/api/data/' + i;

  const promise = new Promise((resolve, reject) => {
    $.ajax({
      url: url,
      success: function(response) {
        resolve(response);
      },
      error: function(error) {
        reject(error);
      }
    });
  });

  data.push(promise);
}

Promise.all(data).then((responses) => {
  console.log(responses);
});