async和await是es7(一种javascript语言标准)引入的新特性,是为异步编程而设计的,是对es6中异步编程的一种升级完善。
需要说明的是await必须在async声明的函数里使用。
async声明的函数,会自动返回一个promise对象
那么就不需要你new promise就可以获得一个对象了,那么有promise自然也有then,看下面代码:
async function test()
{
console.log('1');
console.log('2');
}
test().then(()=>{
console.log('then');
}
)
结果:
如果你将test函数前的async去掉,那么是添加不了的then的。因为它返回的不是一个promise对象。
注意,如果你在异步函数使用了return 自定义返回,javascript还是会把它包装成一个promise,
如下:
async function test()
{
console.log('1');
console.log('2');
return '执行成功';
}
var prom1=test(); //获得promise对象
prom1.then((rs)=>{ //then添加
console.log('then'+rs);}
)
console.log(prom1);
结果:
注意这句 console.log('then'+rs);} 是在then的回调函数里,异步的,所以它在最后面执行。这里只是变个花样用async创造了一个promise,它们的性质是一样的。
await等待异步代码完成,阻塞当前程序。
由于await是配合promise使用的,等待promise的状态(由pending变为resolved或rejected,并获取这个状态。所以我们得用promise的方式编写异步。
先来看一下未采用await的异步。
//pc为promise构造函数的参数
function pc(resolve, reject){
setTimeout(()=>{
console.log('5秒后执行输出')
resolve('执行成功');
},5000)
}
function app(){
new Promise(pc);
console.log('first');
}
app();
执行结果:
可以看到我创建一个promise,关联的函数中,然后又调用了setTimeout函数,5秒钟后执行。
这是异步的,所以不会等待,是先输出的first。
那么,我采用await后:
//pc为promise构造函数的参数
function pc(resolve, reject){
setTimeout(()=>{
console.log('5秒后执行输出')
resolve('执行成功');
},5000)
}
async function app(){
var res=await new Promise(pc);
console.log('first:'+res);
}
app();
结果:
frist是后执行的,必须等promise里的异步完成,才能执行后面的代码。
这里的frist我还加了res参数,这个是await的返回值接收的是resolve('执行成功')的值,注意并不是promise。
(其实就上面而言用then代替await也可以实现相同的效果,将console.log('first:'+res);放到then里面)
那么知道了await是等待一个promise的状态,我们还可以单独编写一个loadPromise函数,只要有返回最终给await一个状态就行。 如下:
//pc为promise构造函数的参数
function pc(resolve, reject){
setTimeout(()=>{
console.log('5秒后执行输出')
resolve('执行成功');
},5000)
}
function loadPromise(){
return new Promise(pc);
}
async function app(){
var res=await loadPromise();
console.log('first:'+res);
}
app();
效果是一样的。