其他相關(guān)傳送門(mén)
核心
1. 執(zhí)行 async 函數(shù)，默認(rèn)返回一個(gè) promise 對(duì)象
2. await 相當(dāng)于 promise 的 then
3. try...catch 可捕獲異常谜诫，代替了 promise 的 catch
細(xì)說(shuō)
1. async
async是ES7新出的特性碴卧，表明當(dāng)前函數(shù)是異步函數(shù)，不會(huì)阻塞線程導(dǎo)致后續(xù)代碼停止運(yùn)行抖格。
async 函數(shù)诺苹，就是 Generator 函數(shù) 的語(yǔ)法糖。
相較于 Generator雹拄，async 函數(shù)的改進(jìn)在于下面四點(diǎn)：
- 內(nèi)置執(zhí)行器：
Generator函數(shù)的執(zhí)行必須依靠執(zhí)行器收奔，而async函數(shù)自帶執(zhí)行器，調(diào)用方式跟普通函數(shù)的調(diào)用一樣 - 更好的語(yǔ)義：
async和await相較于*和yield更加語(yǔ)義化 - 更廣的適用性：
co模塊約定滓玖，yield命令后面只能是Thunk函數(shù)或Promise對(duì)象坪哄。而async函數(shù)的await命令后面則可以是Promise或者 原始類型的值（Number，string势篡，boolean翩肌，但這時(shí)等同于同步操作） - 返回值是 Promise：
async函數(shù)返回值是Promise對(duì)象，比Generator函數(shù)返回的Iterator對(duì)象方便禁悠，可以直接使用then()方法進(jìn)行調(diào)用
async function asyncFn() {
console.log('這里是同步');
return '我后執(zhí)行'; // 返回一個(gè) promise 對(duì)象,相當(dāng)于 return Promise.resolve('我后執(zhí)行')
}
console.log(asyncFn()); // Promise {<fulfilled>: "我后執(zhí)行"}
asyncFn().then(result => {
console.log(result+'念祭，這里是異步');
})
console.log('我先執(zhí)行');
// 這里是同步
// 我先執(zhí)行
// 我后執(zhí)行，這里是異步
上面的執(zhí)行結(jié)果是先打印出'我先執(zhí)行'碍侦，雖然是上面asyncFn()先執(zhí)行粱坤，但是已經(jīng)被定義異步函數(shù)了隶糕，不會(huì)影響后續(xù)函數(shù)的執(zhí)行。
async 定義的函數(shù)內(nèi)部會(huì)默認(rèn)返回一個(gè) promise 對(duì)象：
- 如果函數(shù)內(nèi)部發(fā)現(xiàn)不是異痴拘或者
reject枚驻，則判定成功，這里可以return各種數(shù)據(jù)類型的值株旷，false,NaN,undefined...總之再登，都是resolve - 如果函數(shù)內(nèi)部拋出異常或者是返回
reject灾常，都會(huì)使函數(shù)的promise狀態(tài)為失敗reject
在async里霎冯，必須要將結(jié)果return出去，不然的話不管是執(zhí)行reject還是resolved的值都為undefine
//正確reject方法钞瀑。必須將reject狀態(tài)return出去沈撞。
async function PromiseError() {
return Promise.reject('has Promise Error');
}
//這是錯(cuò)誤的做法，并且判定resolve雕什，返回值為undefined,并且Uncaught報(bào)錯(cuò)
async function PromiseError() {
Promise.reject('這是錯(cuò)誤的做法');
}
2. await
await 意思是 async wait(異步等待)缠俺。
-
await后面接一個(gè)會(huì)return new promise的函數(shù)并執(zhí)行它 -
await只能放在async函數(shù)里
任何 async 函數(shù)都會(huì)默認(rèn)返回 promise，并且這個(gè) promise 解析的值都將會(huì)是這個(gè)函數(shù)的返回值贷岸，而 async 函數(shù)必須等到內(nèi)部所有的 await 命令的 Promise 對(duì)象執(zhí)行完壹士，才會(huì)發(fā)生狀態(tài)改變。
就是說(shuō)偿警，必須等所有await 函數(shù)執(zhí)行完畢后躏救，才會(huì)告訴promise我成功了還是失敗了，執(zhí)行then或者catch
function dice(){
return new Promise((resolve, reject)=>{
let sino = parseInt(Math.random() * 6 +1);
setTimeout(()=>{
resolve(sino);
},3000);
})
}
async function test(){
let n =await dice(); // await 相當(dāng)于 Promise 的 then
console.log(n);
}
test();
把await和成功后的操作放到try里螟蒸，失敗的放在catch：
function dice(val) {
return new Promise((resolve, reject) => {
let sino = parseInt(Math.random() * 6 + 1);
if (sino > 3) {
val === '大' ? resolve(sino) : reject(sino);
} else {
val === '大' ? reject(sino) : resolve(sino);
}
})
}
async function test() {
// try...catch 可捕獲異常盒使，代替了 Promise 的 catch
try {
//把a(bǔ)wait及獲取它的值的操作放在try里
let n = await dice('大'); // await 相當(dāng)于 Promise 的 then
console.log('贏了' + n);
} catch (error) {
//失敗的操作放在catch里
console.log('輸了' + error); // 相當(dāng)于 Promise 的 catch
}
}
test();
await 后面是 rejected 狀態(tài)的栗子：
(async function () {
const p = Promise.reject('promise error');
const res = await p; // await 相當(dāng)于 Promise 的 then, 但這里是rejected狀態(tài)，會(huì)報(bào)錯(cuò)
console.log(res);
})()
用 try...catch 捕獲異常即可：
(async function () {
const p = Promise.reject('promise error');
try {
const res = await p;
console.log(res);
} catch (error) {
console.log(error); // 正常輸出: promise error
}
})()
3. await 等到之后七嫌，做了一件什么事情少办？
await 下面所有的代碼都是異步
await等到的結(jié)果分2種：
-
不是promise對(duì)象
如果不是 promise , await會(huì)阻塞后面的代碼，先執(zhí)行async外面的同步代碼诵原，同步代碼執(zhí)行完英妓，再回到async內(nèi)部，把這個(gè)非promise的對(duì)象绍赛，作為 await表達(dá)式的結(jié)果蔓纠。
async function async1() {
await async2(); // 先執(zhí)行async2()，await下面所有的代碼都是異步
console.log(1); // 異步
}
async function async2() {
console.log(2);
}
console.log(3);
async1();
// 3
// 2
// 1
-
是promise對(duì)象
如果是 promise 對(duì)象吗蚌，await 也會(huì)阻塞async后面的代碼腿倚，先執(zhí)行async外面的同步代碼，等著 Promise 對(duì)象 fulfilled褪测，然后把 resolve 的參數(shù)作為 await 表達(dá)式的運(yùn)算結(jié)果猴誊。
function fn() {
return new Promise(resolve => {
console.log(1); // 同步2
resolve();
})
}
async function async1() {
await fn().then(() => { // 先執(zhí)行fn()，await下面所有的代碼都是異步
console.log(2); // 異步1
})
console.log(3); // 異步1的下一個(gè)異步
}
console.log(4); // 同步1
async1();
// 4
// 1
// 2
// 3
如果asycn里的代碼都是同步的侮措，那么這個(gè)函數(shù)被調(diào)用就會(huì)同步執(zhí)行
async function fn(){
console.log('a'); // 同步1
}
fn();
console.log('b'); // 同步2
//a
//b
async function async1() {
console.log(1); // 同步2
await async2(); // 先執(zhí)行async2() 再await
console.log(2); // 異步（await下面所有的代碼都是異步）
}
async function async2() {
console.log(3); // 同步3
}
console.log(4); // 同步1
async1();
console.log(5); // 同步4
// 4
// 1
// 3
// 5
// 2
async function async1() {
console.log(1);
await async2();
console.log(2);
await async3();
console.log(3);
}
async function async2() {
return new Promise((resolve) => {
console.log(4);
resolve(); // 如果沒(méi)有resolve()懈叹，await async2()后的代碼都不會(huì)執(zhí)行，只輸出6 1 4 7
})
}
async function async3() {
console.log(5);
}
console.log(6);
async1();
console.log(7);
// 6
// 1
// 4
// 7
// 2
// 5
// 3
4. 使用 async/await 改寫(xiě) then 鏈
相比于 Promise 分扎，async/await 能更好地處理 then鏈
function takeLongTime(n) {
return new Promise(resolve => {
setTimeout(() => resolve(n + 200), n);
});
}
function step1(n) {
console.log(`step1 with ${n}`);
return takeLongTime(n);
}
function step2(n) {
console.log(`step2 with ${n}`);
return takeLongTime(n);
}
function step3(n) {
console.log(`step3 with ${n}`);
return takeLongTime(n);
}
使用then的鏈?zhǔn)秸{(diào)用：
function doIt() {
console.time("doIt");
const time1 = 300;
step1(time1)
.then(time2 => step2(time2))
.then(time3 => step3(time3))
.then(result => {
console.log(`result is ${result}`);
});
}
doIt();
// step1 with 300
// step2 with 500
// step3 with 700
// result is 900
使用 async/await：
async function doIt() {
console.time("doIt");
const time1 = 300;
const time2 = await step1(time1);
const time3 = await step2(time2);
const result = await step3(time3);
console.log(`result is ${result}`);
}
doIt();
// step1 with 300
// step2 with 500
// step3 with 700
// result is 900
