乐趣区

关于async-await:ES6新增语法七asyncawait

什么是 async

async 的意思是“异步”,顾名思义就是无关异步操作的关键字,async 是 ES7 才有的,与咱们之前说的 Promise、Generator 有很大的关联。

应用语法:

async function name(param){

param // 传递给函数的参数名称

statements // 函数体

}

name().then(function(res){

res// 异步操作返回的后果

})

async 函数返回一个 Promise 对象,能够应用 then 办法增加回调函数。具体实例如下:

async function show(){return {a:12,b:15}
}
console.log(show())//Promise {<fulfilled>: {…}}
show().then(res=>{console.log("res",res)
})

什么是 await

await 关键字存在 async 函数表达式中,用于期待 Promise 对象,暂停执行,等到异步操作实现后,复原 async 函数的执行并返回解析值。如果把 await 放在 asnyc 函数体外,会报语法错误。

应用语法:

asnyc function name(){

returnValue = await expression;

}

expression 是一个 Promise 对象或一个须要期待的值,针对所跟不同表达式,有两种解决形式:

对于 Promise 对象,await 会阻塞主函数执行,期待 Promise 对象执行 resolve 之后,resolve 返回值作为 await 表达式运算后果,而后持续向下执行。

对于非 Promise 对象,能够是字符串、布尔值、数值以及一般函数等。await 间接返回对应的值,而不是期待其执行后果。

await 期待 Promise 对象实例如下:


async function test1(){console.log("执行")
 return new Promise((resolve,reject)=>{setTimeout(()=>{console.log("提早 3 秒之后返回胜利")
   resolve({a:'1'})
  },3000)
 })  
}
async function test2(){let x = await test1()
 console.log("x",x)//{a: "1"}
 return x
}
test2().then(function(res){console.log("res",res)//{a: "1"}
})

await 跟 一般函数 实例如下:

function test3(){console.log("一般函数")
}
async function test4(){await test3()
 console.log("间接执行")
}
test4()

捕捉异样

上述的 await 后跟 Promise 对象,咱们晓得 Promise 有两种状态,resolved() 和 rejected(),如果 Promise 对象变为 rejected, 会如何解决?

function testAwait(){return Promise.reject("error");
}
async function test1(){await testAwait();
 console.log("test1");// 没有打印
}
test1().then(v=>{console.log(v);
}).catch(e=>{console.log(e);//"error"
})

从上实例执行后果发现,返回的 reject 状态被外层的 catch 捕捉,而后终止了前面的执行。然而在有些状况下,即便出错了咱们还是继续执行,而不是中断,此时咱们借助 try…catch 捕捉外部异样。

function test1(){return new Promise((resolve,reject)=>{reject("error")
 })
}
async function test2(){
 try{await test1()
 }catch(e){console.log("报错",e)
 }
}
test2().then((res)=>{console.log("执行胜利",res) // 打印:执行胜利 undefined
}).catch(err=>{console.log('err',err)
})

Generator 与 async 比照:

  • async 利用 await 阻塞原理,代替了 Generator 的 yield。
  • async 相比 Generator 不须要 run 流程函数,完满地实现了异步流程。

从 Promise 到 Generator , 再到 async , 对于异步编程的解决方案越来越完满,这就是 ES6 一直倒退的魅力所在。

退出移动版