JavaScript中多个异步请求如何顺序执行？

前言

在 JavaScript 中，有多种方式可以让多个异步请求按顺序执行。以下是几种常见的方式：

async/await

async/await 是现代 JavaScript 中推荐的方式，它使得代码看起来更像同步代码，易于理解和维护：

async function fetchInSequence() {
  try {
    const result1 = await fetch('https://api.example.com/endpoint1');
    const data1 = await result1.json();
    console.log(data1);

    const result2 = await fetch('https://api.example.com/endpoint2');
    const data2 = await result2.json();
    console.log(data2);

    const result3 = await fetch('https://api.example.com/endpoint3');
    const data3 = await result3.json();
    console.log(data3);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchInSequence();

这里的 await 确保了每个请求在下一个开始之前完成，按顺序执行。

Promise 链

你也可以使用 .then() 链接多个 Promise，这种方式在使用 Promise 时较为常见：

fetch('https://api.example.com/endpoint1')
  .then(response1 => response1.json())
  .then(data1 => {
    console.log(data1);
    return fetch('https://api.example.com/endpoint2');
  })
  .then(response2 => response2.json())
  .then(data2 => {
    console.log(data2);
    return fetch('https://api.example.com/endpoint3');
  })
  .then(response3 => response3.json())
  .then(data3 => {
    console.log(data3);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

for 循环和 await

如果有一个数组，想要依次执行每个异步请求，也可以结合 for 循环和 await 来实现：

async function fetchInSequence(urls) {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  }
}

const urls = [
  'https://api.example.com/endpoint1',
  'https://api.example.com/endpoint2',
  'https://api.example.com/endpoint3'
];

fetchInSequence(urls);

reduce 和 Promise

你也可以通过 reduce 来按顺序执行多个 Promise，尤其适用于要对数组中的每个元素执行异步操作时：

const urls = [
  'https://api.example.com/endpoint1',
  'https://api.example.com/endpoint2',
  'https://api.example.com/endpoint3'
];

urls.reduce((promiseChain, currentUrl) => {
  return promiseChain
    .then(() => fetch(currentUrl))
    .then(response => response.json())
    .then(data => console.log(data));
}, Promise.resolve());

这种方式通过链式 Promise 确保顺序执行。

小结

        哪种方式更适合你取决于具体情况。如果是简单的几个请求，async/await 更易读和维护。如果你需要处理很多异步操作或者进行某些动态处理，for 循环或者 reduce 可能更加灵活。