在此之前的兩篇文章已經(jīng)把Promise的用法交代清楚了，Promise確實很好的解決了回調(diào)地獄等異步處理出現(xiàn)的問題，提高了代碼的閱讀性，但是在代碼形式上較為復(fù)雜，還有很多回調(diào)的感覺，不易于閱讀和理解。因此ES6還新增了async和await兩個關(guān)鍵字，作為簡化Promise API的方法，注意，只是簡化，而并不是代替Promise

目錄

1.async

2.await

---

1.async

1）用法

async用于修飾函數(shù)（無論是函數(shù)字面量還是函數(shù)表達式），放置在函數(shù)聲明前位置，被修飾函數(shù)的返回結(jié)果一定是Promise對象，其目的在于簡化函數(shù)的返回值中的Promise的創(chuàng)建。

2）示例

【例1】

async function test() {console.log(1);return 5; } const pro = test(); console.log(pro);

?該段代碼相當于

function test() {return new Promise((resolve,reject)=>{console.log(1);resolve(5)}) } const pro = test(); console.log(pro);

相比較之下，我們可以看出來async更加方便簡潔，兩段代碼的打印結(jié)果均如圖1

圖1

2.await

1）用法

await用在某個表達式之前，如果表達式是一個Promise，則得到的是thenable中的狀態(tài)數(shù)據(jù)【例2-1】；如果表達式不是Promise，則會將其使用Promise.resolve包裝后按照規(guī)則進行運行【例2-2】

2）示例

【例2-1】

async function test1() {console.log(1);return 2; } async function test2() {const result = await test1();console.log(result); } test2();

該段代碼相當于

function test1() {return new Promise((resolve, reject) => {console.log(1);resolve(2);}) }function test2() {return new Promise((resolve, reject) => {test1().then(resp => {const result = respconsole.log(result);})}) } test2()

【結(jié)果】

圖2-1

【例2-2】

async function test() {const result = await 1;console.log(result); } test(); console.log(124);

該段代碼相當于

function test() {return new Promise((resolve,reject)=>{Promise.resolve(1).then(data=>{const result = data;console.log(result);resolve();})}) } test(); console.log(124);

【結(jié)果】

圖2-2

【例2-3】以上的例子都是resolve狀態(tài)，接下類康康reject狀態(tài)怎么處理

async function getPromise() {if (Math.random()> 0.5) {return 1;} else {throw 2;} } async function test(){try {const result = await getPromise();console.log('success',result);} catch (err) {console.log('error',err)} } test();

?【結(jié)果】如果事件推向resolved狀態(tài)，則運行try中的代碼，打印結(jié)果如圖2-3-1；如果事件推向rejected狀態(tài)，則運行catch中的代碼，打印結(jié)果如圖2-3-2

圖2-3-1 圖2-3-1

?

總結(jié)

以上是生活随笔為你收集整理的Promise第三篇：async和await关键字的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。