vue3中用js的async await执行顺序问题？

Question

有三个函数：

const one=asycn()=>{
    await xxx(()=>{
        执行代码，有接口请求，请求时间不确定
    })
}
const two=asycn()=>{
    await yyy(()=>{
        执行代码，有接口请求，请求时间不确定
    })
}
const three=asycn()=>{
    await zzz(()=>{
        执行代码，有接口请求，请求时间不确定
    })
}

我需要在onMounted中运行他们，并按照one,two,three顺序执行，必须是前一个执行完再执行后一个。下面的写法对吗？

onMounted(async ()=>{
  await  one()
  await  two()
  await  three()
})

Answer 1

const one = () => {
    return new Promise((res) => {
       setTimeout(() => {
        console.log('one');
         res()
       }, 2000);
    })
}
const two = () => {
    return new Promise((res) => {
       setTimeout(() => {
        console.log('two');
         res()
       }, 1000);
    })
}
const three = () => {
    return new Promise((res) => {
       setTimeout(() => {
        console.log('three');
         res()
       }, 1500);
    })
}
const runFun = async() => {
    await one()
    await two()
    await three()
}
runFun()

Answer 2

三个方法只管执行吗，一般这种要求都要执行的会存在依附关系，比如需要上一个的某个值，这种情况直接串行比较好,错误处理也方便

const one = () => {
    return new Promise((res) => {
       setTimeout(() => {
        console.log('one');
         res()
       }, 2000);
    })
}
const two = () => {
    return new Promise((res) => {
       setTimeout(() => {
        console.log('two');
         res()
       }, 1000);
    })
}
const three = () => {
    return new Promise((res) => {
       setTimeout(() => {
        console.log('three');
         res()
       }, 1500);
    })
}

one().then(()=>{
    return two()
}).then(()=>{
    retuen three()
}).then(()=>{

}).catch(err=>{})