Promise第三篇：async和await关键字

在此之前的两篇文章已经把Promise的用法交代清楚了，Promise确实很好的解决了回调地狱等异步处理出现的问题，提高了代码的阅读性，但是在代码形式上较为复杂，还有很多回调的感觉，不易于阅读和理解。因此ES6还新增了async和await两个关键字，作为简化Promise API的方法，注意，只是简化，而并不是代替Promise

目录

1.async

2.await

---

1.async

1）用法

async用于修饰函数（无论是函数字面量还是函数表达式），放置在函数声明前位置，被修饰函数的返回结果一定是Promise对象，其目的在于简化函数的返回值中的Promise的创建。

2）示例

【例1】

async function test() {
    console.log(1);
    return 5;
}
const pro = test();
console.log(pro);

 该段代码相当于

function test() {
    return new Promise((resolve,reject)=>{
        console.log(1);
        resolve(5)
    })
}
const pro = test();
console.log(pro);

相比较之下，我们可以看出来async更加方便简洁，两段代码的打印结果均如图1

图1

2.await

1）用法

await用在某个表达式之前，如果表达式是一个Promise，则得到的是thenable中的状态数据【例2-1】；如果表达式不是Promise，则会将其使用Promise.resolve包装后按照规则进行运行【例2-2】

2）示例

【例2-1】

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

该段代码相当于

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

function test2() {
    return new Promise((resolve, reject) => {
        test1().then(resp => {
            const result = resp
            console.log(result);
        })
    })
}
test2()

【结果】

图2-1

【例2-2】

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

该段代码相当于

function test() {
    return new Promise((resolve,reject)=>{
        Promise.resolve(1).then(data=>{
            const result = data;
            console.log(result);
            resolve();
        })
    })
}
test();
console.log(124);

【结果】

图2-2

【例2-3】以上的例子都是resolve状态，接下类康康reject状态怎么处理

async function getPromise() {
    if (Math.random()> 0.5) {
        return 1;
    } else {
        throw 2;
    }
}
async function test(){
    try {
        const result = await getPromise();
        console.log('success',result);
    } catch (err) {
        console.log('error',err)
    }
}
test();

 【结果】如果事件推向resolved状态，则运行try中的代码，打印结果如图2-3-1；如果事件推向rejected状态，则运行catch中的代码，打印结果如图2-3-2

图2-3-1

图2-3-1