最近在迭代優(yōu)化項目贿条，發(fā)現(xiàn)自己代碼中很多異步的請求，寫的很混亂嘱吗，不清晰玄组。之前也有聽說過一些JS處理異步回調的方法，但是沒有用到實際開發(fā)中，廢話不多說巧勤。
剛開始我們處理異是用callback嵌灰，然后用Promise，然后是Generator函數(shù)颅悉，但是這幾種方案都有對應的復雜性沽瞭，async/await 是 JS 編寫異步程序的新方法，建立在Promise之上
一剩瓶、async是什么驹溃？
MDN的描述：
**async function**聲明用于定義一個返回AsyncFunction對象的異步函數(shù)。異步函數(shù)是指通過事件循環(huán)異步執(zhí)行的函數(shù)延曙，它會通過一個隱式的Promise返回其結果豌鹤。但是如果你的代碼使用了異步函數(shù)，它的語法和結構會更像是標準的同步函數(shù)枝缔。
也就是說async函數(shù)會返回一個Promise對象布疙。
- 如果async函數(shù)中是return一個值，這個值就是Promise對象中resolve的值愿卸；
- 如果async函數(shù)中是throw一個值灵临，這個值就是Promise對象中reject的值。
async的寫法
async function imAsync(num) {
if (num > 0) {
return num // 這里相當于resolve(num)
} else {
throw num // 這里相當于reject(num)
}
}
imAsync(1).then(function (v) {
console.log(v); // 1
});
// 注意這里是catch
imAsync(0).catch(function (v) {
console.log(v); // 0
})
promise的寫法
function imPromise(num) {
return new Promise(function (resolve, reject) {
if (num > 0) {
resolve(num);
} else {
reject(num);
}
})
}
imPromise(1).then(function (v) {
console.log(v); // 1
})
imPromise(0).then(function (v) {
console.log(v); // 0
})
二趴荸、await是什么
MDN的描述
await 表達式會暫停當前
async function的執(zhí)行儒溉，等待 Promise 處理完成。若 Promise 正常處理(fulfilled)发钝，其回調的resolve函數(shù)參數(shù)作為 await 表達式的值顿涣，繼續(xù)執(zhí)行async function。
await操作符用于等待一個Promise對象酝豪。它只能在異步函數(shù)async function中使用涛碑。
所以 await 等待的不是所有的異步操作，等待的只是Promise孵淘。
舉個代碼
我想下面代碼輸出 1 2 3
console.log("1");
setTimeout(function () {
console.log("2");
}, 1000);
console.log("3");
promise寫法
console.log("1");
function fun(){
return new Promise((resolve,reject)=>{
setTimeout(function () {
console.log("2");
resolve();
}, 1000);
})
}
fun().then(()=>{
console.log("3");
});
async/wait寫法
console.log("1");
function fun1(){
return new Promise((resolve,reject)=>{
setTimeout(function () {
console.log("2");
resolve();
}, 1000);
})
}
async function fun2(){
await fun1();
console.log("3");
}
fun2();
await 會將代碼執(zhí)行的權利交給他后面的函數(shù)锌唾，等到后面這個函數(shù)執(zhí)行完后再執(zhí)行之后的代碼。在這里就是fun1函數(shù)夺英。
async/await 的fashion寫法IIFE
(async function(){
console.log("1");
await new Promise((resolve,reject)=>{
setTimeout(function () {
console.log(2);
resolve();
}, 1000);
})
console.log("3");
})()
需要注意的是，async/await 是建立在Promise 之上的滋捶，await并不是所有函數(shù)都會等痛悯，await只會等待Promise
// 注意，這是錯誤的做法
(async function () {
console.log(1);
await setTimeout(function () {
console.log(2);
}, 1000);
console.log(3);
}())
關鍵點就是得是返回Promise對象的函數(shù)才行重窟，不然await等你后面的函數(shù)執(zhí)行完了载萌，見你沒返回Promise對象，那他就繼續(xù)執(zhí)行了，不管你了扭仁。
以上是個人整理和總結垮衷，希望對大家有幫助！９宰埂２笸弧！
