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

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值