什么是async

async的意思是“異步”，顧名思義就是有關(guān)異步操作的關(guān)鍵字，async 是 ES7 才有的，與我們之前說的Promise、Generator有很大的關(guān)聯(lián)。

使用語法：

async function name(param){  param //傳遞給函數(shù)的參數(shù)名稱  statements //函數(shù)體}name().then(function(res){  res//異步操作返回的結(jié)果})

async 函數(shù)返回一個(gè)Promise對(duì)象，可以使用then方法添加回調(diào)函數(shù)。具體實(shí)例如下：

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

什么是await

await關(guān)鍵字存在async函數(shù)表達(dá)式中，用于等待Promise對(duì)象，暫停執(zhí)行，等到異步操作完成后，恢復(fù)async函數(shù)的執(zhí)行并返回解析值。如果把a(bǔ)wait放在asnyc函數(shù)體外，會(huì)報(bào)語法錯(cuò)誤。

使用語法：

asnyc function name(){  returnValue = await expression;}

expression 是一個(gè)Promise對(duì)象或一個(gè)需要等待的值，針對(duì)所跟不同表達(dá)式，有兩種處理方式：

對(duì)于Promise對(duì)象，await會(huì)阻塞主函數(shù)執(zhí)行，等待Promise對(duì)象執(zhí)行resolve之后，resolve返回值作為await表達(dá)式運(yùn)算結(jié)果，然后繼續(xù)向下執(zhí)行。

對(duì)于非Promise對(duì)象，可以是字符串、布爾值、數(shù)值以及普通函數(shù)等。await直接返回對(duì)應(yīng)的值，而不是等待其執(zhí)行結(jié)果。

await等待Promise對(duì)象實(shí)例如下：

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ù) 實(shí)例如下：

function test3(){ console.log("普通函數(shù)")}async function test4(){ await test3() console.log("直接執(zhí)行")}test4()

捕獲異常

上述的await后跟Promise對(duì)象，我們知道Promise有兩種狀態(tài)，resolved() 和 rejected() ，如果Promise對(duì)象變?yōu)閞ejected,會(huì)如何處理？

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"})

從上實(shí)例執(zhí)行結(jié)果發(fā)現(xiàn)，返回的reject狀態(tài)被外層的catch捕獲，然后終止了后面的執(zhí)行。但是在有些情況下，即使出錯(cuò)了我們還是繼續(xù)執(zhí)行，而不是中斷，此時(shí)我們借助try...catch捕獲內(nèi)部異常。

function test1(){ return new Promise((resolve,reject)=>{ reject("error") })}async function test2(){ try{  await test1() }catch(e){  console.log("報(bào)錯(cuò)",e) }}test2().then((res)=>{ console.log("執(zhí)行成功",res) // 打?。簣?zhí)行成功undefined}).catch(err=>{ console.log('err',err)})

Generator與async對(duì)比：

• async利用await阻塞原理，代替了Generator的 yield 。

• async 相比Generator 不需要 run 流程函數(shù)，完美地實(shí)現(xiàn)了異步流程。

從 Promise 到 Generator , 再到 async ,對(duì)于異步編程的解決方案越來越完美，這就是ES6不斷發(fā)展的魅力所在。

感謝你的閱讀！

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)