当前位置: 首页 > 科技观察

ES6新语法—Async...Await详解

时间:2023-03-14 09:37:21 科技观察

什么是asyncAsync是“异步”的意思,顾名思义,是一个与异步操作相关的关键字。异步仅在ES7中可用。大协会。使用语法:asyncfunctionname(param){param//传递给函数语句的参数名//函数体}name().then(function(res){res//异步操作返回的结果})async函数返回一个Promise对象,你可以使用then方法添加回调函数。具体示例如下:asyncfunctionshow(){return{a:12,b:15}}console.log(show())//Promise{:{…}}show().then(res=>{console.log("res",res)})什么是await?await关键字存在于async函数表达式中,用于等待Promise对象,暂停执行,异步操作完成后恢复执行async函数并返回解析后的值。如果await放在asnyc函数体之外,会报语法错误。使用语法:asnycfunctionname(){returnValue=awaitexpression;}expression是一个Promise对象或者一个需要等待的值。对于不同的表达式有两种处理方式:对于Promise对象,await会阻塞main函数的执行,等待Promise对象执行resolve后,将resolve返回值作为await表达式操作的结果,然后继续向下执行。对于非Promise对象,它可以是字符串、布尔值、数字和普通函数。await直接返回对应的值,而不是等待它的执行结果。await等待Promise对象实例如下:asyncfunctiontest1(){console.log("execute")returnnewPromise((resolve,reject)=>{setTimeout(()=>{console.log("在延迟3秒")resolve({a:'1'})},3000)})}asyncfunctiontest2(){letx=awaittest1()console.log("x",x)//{a:"1"}returnx}测试2()。then(function(res){console.log("res",res)//{a:"1"}})await和常用函数示例如下:functiontest3(){console.log("commonfunction")}asyncfunctiontest4(){awaittest3()console.log("DirectExecution")}test4()捕获异常。上面的await之后是Promise对象。我们知道Promise有两种状态,resolved()和rejected()。如果Promise对象变为rejected,将如何处理?functiontestAwait(){returnPromise.reject("error");}asyncfunctiontest1(){awaittestAwait();console.log("test1");//不打印}test1().then(v=>{console.log(v);}).catch(e=>{console.log(e);//"error"})从上面例子的执行结果来看,发现返回的reject状态被外层的catch捕获,然后终止后续执行。但在某些情况下,即使出现问题,我们继续执行而不是中断。这时候我们使用try...catch来捕捉内部异常。functiontest1(){returnnewPromise((resolve,reject)=>{reject("error")})}asyncfunctiontest2(){try{awaittest1()}catch(e){console.log("error",e)}}test2().then((res)=>{console.log("执行成功",res)//打印:执行成功undefined}).catch(err=>{console.log('err',err)})Generator和async的比较:async使用await阻塞原理来代替Generator的yield。与Generator相比,async不需要run进程函数,完美的实现了异步进程。从Promise到Generator,再到async,异步编程的解决方案越来越完善,这就是ES6不断发展的魅力所在。