在此之前的两篇文章已经把Promise的用法交代清楚了,Promise确实很好的解决了回调地狱等异步处理出现的问题,提高了代码的阅读性,但是在代码形式上较为复杂,还有很多回调的感觉,不易于阅读和理解。因此ES6还新增了async和await两个关键字,作为简化Promise API的方法,注意,只是简化,而并不是代替Promise
目录
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
![](https://i-blog.csdnimg.cn/blog_migrate/5e06689e710d0713fd25401bed33ed1c.png)
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()
【结果】
![](https://i-blog.csdnimg.cn/blog_migrate/2b2e0a968d77a6bdda6fda77238af82c.png)
【例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);
【结果】
![](https://i-blog.csdnimg.cn/blog_migrate/4e6d962f5db7d5c3b15bef05713e2e4b.png)
【例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
![](https://i-blog.csdnimg.cn/blog_migrate/844aac53d43390f82864fa301d7ec486.png)
![](https://i-blog.csdnimg.cn/blog_migrate/161c468279c48178f00c22364da75e1d.png)