建站
咨詢
售后
建站咨詢
新聞中心
[[418157]]
什么是async
async的意思是“異步”，顧名思義就是有關(guān)異步操作的關(guān)鍵字，async 是 ES7 才有的，與我們之前說的Promise、Generator有很大的關(guān)聯(lián)。
成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供東昌府企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計、做網(wǎng)站、HTML5建站、小程序制作等業(yè)務(wù)。10年已為東昌府眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進行中。
使用語法：
- async function name(param){
- param //傳遞給函數(shù)的參數(shù)名稱
- statements //函數(shù)體
- }
- name().then(function(res){
- res//異步操作返回的結(jié)果
- })
async 函數(shù)返回一個Promise對象，可以使用then方法添加回調(diào)函數(shù)。具體實例如下：
- async function show(){
- return {a:12,b:15}
- }
- console.log(show())//Promise {
: {…}} - show().then(res=>{
- console.log("res",res)
- })
什么是await
await關(guān)鍵字存在async函數(shù)表達式中，用于等待Promise對象，暫停執(zhí)行，等到異步操作完成后，恢復async函數(shù)的執(zhí)行并返回解析值。如果把await放在asnyc函數(shù)體外，會報語法錯誤。
使用語法：
- asnyc function name(){
- returnValue = await expression;
- }
expression 是一個Promise對象或一個需要等待的值，針對所跟不同表達式，有兩種處理方式：
對于Promise對象，await會阻塞主函數(shù)執(zhí)行，等待Promise對象執(zhí)行resolve之后，resolve返回值作為await表達式運算結(jié)果，然后繼續(xù)向下執(zhí)行。
對于非Promise對象，可以是字符串、布爾值、數(shù)值以及普通函數(shù)等。await直接返回對應(yīng)的值，而不是等待其執(zhí)行結(jié)果。
await等待Promise對象實例如下：
- async function test1(){
- console.log("執(zhí)行")
- 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 跟 普通函數(shù) 實例如下：
- function test3(){
- console.log("普通函數(shù)")
- }
- async function test4(){
- await test3()
- console.log("直接執(zhí)行")
- }
- test4()
捕獲異常
上述的await后跟Promise對象，我們知道Promise有兩種狀態(tài)，resolved() 和 rejected() ，如果Promise對象變?yōu)閞ejected,會如何處理?
- 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"
- })
從上實例執(zhí)行結(jié)果發(fā)現(xiàn)，返回的reject狀態(tài)被外層的catch捕獲，然后終止了后面的執(zhí)行。但是在有些情況下，即使出錯了我們還是繼續(xù)執(zhí)行，而不是中斷，此時我們借助try...catch捕獲內(nèi)部異常。
- 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("執(zhí)行成功",res) // 打?。簣?zhí)行成功undefined
- }).catch(err=>{
- console.log('err',err)
- })
Generator與async對比：
- async利用await阻塞原理，代替了Generator的 yield 。
- async 相比Generator 不需要 run 流程函數(shù)，完美地實現(xiàn)了異步流程。
從 Promise 到 Generator , 再到 async ,對于異步編程的解決方案越來越完美，這就是ES6不斷發(fā)展的魅力所在。
網(wǎng)站名稱：ES6新增語法—Async...Await詳解
網(wǎng)站鏈接：http://fisionsoft.com.cn/article/cosccho.html
