但是我們的例子也看到了，每一個setTimeout都是一個宏任務(wù)，瀏覽器被阻斷時事件循環(huán)都好幾輪了，但樣式依然沒有生效?？梢娺@種說法是不準確的。
而當我在第5個setTimeout添加alert，瀏覽器被阻斷時，有很大的概率(并不是一定)樣式會生效。這說明什么時候更新頁面視圖是由瀏覽器決定的，并沒有一個準確的時機。
總結(jié)
JavaScript引擎首先從頭到尾初始執(zhí)行腳本代碼，不必多言。
如果初始執(zhí)行完畢后有微任務(wù)，則執(zhí)行微任務(wù)(為什么這里不屬于事件循環(huán)？后面會講到)。
之后就是不斷的事件循環(huán)。
首先到宏任務(wù)隊列里找宏任務(wù)，宏任務(wù)隊列又分好多種，瀏覽器自己決定優(yōu)先級。
被放入調(diào)用棧的某個宏任務(wù)，如果它的代碼中又包含微任務(wù)，則執(zhí)行所有微任務(wù)。
更新頁面視圖沒有一個準確的時機，是每個宏任務(wù)周期后更新還是幾個宏任務(wù)周期后更新，由瀏覽器決定。
也有一種說法認為：從頭到尾初始執(zhí)行腳本代碼也是一個任務(wù)。
如果我們認可這種說法，則整個代碼執(zhí)行過程都屬于事件循環(huán)。
初始執(zhí)行就是一個宏任務(wù)，這個宏任務(wù)里面如果有微任務(wù)，則執(zhí)行所有微任務(wù)。
瀏覽器自己決定更新頁面視圖的時機。
不斷的往復(fù)這個過程，只不過之后的宏任務(wù)是事件回調(diào)。
第二種解釋好像更說得通。因為第一種解釋會有一段微任務(wù)的執(zhí)行不在事件循環(huán)里，這顯然是不對的。
遲到的承諾
Promise是一個表現(xiàn)為狀態(tài)機的異步容器。
它有以下幾個特點：
狀態(tài)不受外界影響。Promise只有三種狀態(tài)：pending(進行中)、fulfilled(已成功)和rejected(已失敗)。狀態(tài)只能通過Promise內(nèi)部提供的resolve()和reject()函數(shù)改變。
狀態(tài)只能從pending變?yōu)?b>fulfilled或者從pending變?yōu)?b>rejected。并且一旦狀態(tài)改變，狀態(tài)就會被凍結(jié)，無法再次改變。
newPromise((resolve,reject)=>{
reject("reject");
setTimeout(()=>resolve("resolve"),5000);
}).then(console.log,console.error);
//不要等了，它只會打印一個reject
如果狀態(tài)發(fā)生改變，任何時候都可以獲得最終的狀態(tài)，即便改變發(fā)生在前。這與事件監(jiān)聽完全不一樣，事件監(jiān)聽只能監(jiān)聽之后發(fā)生的事件。
constpromise=newPromise(resolve=>resolve("biu"));
promise.then(console.log);
setTimeout(()=>promise.then(console.log),5000);
//打印biu，相隔大約5秒鐘后又打印biu
正是源于這些特點，Promise才敢于稱自己為一個承諾。
同步代碼與異步代碼
Promise是一個異步容器，那哪些部分是同步執(zhí)行的，哪些部分是異步執(zhí)行的呢？
console.log("kiu");
newPromise((resolve,reject)=>{
console.log("miu");
resolve("biu");
console.log("niu");
}).then(console.log,console.error);
console.log("piu");
我們看執(zhí)行結(jié)果。
kiu
miu
niu
piu
biu
可以看到，Promise構(gòu)造函數(shù)的參數(shù)函數(shù)是完完全全的同步代碼，只有狀態(tài)改變觸發(fā)的then回調(diào)才是異步代碼。為啥說Promise是一個異步容器？它不關(guān)心你給它裝的是啥，它只關(guān)心狀態(tài)改變后的異步執(zhí)行，并且承諾給你一個穩(wěn)定的結(jié)果。
從這點來看，Promise真的只是一個異步容器而已。
Promise.prototype.then()
then方法接受兩個回調(diào)作為參數(shù)，狀態(tài)變成fulfilled時會觸發(fā)第一個回調(diào)，狀態(tài)變成rejected時會觸發(fā)第二個回調(diào)。你可以認為then回調(diào)是Promise這個異步容器的界面和輸出，在這里你可以獲得你想要的結(jié)果。
then函數(shù)可以實現(xiàn)鏈式調(diào)用嗎？可以的。
但你想一下，then回調(diào)觸發(fā)的時候，Promise的狀態(tài)已經(jīng)凍結(jié)了。這時候它就是被打開盒子的薛定諤的貓，它要么是死的，要么是活的。也就是說，它不可能再次觸發(fā)then回調(diào)。
那then函數(shù)是如何實現(xiàn)鏈式調(diào)用的呢？
原理就是then函數(shù)自身返回的是一個新的Promise實例。再次調(diào)用then函數(shù)的時候，實際上調(diào)用的是這個新的Promise實例的then函數(shù)。
既然Promise只是一個異步容器而已，換一個容器也不會有什么影響。
constpromiseA=newPromise((resolve,reject)=>resolve("biu"));
constpromiseB=promiseA.then(value=>{
console.log(value);
returnvalue;
});
constpromiseC=promiseB.then(console.log);
結(jié)果是打印了兩個biu。
constpromiseA=newPromise((resolve,reject)=>resolve("biu"));
constpromiseB=promiseA.then(value=>{
console.log(value);
returnPromise.resolve(value);
});
constpromiseC=promiseB.then(console.log);
Promise.resolve()我們后面會講到，它返回一個狀態(tài)是fulfilled的Promise實例。
這次我們手動返回了一個狀態(tài)是fulfilled的新的Promise實例，可以發(fā)現(xiàn)結(jié)果和上一次一模一樣。說明then函數(shù)悄悄的將return"biu"轉(zhuǎn)成了returnPromise.resolve("biu")。如果沒有返回值呢？那就是轉(zhuǎn)成returnPromise.resolve()，反正得轉(zhuǎn)成一個新的狀態(tài)是fulfilled的Promise實例返回。
這就是then函數(shù)返回的總是一個新的Promise實例的內(nèi)部原理。
想要讓新Promise實例的狀態(tài)從pending變成rejected，有什么辦法嗎？畢竟then方法也沒給我們提供reject方法。
constpromiseA=newPromise((resolve,reject)=>resolve("biu"));
constpromiseB=promiseA.then(value=>{
console.log(value);
returnx;
});
constpromiseC=promiseB.then(console.log,console.error);
查看這里的輸出結(jié)果。
biu
ReferenceError:xisnotdefined
at:6:5
只有程序本身發(fā)生了錯誤，新Promise實例才會捕獲這個錯誤，并把錯誤暗地里傳給reject方法。于是狀態(tài)從pending變成rejected。
Promise.prototype.catch()
catch方法，顧名思義是用來捕獲錯誤的。它其實是then方法某種方式的語法糖，所以下面兩種寫法的效果是一樣的。
newPromise((resolve,reject)=>{
reject("biu");
}).then(
undefined,
error=>console.error(error),
);
newPromise((resolve,reject)=>{
reject("biu");
}).catch(
error=>console.error(error),
);
Promise內(nèi)部的錯誤會靜默處理。你可以捕獲到它，但錯誤本身已經(jīng)變成了一個消息，并不會導(dǎo)致外部程序的崩潰和停止執(zhí)行。
下面的代碼運行中發(fā)生了錯誤，所以容器中后面的代碼不會再執(zhí)行，狀態(tài)變成rejected。但是容器外面的代碼不受影響，依然正常執(zhí)行。
newPromise((resolve,reject)=>{
console.log(x);
console.log("kiu");
resolve("biu");
}).then(console.log,console.error);
setTimeout(()=>console.log("piu"),5000);
所以大家常常說"Promise會吃掉錯誤"。
如果狀態(tài)已經(jīng)凍結(jié)，即便運行中發(fā)生了錯誤，Promise也會忽視它。
newPromise((resolve,reject)=>{
resolve("biu");
console.log(x);
}).then(console.log,console.error);
setTimeout(()=>console.log("piu"),5000);
Promise的錯誤如果沒有被及時捕獲，它會往下傳遞，直到被捕獲。中間沒有捕獲代碼的then函數(shù)就被忽略了。
newPromise((resolve,reject)=>{
console.log(x);
resolve("biu");
}).then(
value=>console.log(value),
).then(
value=>console.log(value),
).then(
value=>console.log(value),
).catch(
error=>console.error(error),
);
Promise.prototype.finally()
所謂finally就是一定會執(zhí)行的方法。它和then或者catch不一樣的地方在于，finally方法的回調(diào)函數(shù)不接受任何參數(shù)。也就是說，它不關(guān)心容器的狀態(tài)，它只是一個兜底的。
newPromise((resolve,reject)=>{
//邏輯
}).then(
value=>{
//邏輯
console.log(value);
},
error=>{
//邏輯
console.error(error);
}
);
newPromise((resolve,reject)=>{
//邏輯
}).finally(
()=>{
//邏輯
}
);
如果有一段邏輯，無論狀態(tài)是fulfilled還是rejected都要執(zhí)行，那放在then函數(shù)中就要寫兩遍，而放在finally函數(shù)中就只需要寫一遍。
另外，別被finally這個名字帶偏了，它不一定要定義在最后的。
newPromise((resolve,reject)=>{
resolve("biu");
}).finally(
()=>console.log("piu"),
).then(
value=>console.log(value),
).catch(
error=>console.error(error),
);
finally函數(shù)在鏈條中的哪個位置定義，就會在哪個位置執(zhí)行。從語義化的角度講，finally不如叫anyway。
Promise.all()
它接受一個由Promise實例組成的數(shù)組，然后生成一個新的Promise實例。這個新Promise實例的狀態(tài)由數(shù)組的整體狀態(tài)決定，只有數(shù)組的整體狀態(tài)都是fulfilled時，新Promise實例的狀態(tài)才是fulfilled，否則就是rejected。這就是all的含義。
Promise.all([Promise.resolve(1),Promise.resolve(2),Promise.resolve(3)]).then(
values=>console.log(values),
).catch(
error=>console.error(error),
);
Promise.all([Promise.resolve(1),Promise.reject(2),Promise.resolve(3)]).then(
values=>console.log(values),
).catch(
error=>console.error(error),
);
數(shù)組中的項目如果不是一個Promise實例，all函數(shù)會將它封裝成一個Promise實例。
Promise.all([1,2,3]).then(
values=>console.log(values),
).catch(
error=>console.error(error),
);
Promise.race()
它的使用方式和Promise.all()類似，但是效果不一樣。
Promise.all()是只有數(shù)組中的所有Promise實例的狀態(tài)都是fulfilled時，它的狀態(tài)才是fulfilled，否則狀態(tài)就是rejected。
而Promise.race()則只要數(shù)組中有一個Promise實例的狀態(tài)是fulfilled，它的狀態(tài)就會變成fulfilled，否則狀態(tài)就是rejected。
就是&&和||的區(qū)別是吧。
它們的返回值也不一樣。
Promise.all()如果成功會返回一個數(shù)組，里面是對應(yīng)Promise實例的返回值。
而Promise.race()如果成功會返回最先成功的那一個Promise實例的返回值。
functionfetchByName(name){
consturl=`https://api.github.com/users/${name}/repos`;
returnfetch(url).then(res=>res.json());
}
consttimingPromise=newPromise((resolve,reject)=>{
setTimeout(()=>reject(newError("網(wǎng)絡(luò)請求超時")),5000);
});
Promise.race([fetchByName("veedrin"),timingPromise]).then(
values=>console.log(values),
).catch(
error=>console.error(error),
);
上面這個例子可以實現(xiàn)網(wǎng)絡(luò)超時觸發(fā)指定操作。
Promise.resolve()
它的作用是接受一個值，返回一個狀態(tài)是fulfilled的Promise實例。
Promise.resolve("biu");
newPromise(resolve=>resolve("biu"));
它是以上寫法的語法糖。
Promise.reject()
它的作用是接受一個值，返回一個狀態(tài)是rejected的Promise實例。
Promise.reject("biu");
newPromise((resolve,reject)=>reject("biu"));
它是以上寫法的語法糖。
嵌套Promise
如果Promise有嵌套，它們的狀態(tài)又是如何變化的呢？
constpromise=Promise.resolve(
(()=>{
console.log("a");
returnPromise.resolve(
(()=>{
console.log("b");
returnPromise.resolve(
(()=>{
console.log("c");
returnnewPromise(resolve=>{
setTimeout(()=>resolve("biu"),3000);
});
})()
)
})()
);
})()
);
promise.then(console.log);
可以看到，例子中嵌套了四層Promise。別急，我們先回顧一下沒有嵌套的情況。
constpromise=Promise.resolve("biu");
promise.then(console.log);
我們都知道，它會在微任務(wù)時機執(zhí)行，肉眼幾乎看不到等待。
但是嵌套了四層Promise的例子，因為最里層的Promise需要等待幾秒才resolve，所以最外層的Promise返回的實例也要等待幾秒才會打印日志。也就是說，只有最里層的Promise狀態(tài)變成fulfilled，最外層的Promise狀態(tài)才會變成fulfilled。
如果你眼尖的話，你就會發(fā)現(xiàn)這個特性就是Koa中間件機制的精髓。
Koa中間件機制也是必須得等最后一個中間件resolve(如果它返回的是一個Promise實例的話)之后，才會執(zhí)行洋蔥圈另外一半的代碼。
functioncompose(middleware){
returnfunction(context,next){
letindex=-1;
returndispatch(0);
functiondispatch(i){
if(i<=index)returnPromise.reject(newError("next()calledmultipletimes"));
index=i;
letfn=middleware[i];
if(i===middleware.length)fn=next;
if(!fn)returnPromise.resolve();
try{
returnPromise.resolve(fn(context,functionnext(){
returndispatch(i+1);
}));
}catch(err){
returnPromise.reject(err);
}
}
}
}
狀態(tài)機
Generator簡單講就是一個狀態(tài)機。但它和Promise不一樣，它可以維持無限個狀態(tài)，并且提出它的初衷并不是為了解決異步編程的某些問題。
一個線程一次只能做一件任務(wù)，并且任務(wù)與任務(wù)之間不能間斷。而Generator開了掛，它可以暫停手頭的任務(wù)，先干別的，然后在恰當?shù)臅r機手動切換回來。
這是一種纖程或者協(xié)程的概念，相比線程切換更加輕量化的切換方式。
Iterator
在講Generator之前，我們要先和Iterator遍歷器打個照面。
Iterator對象是一個指針對象，它是一種類似于單向鏈表的數(shù)據(jù)結(jié)構(gòu)。JavaScript通過Iterator對象來統(tǒng)一數(shù)組和類數(shù)組的遍歷方式。
constarr=[1,2,3];
constiteratorConstructor=arr[Symbol.iterator];
console.log(iteratorConstructor);
//?values(){[nativecode]}
constobj={a:1,b:2,c:3};
constiteratorConstructor=obj[Symbol.iterator];
console.log(iteratorConstructor);
//undefined
constset=newSet([1,2,3]);
constiteratorConstructor=set[Symbol.iterator];
console.log(iteratorConstructor);
//?values(){[nativecode]}
我們已經(jīng)見到了Iterator對象的構(gòu)造器，它藏在Symbol.iterator下面。接下來我們生成一個Iterator對象來了解它的工作方式吧。
constarr=[1,2,3];
constit=arr[Symbol.iterator]();
console.log(it.next());//{value:1,done:false}
console.log(it.next());//{value:2,done:false}
console.log(it.next());//{value:3,done:false}
console.log(it.next());//{value:undefined,done:true}
console.log(it.next());//{value:undefined,done:true}
既然它是一個指針對象，調(diào)用next()的意思就是把指針往后挪一位。挪到最后一位，再往后挪，它就會一直重復(fù)我已經(jīng)到頭了，只能給你一個空值。
Generator
Generator是一個生成器，它生成的到底是什么呢？
對咯，他生成的就是一個Iterator對象。
function*gen(){
yield1;
yield2;
return3;
}
constit=gen();
console.log(it.next());//{value:1,done:false}
console.log(it.next());//{value:2,done:false}
console.log(it.next());//{value:3,done:false}
console.log(it.next());//{value:undefined,done:true}
console.log(it.next());//{value:undefined,done:true}
Generator有什么意義呢？普通函數(shù)的執(zhí)行會形成一個調(diào)用棧，入棧和出棧是一口氣完成的。而Generator必須得手動調(diào)用next()才能往下執(zhí)行，相當于把執(zhí)行的控制權(quán)從引擎交給了開發(fā)者。
所以Generator解決的是流程控制的問題。
它可以在執(zhí)行過程暫時中斷，先執(zhí)行別的程序，但是它的執(zhí)行上下文并沒有銷毀，仍然可以在需要的時候切換回來，繼續(xù)往下執(zhí)行。
最重要的優(yōu)勢在于，它看起來是同步的語法，但是卻可以異步執(zhí)行。
yield
對于一個Generator函數(shù)來說，什么時候該暫停呢？就是在碰到yield關(guān)鍵字的時候。
function*gen(){
console.log("a");
yield13*15;
console.log("b");
yield15-13;
console.log("c");
return3;
}
constit=gen();
看上面的例子，第一次調(diào)用it.next()的時候，碰到了第一個yield關(guān)鍵字，然后開始計算yield后面表達式的值，然后這個值就成了it.next()返回值中value的值，然后停在這。這一步會打印a，但不會打印b。
以此類推。return的值作為最后一個狀態(tài)傳遞出去，然后返回值的done屬性就變成true，一旦它變成true，之后繼續(xù)執(zhí)行的返回值都是沒有意義的。
這里面有一個狀態(tài)傳遞的過程。yield把它暫停之前獲得的狀態(tài)傳遞給執(zhí)行器。
那么有沒有可能執(zhí)行器傳遞狀態(tài)給狀態(tài)機內(nèi)部呢？
function*gen(){
consta=yield1;
console.log(a);
constb=yield2;
console.log(b);
return3;
}
constit=gen();
當然是可以的。
默認情況下，第二次執(zhí)行的時候變量a的打印結(jié)果是undefined，因為yield關(guān)鍵字就沒有返回值。
但是如果給next()傳遞參數(shù)，這個參數(shù)就會作為上一個yield的返回值。
it.next("biu");
別急，第一次執(zhí)行沒有所謂的上一個yield，所以這個參數(shù)是沒有意義的。
it.next("piu");
//打印piu。這個piu是console.log(a)打印出來的。
第二次執(zhí)行就不同了。a變量接收到了next()傳遞進去的參數(shù)。
這有什么用？如果能在執(zhí)行過程中給狀態(tài)機傳值，我們就可以改變狀態(tài)機的執(zhí)行條件。你可以發(fā)現(xiàn)，Generator是可以實現(xiàn)值的雙向傳遞的。
為什么要作為上一個yield的返回值？你想啊，作為上一個yield的返回值，才能改變當前代碼的執(zhí)行條件，這樣才有價值不是嘛。這地方有點繞，仔細想一想。
自動執(zhí)行
好吧，既然引擎把Generator的控制權(quán)交給了開發(fā)者，那我們就要探索出一種方法，讓Generator的遍歷器對象可以自動執(zhí)行。
function*gen(){
yield1;
yield2;
return3;
}
functionrun(gen){
constit=gen();
letstate={done:false};
while(!state.done){
state=it.next();
console.log(state);
}
}
run(gen);
不錯，竟然這么簡單。
但想想我們是來干什么的，我們是來探討JavaScript異步的呀。這個簡陋的run函數(shù)能夠執(zhí)行異步操作嗎？
functionfetchByName(name){
consturl=`https://api.github.com/users/${name}/repos`;
fetch(url).then(res=>res.json()).then(res=>console.log(res));
}
function*gen(){
yieldfetchByName("veedrin");
yieldfetchByName("tj");
}
functionrun(gen){
constit=gen();
letstate={done:false};
while(!state.done){
state=it.next();
}
}
run(gen);
事實證明，Generator會把fetchByName當做一個同步函數(shù)來執(zhí)行，沒等請求觸發(fā)回調(diào)，它已經(jīng)將指針指向了下一個yield。我們的目的是讓上一個異步任務(wù)完成以后才開始下一個異步任務(wù)，顯然這種方式做不到。
我們已經(jīng)讓Generator自動化了，但是在面對異步任務(wù)的時候，交還控制權(quán)的時機依然不對。
什么才是正確的時機呢？
在回調(diào)中交還控制權(quán)
哪個時間點表明某個異步任務(wù)已經(jīng)完成？當然是在回調(diào)中咯。
我們來拆解一下思路。
首先我們要把異步任務(wù)的其他參數(shù)和回調(diào)參數(shù)拆分開來，因為我們需要多帶帶在回調(diào)中扣一下扳機。
然后yieldasyncTask()的返回值得是一個函數(shù)，它接受異步任務(wù)的回調(diào)作為參數(shù)。因為Generator只有yield的返回值是暴露在外面的，方便我們控制。
最后在回調(diào)中移動指針。
functionthunkify(fn){
return(...args)=>{
return(done)=>{
args.push(done);
fn(...args);
}
}
}
這就是把異步任務(wù)的其他參數(shù)和回調(diào)參數(shù)拆分開來的法寶。是不是很簡單？它通過兩層閉包將原過程變成三次函數(shù)調(diào)用，第一次傳入原函數(shù)，第二次傳入回調(diào)之前的參數(shù)，第三次傳入回調(diào)，并在最里一層閉包中又把參數(shù)整合起來傳入原函數(shù)。
是的，這就是大名鼎鼎的thunkify。
以下是暖男版。
functionthunkify(fn){
return(...args)=>{
return(done)=>{
letcalled=false;
args.push((...innerArgs)=>{
if(called)return;
called=true;
done(...innerArgs);
});
try{
fn(...args);
}catch(err){
done(err);
}
}
}
}
寶刀已經(jīng)有了，咱們?nèi)ネ例埌伞?/p>
constfs=require("fs");
constthunkify=require("./thunkify");
constreadFileThunk=thunkify(fs.readFile);
function*gen(){
constvalueA=yieldreadFileThunk("/Users/veedrin/a.md");
console.log("a.md的內(nèi)容是：
",valueA.toString());
constvalueB=yieldreadFileThunk("/Users/veedrin/b.md");
console.log("b.md的內(nèi)容是：
",valueB.toString());
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/6788.html
