vue3+ts 循环中的异步转同步

在 Vue3 中使用 TypeScript 结合异步操作时，如果需要在循环中处理数据并等待所有异步操作完成，通常会遇到“异步地狱”（async hell）的问题。为了将异步操作转化为同步，可以考虑以下几种策略：

1. 使用 `Promise.all` 或 `async/await` 遍历数组：在循环内部，你可以对每个异步任务创建一个新的 Promise，并将其放入一个数组中。然后使用 `Promise.all(array)` 来等待所有 Promise 解决，这会在所有操作都完成后返回一个新的 Promise。

async function handleAsyncArray(arr: Array<Promise<any>>) {
  const results = await Promise.all(arr);
  // 现在results包含了所有操作的结果，可以在这里进行后续处理
}

2. 利用 async iterator 或 for await...of 循环：如果你的异步操作支持迭代，可以使用 async iterator 或者 `for await...of` 来逐个处理它们。

async function processItems(items: AsyncIterable<Promise<any>>) {
  for await (const result of items) {
    // 对每个结果进行处理
  }
}

3. 如果是数组的 map、filter 等方法，Vue 提供了 `.sync` 版本，如 `.mapSync()` 和 `.filterSync()`，它们会在所有回调函数执行完后再继续执行。

data() {
  return {
    items: [...],
  };
}

methods: {
  updateItems() {
    this.items = this.items.mapSync(async (item) => {
      // 异步处理
    });
  },
}