typescript 按顺序加载数据

TypeScript 中按顺序加载数据通常涉及到异步数据处理，特别是在处理网络请求或文件读取这类耗时的操作时。为了保持代码的顺序执行和用户体验，我们可以使用 Promise 的链式调用或者 async/await 结构来保证数据的按需加载。以下是几种常见的实现方式：

1. **使用 Promise.all 和 Array.prototype.map**：

async function loadSequentialData(urls: string[]): Promise<void> {
  const promises = urls.map(async (url) => {
    try {
      const data = await fetch(url); // 使用 fetch 或者 axios 等库
      // 处理数据
      console.log(`Loaded data from ${url}`);
    } catch (error) {
      console.error(`Failed to load data from ${url}`, error);
    }
  });
  await Promise.all(promises);
}

2. **使用 async 函数和 for-of 循环**：

async function loadSequentialData(urls: string[]) {
  for (const url of urls) {
    try {
      const data = await fetch(url);
      // 处理数据
      console.log(`Loaded data from ${url}`);
    } catch (error) {
      console.error(`Failed to load data from ${url}`, error);
    }
  }
}

3. **Promise 水平展开**（适用于单个请求的异步操作）：

async function loadSequentialData(urls: string[]): Promise<void> {
  for (const url of urls) {
    await new Promise((resolve) => {
      fetch(url).then((response) => {
        // 处理数据
        console.log(`Loaded data from ${url}`);
        resolve(); // 解决当前 promise，继续下一个
      }).catch((error) => {
        console.error(`Failed to load data from ${url}`, error);
      });
    });
  }
}