站長(zhǎng)資訊網(wǎng)
屬于，async是es6的新特性，用于表明程序里面可能有異步過(guò)程。用async關(guān)鍵字聲明的函數(shù)返回的是一個(gè)Promise對(duì)象，如果在函數(shù)中return一個(gè)直接量，async會(huì)把這個(gè)直接量通過(guò)Promise.resolve()封裝成Promise對(duì)象；當(dāng)async函數(shù)沒(méi)有返回值時(shí)，返回“Promise.resolve(undefined)”。
前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用
本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
ES6新特性 async和await關(guān)鍵字
1、初步了解
我們先從字面意思來(lái)理解這兩個(gè)關(guān)鍵字，async是asynchronous（異步）的簡(jiǎn)寫，而await可以認(rèn)為是async wait的簡(jiǎn)寫。所以async可以理解為用于聲明一個(gè)函數(shù)是異步的，而await用于等待一個(gè)異步任務(wù)執(zhí)行完成。
async和await關(guān)鍵字讓我們可以用一種更簡(jiǎn)潔的方式寫出基于promise的異步行為，而無(wú)需刻意地鏈?zhǔn)秸{(diào)用promise。
接下來(lái)我們通過(guò)先幾個(gè)例子，初步了解一下async和await的作用。
知識(shí)點(diǎn)1： 用 async 關(guān)鍵字聲明的函數(shù)返回的是一個(gè) Promise 對(duì)象。如果在函數(shù)中 return 一個(gè)直接量，async 會(huì)把這個(gè)直接量通過(guò) Promise.resolve() 封裝成 Promise 對(duì)象。當(dāng) async 函數(shù)沒(méi)有返回值時(shí)，返回 Promise.resolve(undefined)
//定義一個(gè)普通函數(shù)，返回一個(gè)字符串 function test() { return "hello async"; } const result1 = test(); console.log(result1); //輸出一個(gè)字符串 hello async //定義一個(gè)使用了async修飾的函數(shù)，同樣返回一個(gè)字符串 async function testAsync() { return "hello async"; } const result2 = testAsync(); console.log(result2); //輸出一個(gè)Promise對(duì)象 Promise {<fulfilled>: 'hello async'}
//async較好的用法 async function testAsync(){ //返回一個(gè)Promise對(duì)象 return new Promise((resolve, reject)=>{ //處理異步任務(wù) setTimeout(function () { resolve("testAsync") }, 1000); }) } //async通常用于聲明一個(gè)處理異步任務(wù)且返回了Promise對(duì)象的函數(shù)
知識(shí)點(diǎn)2： await關(guān)鍵字只能使用在被async聲明的函數(shù)內(nèi)，用于修飾一個(gè)Promise對(duì)象，使得該P(yáng)romise對(duì)象處理的異步任務(wù)在當(dāng)前協(xié)程上按順序同步執(zhí)行。
//定義一個(gè)使用async修飾的函數(shù)，處理異步任務(wù) async function testAsync(){ return new Promise((resolve, reject)=>{ setTimeout(function () { resolve("testAsync") }, 1000); }) }
//定義一個(gè)函數(shù)，直接調(diào)用testAsync函數(shù) function testAwait(){ console.log('testAsync調(diào)用前') testAsync().then(res=>{ console.log(res) //輸出"testAsync" }) console.log('testAsync調(diào)用后') } /***** 輸出如下 *****/ testAsync調(diào)用前 testAsync調(diào)用后 testAsync //盡管代碼按順序?qū)?，但不按順序?zhí)行，因?yàn)閠estAsync()是異步函數(shù)
//定義一個(gè)函數(shù)（不使用async聲明該函數(shù)）用await修飾調(diào)用testAsync函數(shù) function testAwait(){ console.log('testAsync調(diào)用前') await testAsync().then(res=>{ //使用await關(guān)鍵字修飾 console.log(res) }) console.log('testAsync調(diào)用后') } //調(diào)用testAwait()函數(shù) testAwait() //報(bào)錯(cuò)：Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules，因?yàn)閍wait只能使用在被async修飾的函數(shù)內(nèi)。
//定義一個(gè)函數(shù)（使用async聲明該函數(shù)）用await修飾調(diào)用testAsync函數(shù) async function testAwait(){ console.log('testAsync調(diào)用前') await testAsync().then(res=>{ console.log(res) }) console.log('testAsync調(diào)用后') } /***** 輸出如下 *****/ testAsync調(diào)用前 testAsync testAsync調(diào)用后 //使用了await關(guān)鍵字修飾，使得代碼按照順序執(zhí)行，即同步執(zhí)行
2、async關(guān)鍵字
（1）用于表明程序里面可能有異步過(guò)程
（2）async函數(shù)返回值的類型為Promise對(duì)象： 這是和普通函數(shù)本質(zhì)上不同的地方，也是使用時(shí)重點(diǎn)注意的地方；
- return newPromise( )，這個(gè)用法符合async函數(shù)本意；
- return data，特別注意到是這樣子寫相當(dāng)于Promise.resolve(data)，返回的data被封裝成一個(gè)Promise對(duì)象，但是在調(diào)用async函數(shù)的地方通過(guò)簡(jiǎn)單的=是拿不到這個(gè)返回值data的，因?yàn)榉祷刂凳且粋€(gè)Promise對(duì)象，所以需要用.then(data => { })方式才可以拿到這個(gè)data；
- 如果沒(méi)有返回值，相當(dāng)于返回了Promise.resolve(undefined)；
（3）無(wú)等待，非阻塞：使用async關(guān)鍵字聲明的函數(shù)里面如果有異步過(guò)程可能會(huì)等待，但是函數(shù)本身會(huì)馬上返回，不會(huì)阻塞當(dāng)前主線程。如果在函數(shù)里面使用了await關(guān)鍵字修飾的異步過(guò)程，其工作在相應(yīng)的協(xié)程上，會(huì)阻塞等待異步任務(wù)的完成再返回。
//定義一個(gè)函數(shù)，處理異步任務(wù)（使用定時(shí)器模擬），返回一個(gè)Promise對(duì)象 async function testAsync(){ return new Promise((resolve, reject) => { setTimeout(function () { resolve("成功調(diào)用testAsync") }, 1000); }); } //定義一個(gè)函數(shù)，使用await關(guān)鍵字修飾調(diào)用testAsync()函數(shù) async function testAwait(){ //使用了await關(guān)鍵字修飾調(diào)用testAsyn()函數(shù) await this.testAsync().then(res=>{ console.log(res) //輸出的是testAsync()函數(shù)resolve的值 }); console.log("helloAsync"); } //主線程 console.log('testAwait調(diào)用前') testAwait(); console.log('testAwait調(diào)用后') /***** 輸出結(jié)果如下 *****/ testAwait調(diào)用前 testAwait調(diào)用后 //因?yàn)閠estAwait()函數(shù)使用了async關(guān)鍵字修飾，所以不會(huì)阻塞主線程的執(zhí)行，所以這兩句話會(huì)先直接輸出，然后再執(zhí)行testAwait()函數(shù) 成功調(diào)用testAsync //因?yàn)閠estAwait()函數(shù)在內(nèi)部調(diào)用testAsync()函數(shù)時(shí)使用了await關(guān)鍵字修飾，所以在對(duì)應(yīng)的協(xié)程上會(huì)阻塞，等待testAsync()函數(shù)執(zhí)行完，再輸出下面那句'helloAsync' helloAsync
3、await關(guān)鍵字
（1）await只能在async函數(shù)內(nèi)部使用：不能放在普通函數(shù)里面，否則會(huì)報(bào)錯(cuò)。
（2）await關(guān)鍵字后面跟的是一個(gè)Promise對(duì)象。如果跟的是一個(gè)函數(shù)，則這個(gè)函數(shù)應(yīng)當(dāng)返回一個(gè)Promise對(duì)象。如果跟的是非Promise對(duì)象，則會(huì)通過(guò)Promise.resolve( )函數(shù)自動(dòng)將這個(gè)東西包裝成一個(gè)Promise對(duì)象并置于fulfilled狀態(tài)。
//例如： const a = await 'Hello Await' // 相當(dāng)于 const a = await Promise.resolve('Hello Await'); console.log(a) //輸出 'Hello Await'
（3）await的本質(zhì)是等待它所修飾的Promise對(duì)象的fulfilled狀態(tài)，并把resolve(data)的數(shù)據(jù)data返回。
意思是，如果await后面跟的是一個(gè) Promise 對(duì)象，await 就會(huì)阻塞后面的代碼，等著 Promise 對(duì)象 resolve，然后得到 resolve 的值，作為 await 表達(dá)式的運(yùn)算結(jié)果。
async function testAsync(){ return new Promise((resolve, reject) => { setTimeout(function () { resolve("成功調(diào)用testAsync") }, 1000); }); } const a = await testAsync() //這里的a就會(huì)拿到testAsync函數(shù)resolve的數(shù)據(jù) console.log(a) //在一秒后輸出'成功調(diào)用testAsync'
（4）await并不關(guān)心它所修飾的Promise對(duì)象的rejected狀態(tài)，即reject(data)的數(shù)據(jù)data并不會(huì)被await處理，所以建議通過(guò)Promise對(duì)象調(diào)用catch去捕獲。
async testAwait(){ //變量a用于接收testAsync()函數(shù)resolve的數(shù)據(jù) let a = await testAsync().catch(err=>{ //處理異常和reject的數(shù)據(jù) }) }
4、深入講解async和await
（1）執(zhí)行順序
//定義一個(gè)函數(shù)，該函數(shù)接收一個(gè)參數(shù)，1s后再返回參數(shù)的兩倍 async function double(num) { return new Promise((resolve, reject) => { setTimeout(() => { //使用定時(shí)器模擬異步任務(wù) resolve(2 * num) //將運(yùn)算結(jié)果交給resolve }, 1000); }) } async function getResult () { console.log('double調(diào)用前') //順序：2 let result = await double(10); //將10作為參數(shù)傳遞給double函數(shù) //result變量用于接收double()函數(shù)resolve的值 console.log(result); //順序：4 console.log('double調(diào)用后') //順序：4 } console.log('getResult調(diào)用前') //順序：1 getResult(); console.log('getResult調(diào)用后') //順序：3 /***** 依次輸出如下 *****/ getResult調(diào)用前 double調(diào)用前 getResult調(diào)用后 20 //1s后輸出 double調(diào)用后
①首先打印輸出getResult調(diào)用前，同步代碼，順序執(zhí)行；
②然后調(diào)用方法getResult( )，打印輸出double調(diào)用前，同步代碼，順序執(zhí)行；
③再調(diào)用異步方法double( )
如果此處沒(méi)有使用await關(guān)鍵字修飾，則依次輸出的是：getResult調(diào)用前、double調(diào)用前、double調(diào)用后、getResult調(diào)用后、1s后輸出20
因?yàn)楫惒讲僮鞑粫?huì)影響其他代碼的執(zhí)行，所以會(huì)將其他代碼按順序執(zhí)行完，最后再執(zhí)行double函數(shù)
因?yàn)檫@里使用了await關(guān)鍵字，所以getResult( )的代碼執(zhí)行到這里就會(huì)被阻塞，等到double函數(shù)resolve了，再往下執(zhí)行
④盡管getResult函數(shù)內(nèi)部被await阻塞了，由于getResult函數(shù)本身也是個(gè)async函數(shù)，所以它不會(huì)影響getResult函數(shù)外面的代碼執(zhí)行。因?yàn)檎{(diào)用async函數(shù)不會(huì)造成阻塞，它內(nèi)部的所有阻塞都被封裝在一個(gè)Promise對(duì)象中異步執(zhí)行。
⑤所以在調(diào)用getResult函數(shù)后，會(huì)繼續(xù)向下執(zhí)行，即打印輸出getResult調(diào)用后
⑥當(dāng)1s之后，異步函數(shù)double執(zhí)行完成，將結(jié)果交給resolve。
⑦通過(guò)await關(guān)鍵字接收到double函數(shù)resolve的值，賦值給result變量。打印輸出20
⑧因?yàn)槭褂昧薬wait阻塞將異步變?yōu)橥?，所以在打印輸?0后再打印輸出double調(diào)用后
（2）處理reject回調(diào)
//方法一：通過(guò)promise對(duì)象的catch進(jìn)行捕獲 function a(){ return new Promise((resolve,reject) => { setTimeout(() => { reject("something") }, 1000) }) } async function b(){ let r = await a().catch((err)=>{ console.log(err) }) }
//方法二：通過(guò)try/catch語(yǔ)句處理 function a(){ return new Promise((resolve,reject) => { setTimeout(() => { reject("something") }, 1000) }) } async function b(){ let r = null try{ r = await a() }catch(err){ console.log(err) } }
（3）使用await優(yōu)化Promise對(duì)象的回調(diào)地獄問(wèn)題
在Promise章節(jié)中我們通過(guò)了Promise對(duì)象的then( )方法鏈?zhǔn)秸{(diào)用解決了回調(diào)地獄問(wèn)題，但看起來(lái)仍然不夠美觀，我們可以通過(guò)await優(yōu)化一下，讓它看起來(lái)更符合我們平時(shí)代碼的編寫習(xí)慣。
//原本的解決方案 //第二個(gè)請(qǐng)求依賴于第一個(gè)請(qǐng)求的返回值，第三個(gè)請(qǐng)求依賴于第二個(gè)請(qǐng)求的返回值 request1().then(function(data){ return request2(data) }).then(function(data){ return request3(data) }) //這里只發(fā)送了三次請(qǐng)求，代碼看起來(lái)還不錯(cuò)，雖然它已經(jīng)比普通的回調(diào)函數(shù)形式好了很多。 //那如果需要發(fā)送五次或十次請(qǐng)求呢？代碼也許會(huì)沒(méi)那么美觀，接下來(lái)我們使用學(xué)習(xí)到的await去解決這個(gè)問(wèn)題。
原本的要求是每個(gè)請(qǐng)求都依賴于上一個(gè)請(qǐng)求的返回值，那么是不是得等一個(gè)請(qǐng)求完，才能發(fā)送下一個(gè)請(qǐng)求？這時(shí)我們可以思考一下，await的作用是什么？是不是對(duì)一個(gè)Promise對(duì)象去進(jìn)行阻塞，使其狀態(tài)變?yōu)閒ulfilled后獲取resolve的值。這不就正是我們所需要的。
//使用await的解決方案 var res1 = await request1() //將request1的返回值賦值給res1 var res2 = await request2(res1) //將res1作為參數(shù)傳給request2，并將request2的返回值賦值給res2 var res3 = await request3(res2) //同理 //這樣子寫的代碼更加的美觀，并且更符合我們平時(shí)編寫代碼的習(xí)慣
【
