async 和 await 是 ES2016 新增的两个关键字，它们借鉴了 ES2015 中生成器在实际开发中的应用，目的是简化 Promise api 的使用，并非是替代 Promise 。

async

目的是简化在函数中对 Promise 的创建。

async 用于修饰函数（无论是函数字面量还是函数表达式），放置在函数最开始的位置，被修饰函数的返回结果一定是 Promise 对象。

async function test1() {
    console.log(1);
    return 2;
}

const pro = test1();
console.log(pro);

// 等效于
function test() {
    return new Promise((resolve, reject) => {
        console.log(1);
        resolve(2);
    })
}

const pro1 = test();
console.log(pro1);

await

await关键字必须出现在async函数中。

await 用在某个表达式之前，如果表达式是一个 Promise，则得到的是thenable中的状态数据。

async function test1() {
    console.log(1);
    return 2;
}

async function test2() {
    const result = await test1();
    console.log(result); // 2
}
test2();

等效于：

function test3() {
    return new Promise((resolve, reject) => {
        console.log(111);
        resolve(2);
    })
}

async function test4() {
    return new Promise((resolve, reject) => {
        test3().then(data => {
            const result = data;
            console.log("test3", result); // test3  2
            resolve();
        })
    })
}
test4();

例子1：

<script src="./封装ajax/ajax.js"></script>
<script>
    async function getTeacher() {
        const stus = await ajax({
            url: "./回调地狱问题/json/students.json"
        })
        let cid;
        for(let i = 0; i < stus.length; i ++) {
            if(stus[i].name === "李") {
                cid = stus[i].classId;
            }
        }

        const cls = await ajax({
            url: "./回调地狱问题/json/classes.json"
        })
        let tid;
        for(let i = 0; i < cls.length; i ++) {
            if(cls[i].id === cid) {
                tid = cls[i].teacherId;
            }
        }

        const ts = await ajax({
            url: "./回调地狱问题/json/teachers.json"
        })
        // let tid;
        for(let i = 0; i < ts.length; i ++) {
            if(ts[i].id === tid) {
                console.log(ts[i]);
            }
        }
        console.log(stus, cid, tid)
    }

    getTeacher();
    console.log(123);
</script>

例子2：

function biaobai(god) {
    return new Promise(resolve => {
        console.log(`张三向${god}，发出了表白短信`);

        setTimeout(() => {
            if (Math.random() < 0.3) {
                // 同意
                resolve(true);
            } else {
                resolve(false);
            }
        }, 500)
    })
}

async function biaobaiAll() {
    const gods = ["女神1", "女神2", "女神3", "女神4"];
    for(let i = 0; i < gods.length; i ++) {
        const g = gods[i];
        // 当前循环等待的 Promise 没有 resolve，下一次循环不运行
        const result = await biaobai(g);

        if(result) {
            console.log(`${g}同意了，不用再表白了`);
            break;
        }else{
            console.log(`${g}没有同意。`);
        }
    }
}

biaobaiAll();

如果 await 的表达式不是 Promise ，则会将其使用 Promise.resolve 包装后按照规则运行。

async function test() {
    const result = await 1;
    console.log(result);
}
test();

// 等价于
function test1() {
    return new Promise((resolve, reject) => {
        Promise.resolve(3).then(data => {
            const result = data;
            console.log(result);
        })
    })
}
test1();

console.log(233);

async function getPromise() {
    if(Math.random() < 0.5) {
        return 1;
    }else{
        throw 2;
    }
}

async function test() {
    try {
        const result = await getPromise();
        console.log("正常状态",result);
    }catch (err) {
        console.log("错误状态", err);
    }
}

test();

模拟setTimeout

function delay(duration) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve();
        },duration);
    })
}

async function biaobai(god) {
    console.log(`向${god}表白`);
    await delay(500);
    // if(Math.random() < 0.3) {
    //     return true;
    // }else{
    //     return false;
    // }
    return Math.random() < 0.3;
}

async function biaobaiAll() {
    const gods = ["女神1", "女神2", "女神3", "女神4"];
    for(let i = 0; i < gods.length; i ++) {
        const g = gods[i];
        // 当前循环等待的 Promise 没有 resolve，下一次循环不运行
        const result = await biaobai(g);

        if(result) {
            console.log(`${g}同意了，不用再表白了`);
            break;
        }else{
            console.log(`${g}没有同意。`);
        }
    }
}

biaobaiAll();