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