JavaScript并发控制：如何确保异步请求的响应结果依次获取？

在JavaScript中，处理异步请求时，确保响应结果按顺序获取是一个常见的需求。由于异步操作的特性，请求的完成顺序可能与发起顺序不一致。为了确保按顺序获取响应结果，可以使用以下几种方法：

1. 使用 async/await 和 for 循环

通过 async/await 结合 for 循环，可以确保异步请求按顺序执行。

async function fetchSequentially(urls) {
  const results = [];
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    results.push(data);
  }
  return results;
}

const urls = ['url1', 'url2', 'url3'];
fetchSequentially(urls).then(results => {
  console.log(results);
});

2. 使用 Promise 链

通过 Promise 链，可以确保每个请求在前一个请求完成后才开始。

function fetchSequentially(urls) {
  let chain = Promise.resolve();
  const results = [];

  urls.forEach(url => {
    chain = chain
      .then(() => fetch(url))
      .then(response => response.json())
      .then(data => results.push(data));
  });

  return chain.then(() => results);
}

const urls = ['url1', 'url2', 'url3'];
fetchSequentially(urls).then(results => {
  console.log(results);
});

3. 使用 reduce 和 Promise

通过 reduce 方法，可以将多个 Promise 按顺序串联起来。

function fetchSequentially(urls) {
  return urls.reduce((chain, url) => {
    return chain.then(results => {
      return fetch(url)
        .then(response => response.json())
        .then(data => results.concat(data));
    });
  }, Promise.resolve([]));
}

const urls = ['url1', 'url2', 'url3'];
fetchSequentially(urls).then(results => {
  console.log(results);
});

4. 使用 async/await 和 reduce

结合 async/await 和 reduce，可以更简洁地实现顺序请求。

async function fetchSequentially(urls) {
  return urls.reduce(async (chain, url) => {
    const results = await chain;
    const response = await fetch(url);
    const data = await response.json();
    return results.concat(data);
  }, Promise.resolve([]));
}

const urls = ['url1', 'url2', 'url3'];
fetchSequentially(urls).then(results => {
  console.log(results);
});

5. 使用 Promise.all 和 map（不推荐）

虽然 Promise.all 可以并行执行请求，但可以通过 map 和 Promise 链来确保顺序。不过，这种方法并不推荐，因为它失去了 Promise.all 的并行优势。

function fetchSequentially(urls) {
  return Promise.all(
    urls.map(async url => {
      const response = await fetch(url);
      return response.json();
    })
  );
}

const urls = ['url1', 'url2', 'url3'];
fetchSequentially(urls).then(results => {
  console.log(results);
});

总结

• async/await 和 for 循环：简单直观，适合大多数场景。
• Promise 链：适用于需要手动控制 Promise 链的场景。
• reduce 和 Promise：功能强大，适合复杂的顺序控制。
• async/await 和 reduce：简洁高效，推荐使用。

选择哪种方法取决于具体的需求和代码风格。通常情况下，async/await 和 for 循环是最简单和直观的选择。