赞
踩
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();
效果是一样的。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。