而当我在第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());
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/6788.html
