深入理解async await 异步编程同步化

我们知道JavaScript代码是顺序执行的，我们来看以下代码执行的结果

function a(){
    return new Promise((resolve,reject)=>{
        resolve("a")
    })
}
function b(){
    return new Promise((resolve,reject)=>{
      setTimeout(() => {
        resolve("b")
      }, 2000);
    })
}
function c(){
    return new Promise((resolve,reject)=>{
        resolve("c")
    })
}
 function execute(){
    let a1= a()
    a1.then(res=>{
        console.log(res);
    })
    let b1= b()
   b1.then(res=>{
    console.log(res);
   })
    let c1= c()
   c1.then(res=>{
    console.log(res);
   })
}
execute()

那么如何让它顺序显示呢，也就是C等B执行完之后再执行。如下

function a(){
    return new Promise((resolve,reject)=>{
        resolve("a")
    })
}
function b(){
    return new Promise((resolve,reject)=>{
      setTimeout(() => {
        resolve("b")
      }, 2000);
    })
}
function c(){
    return new Promise((resolve,reject)=>{
        resolve("c")
    })
}
async function execute(){
    let a1=await a()
    //用了await之后，就不用.then了直接得到结果
   console.log(a1)
    let b1=await b()
    console.log(b1)
    let c1=await c()
   console.log(c1)
}
execute()

/**
 * 传入参数 n，表示这个函数执行的时间（毫秒）
 * 执行的结果是 n + 200，这个值将用于下一步骤
 */
/**
 * 
 *  async/await 的优势在于处理 then 链
    单一的 Promise 链并不能发现 async/await 的优势，但是，如果需要处理由多个 Promise 组成的 then 链的时候，
    优势就能体现出来了（很有意思，Promise 通过 then 链来解决多层回调的问题，现在又用 async/await 来进一步优化它）。
    假设一个业务，分多个步骤完成，每个步骤都是异步的，而且依赖于上一个步骤的结果。我们仍然用 setTimeout 来模拟异步操作：
 */
function takeLongTime(n) {
    return new Promise(resolve => {
        setTimeout(() => resolve(n + 200), n);
    });
}

function step1(n) {
    console.log(`step1 with ${n}`);
    return takeLongTime(n);
}

function step2(n) {
    console.log(`step2 with ${n}`);
    return takeLongTime(n);
}

function step3(n) {
    console.log(`step3 with ${n}`);
    return takeLongTime(n);
}
function doIt() {
    console.time("doIt");
    const time1 = 300;
    step1(time1)
        .then(time2 => step2(time2))
        .then(time3 => step3(time3))
        .then(result => {
            console.log(`result is ${result}`);
            console.timeEnd("doIt");
        });
}

doIt();

// step1 with 300
// step2 with 500
// step3 with 700
// result is 900
// doIt: 1507.251ms

//以下的代码是用async和await来做的
// console.log("doItByasync");
// async function doItByasync() {
//     console.time("doIt");
//     const time1 = 300;
//     const time2 = await step1(time1);
//     const time3 = await step2(time2);
//     const result = await step3(time3);
//     console.log(`result is ${result}`);
//     console.timeEnd("doIt");
// }

// doItByasync();