一、簡介

async/await是ES20717引入的，主要是簡化Promise調(diào)用操作，實(shí)現(xiàn)了以異步操作像同步的方式去執(zhí)行，async外部是異步執(zhí)行的，同步是await的作用。

二、async

async，英文意思是異步，當(dāng)函數(shù)（包括函數(shù)語句、函數(shù)表達(dá)式、Lambda表達(dá)式）前有async關(guān)鍵字的時(shí)候，并且該函數(shù)有返回值，函數(shù)執(zhí)行成功，那么該函數(shù)就會(huì)調(diào)用Promise.resove()并隱式的返回一個(gè)Promise對象；如果函數(shù)執(zhí)行失敗就會(huì)調(diào)用Promise.reject()并返回一個(gè)Promise對象。

Promise.resolve(x) 可以看作是 new Promise(resolve => resolve(x)) ，可將字面量對象或其他對象快速封裝成 Promise 實(shí)例

• async函數(shù)中如果有異步操作會(huì)進(jìn)行等待，但是async函數(shù)本身會(huì)馬上返回，不會(huì)阻塞當(dāng)前線程。async函數(shù)被調(diào)用不會(huì)阻塞界面渲染，內(nèi)部由await關(guān)鍵字修飾異步過程，會(huì)阻塞等待異步任務(wù)的完成再返回。
• 如果在函數(shù)中return一個(gè)直接量，async會(huì)把這個(gè)直接量通過Promise.resolve(直接量) 封裝成 Promise 對象 ，如果沒有返回值，相當(dāng)于返回了Promise.resolve(undefined)。
• 通過Promise回調(diào)得到async函數(shù)的返回值 ，通過Promise回調(diào)得到async函數(shù)的返回值，因?yàn)樵摵瘮?shù)返回的是Promise對象

async func(){
     return "a"
}
console.log(func())
func().then(res=>{
   console.log(res) //通過回掉獲取到 a
 }.catch(err=>{ }))

func()的返回值如下，由此可見返回的是一個(gè)Promise對象。

三、await

使用await時(shí)，一定要配合async使用 ，這樣才能使異步代碼同步化，await英文為等待，意思就是等待await后面的函數(shù)（該函數(shù)返回的是Promise對象）執(zhí)行完之后，在之后后面的代碼。

await后面也可以跟同步代碼 ，這樣做的話意義不大，增加了系統(tǒng)處理邏輯，系統(tǒng)會(huì)自動(dòng)將其轉(zhuǎn)化成一個(gè)Promsie對象。比如：

const a = await '1';
const a = await Promise.resolve('1');//跟上面效果效果相同
//await后跟同步代碼，不如不使用await,增加了代碼邏輯，沒有意義
const a = '1';

await在等返回值，后面可以是字面量或者函數(shù)表達(dá)式。如果表達(dá)式的運(yùn)算結(jié)果不是Promise對象，那么該結(jié)果就是await等的值； 如果await后是一個(gè)Promise對象，那么就會(huì)阻塞后面代碼的運(yùn)行 。但是async函數(shù)的調(diào)用并不會(huì)阻塞，它內(nèi)部所有的阻塞都封裝在Promise對象中異步執(zhí)行。

await只處理resolve(data)時(shí)的數(shù)據(jù)，不處理reject(error) ，當(dāng)異步函數(shù)體內(nèi)出錯(cuò)的時(shí)候，怎么捕獲到錯(cuò)誤信息呢?

1. 可以讓await后的函數(shù)通過catch獲取
2. 通過最外面的func函數(shù)的catch獲取
3. func函數(shù)體內(nèi)使用try…catch…，然后從catch獲取， try…catch可獲取 async 函數(shù)內(nèi)，任意 await 的錯(cuò)誤，其中一個(gè)被拒絕，便會(huì)暫停，返回錯(cuò)誤信息。

async function func(){
   const a = await asyncFunc();
}
asyncFunc().then().catch()

async function func(){
   const a = await asyncFunc();
}
func().then().catch()

async function func(){
   try(){
       const a = await asyncFunc();
   }catch(error){ }
}

四、案例

async function func(){
   console.log('a')
   const c = await 'c'
   console.log(c)
   return 'd'
}
func().then(res=>console.log(res))
console.log('b')

輸出：

先輸出a后輸出b，說明async函數(shù)執(zhí)行后會(huì)立即返回，不阻塞線程。

附-直接量/字面量

文中提到了字面量，博文在這里做下介紹。

字面量又稱之為直接量，代碼中固定值的表示方法，程序中直接使用的數(shù)據(jù)，沒進(jìn)行過封裝。可分為字符串字面量（string literal）、數(shù)組字面量（array literal）、對象字面量（object literal），函數(shù)字面量（function literal）。 一般除去函數(shù)表達(dá)式，在給變量賦值時(shí)，可以理解為=號(hào)右邊的數(shù)據(jù) 。

var a = "1";
var b = [1];
var c = {};
var d =function (){} // function() 為匿名函數(shù)

注意：函數(shù)字面量一般為匿名函數(shù)，但是語法也支持定義函數(shù)名。

var d =function func(){} 

到此這篇關(guān)于JavaScript async/await使用詳解的文章就介紹到這了,更多相關(guān)JS async/await內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論