ES6 -- async 和 await 关键字

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：

例子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();