js async/await的用法

第一种情况 没有async/await

var a = 1;

function c(a) {
    console.log('c方法',a);
}
 function b() {
    return new Promise((resolve, reject) => {
        console.log('b方法',a);
        resolve(a); // 同步操作完成后调用 resolve
    });
}

 function d() {
     b().then(res => {
        console.log('d方法str:',res);
         for (let i = 0; i < 100000000; i++) {
             a += 1;
         }
         console.log('d方法end: ',a);
     });
    c(a);
}

d();
c(a);

结果为:

b方法 1
c方法 1
c方法 1
d方法str: 1
d方法end:  100000001

分析

1、首先调用了d函数，进入d函数后接着调用了b函数
2、在执行了b函数后，直接执行了d函数内和外的两个c方法
3、最后执行了b函数的回调方法，也就是d函数逻辑代码
也就是说d函数的逻辑代码是异步执行的

第二种 有async/await

var a = 1;

function c(a) {
    console.log('c方法',a);
}
 function b() {
    return new Promise((resolve, reject) => {
        console.log('b方法',a);
        resolve(a); // 同步操作完成后调用 resolve
    });
}

 async function d() {
    await b().then(res => {
        console.log('d方法str:',res);
         for (let i = 0; i < 100000000; i++) {
             a += 1;
         }
         console.log('d方法end: ',a);
     });
     console.log('d方法的c方法: ');
     c(a);
}

d();
c(a);

结果为：

b方法 1        
c方法 1
d方法str: 1
d方法end:  100000001
d方法的c方法:
c方法 100000001

分析

1、首先执行d方法，然后执行b方法代码逻辑
2、然后程序发现是一个promise异步执行，d方法外的c方法
3、由于使用async和awite关键字意味着d方法内的执行顺序是同步的，所有先执行了b方法的回调函数也就是d方法的代码逻辑
4、最后执行d方法内部的c方法