异步循环 vue async await promise

项目中遇到要异步循环实现的地方，写了个例子记录下。

<script setup>
  const arr = [1, 2, 3, 4];
  const doConsole = (data) => {
    return new Promise((resolve) => {
      setTimeout(function() {
        console.log("输出："+ data)
        resolve("")
      }, 2000)
    })
  }
  const docycle = async () => {
    for( let i = 0; i< arr.length; i++){
      await doConsole(arr[i])
    }
  }
  
  const func = async () => {
  console.log("开始输出")
  await docycle()
  console.log("完成输出")
  }
func()
  
</script>

第一次用到async和await，不知道写的代码合不合适。
之后又看了下代码，发现async和await可能不是很适合我所要实现的效果。
async和await异步循环会同步执行，比较慢，但很多时候实际应用是异步循环全部完成执行后续代码，不需要异步变为同步。

const arr = [1, 2, 3, 4];
const doConsole = (data) => {
  return new Promise((resolve) => {
    setTimeout(function () {
      console.log("输出：" + data);
      resolve("");
    }, (4-data)*1000);
  });
};
const docycle = async () => {
  await new Promise((resolve) => {
    const promises = [];
    for (let i = 0; i < arr.length; i++) {
      promises.push(doConsole(arr[i]));
    }
    Promise.all(promises).then(() => {
      resolve();
    });
  });
};

const func = async () => {
  console.log("开始输出");
  await docycle();
  console.log("完成输出");
};
func();

输出结果

如果有其他更好的方式，希望能够留言告知，谢谢。