上一篇文章中，我們使用Promise處理異步行為，雖然我們的代碼已經改觀了很多了，基本已經可以維護了，但是對于一個程式員來說，這個樣子是不夠的。我們還需要更加的簡化代碼，是以我們就需要用到一個 es7 的文法了，叫做 async/await
async
- async關鍵字用于定義
異步函數
- 定義：放在function關鍵字之前，表示“這是一個内部有異步行為的函數”
async function aa() {
console.log(1);
console.log(2);
console.log(3);
}
- 執行：當執行的時候，會按照順序執行内部代碼
async function aa() {
console.log(1);
console.log(2);
console.log(3);
}
aa(); // 1 2 3
- 傳回值
- async函數的傳回值是一個Promise執行個體
- 該執行個體的狀态取決于async函數的執行情況
- 如果async函數執行順利，中間沒有任何異常發生，則Promise執行個體的狀态變為resolved，此時接收到的資料是看函數裡面的return傳回的内容
- 如果async函數執行異常，則Promise執行個體的狀态變為rejected，此時接收到的資料的是報錯的内容
async function aa() {
console.log(1);
console.log(2);
console.log(3);
}
let p = aa(); // 1 2 3
p.then(() => {
console.log("success"); // success
}).catch(() => {
console.log("failed");
});
await
- await關鍵字用于定義
需要等待
- 當執行到await時，JS線程會交出控制權
- await 必須放在async函數裡面，它表示“等待”，等後面的代碼執行完
- 等待的代碼執行完畢之後，才會繼續往下執行後面的代碼
- await後面必須是Promise執行個體，如果不是，會通過Promise.resolve()，将後面的内容轉為Promise執行個體
- 如果await後面的Promise執行個體轉為成功狀态，那麼await前面的變量的值，就是該執行個體成功時傳遞的值
- 如果await後面的Promise執行個體轉為失敗狀态，那麼整個async函數終止執行，并将失敗的資料傳遞給async函數的Promise執行個體去處理
總結：await等待後面的Promise執行個體狀态變化之後，再繼續執行目前async函數，等待的過程中，JS線程不會停留，而是跳出async函數，繼續執行其他内容。
使用示範：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- async和await一定是建立在Promise基礎之上 -->
<script src="AJAX.js"></script>
<script>
function taskOne() {
return new Promise(function (resolve, reject) {
AJAX.get("a.php", {}, function (data) {
console.log(2);
if (data.error === 0) {
resolve(data);
} else {
reject(data);
}
})
})
}
function taskTwo() {
return new Promise(function (resolve, reject) {
AJAX.get("b.php", {}, function (data) {
console.log(4);
if (data.error === 0) {
resolve(data);
} else {
reject(data);
}
})
})
}
function taskThree() {
return new Promise(function (resolve, reject) {
AJAX.get("c.php", {}, function (data) {
console.log(6);
if (data.error === 0) {
resolve(data);
} else {
reject(data);
}
})
})
}
async function demo() {
var data1 = await taskOne();
console.log(data1);
var data2 = await taskTwo();
console.log(data2);
var data3 = await taskThree();
console.log(data3);
return;
}
let p = demo();
p.then(function() {
console.log("請求結束");
})
.catch(function(data) {
})
</script>
</body>
</html>
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)