es6 队列_ES6 Promise个人理解
本文所有JS执行结果基于Chrome浏览器83.0.4103.61版本得出，如果在其他浏览器上出现不同执行结果，那不关我事
Promise的用法示范
var p = new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/');
xhr.onreadystatechange = function() {
if (xhr.readyState === xhr.DONE)
if (xhr.status === 200)
resolve(xhr);
else
reject();
};
xhr.onerror = reject;
xhr.send();
});
p.then((xhr) => {
console.log(xhr);
return xhr.response;
}).then((resp) => {
console.log(resp);
}).catch(() => {
console.error('Failed');
}).finally(() => {
console.log('Done');
});
Promise类的构造函数的参数被称为Resolver(也叫executor)，用于定义具体的异步操作，Promise对象会向Resolver函数传入resolve与reject两个参数，用于在异步操作执行成功与失败时调用。
resolve与reject两个函数都可以接受一个参数以供Promise对象后续使用。
当Resolver执行过程中出现异常时，Promise对象会自动调用reject函数。
Promise对象的状态
pending：
从Promise对象初始化到resolve或reject被调用之前，Promise对象会处于此状态。
resolved(fulfilled)：
当Resolver中调用了resolve函数时，Promise会进入此状态并执行相应后续操作。
rejected：
当Resolver中调用了reject函数时，Promise会进入此状态并执行相应后续操作。
Promise对象的方法
then(onresolved, onrejected)：
then是Promise对象的一个核心方法，用于定义异步操作的后续操作。
当Promise对象进入resolved状态时，它会执行onresolved参数所定义的函数。
当Promise对象进入rejected状态时，它会执行onrejected参数所定义的函数。
onresolved与onrejected两个函数都可以接受一个参数，这个参数对应Resolver向resolve与reject函数传入的参数
catch(onrejected):
catch是then的一个简写，调用catch(onrejected)等同于调用then(null, onrejected)
finally(onfinally):
finally是无论Promise对象是resolved状态还是rejected状态，都会去调用onfinally，约等于then(onfinally, onfinally)，与then的区别在于onfinally不会接收参数，onfinally的return也不会传递给后面的then
等等，finally后面的then是什么鬼？
其实finally之后依然可以then、catch、finally，写起来就变成了p.finally(...).then(...).then(...)……怎么想都很奇怪，而且finally后面的then获取的参数是finally之前的返回值
Promise核心部分
上面的东西估计随便搜一下Promise就能搜着，下面的这些则是我在ES5中造轮子写Promise时研究出的一些东西。
1.
Resolver会在Promise构造函数中直接执行
验证代码：
new Promise(() => console.log(1));
console.log(2);
结果：
1
2
2.
Promise对象的链式调用then与finally返回的并不是this，而是一个根据其参数生成的新Promise对象
这些对象以单向链表的形式连接，最终会形成一棵树
后面称由then与finally生成的对象为“子对象”，被调用的对象为“主对象”，其中then的两个参数称为“状态函数”，finally方法的参数不属于状态函数
子对象刚创建时是pending状态
验证then返回不同Promise对象：
var p = new Promise(r => r());
var pp = p.then(() => {
console.log(p);
console.log(pp);
console.log(p===pp);
});
结果：
Promise {: undefined}
Promise {}
false
3.
Resolver中的参数resolve与reject一共只能调用一次，因为只有Promise对象是在pending状态时，resolve与reject才能修改Promise对象的状态与值，而只有在Promise对象的状态发生改变时，主对象才会开始调用子对象的状态函数
验证代码：
var funcs = {};
var p = new Promise((resolve, reject) => {
funcs.resolve = resolve;
funcs.reject = reject;
});
p.then(()=>console.log('res'), ()=>console.log('rej'));
console.log(p);
funcs.resolve(1);
console.log(p);
funcs.reject(2);
console.log(p);
结果
Promise {}
Promise {: 1}
Promise {: 1}
res
4.
上面的结果显示console.log('res')晚于代码中的最后一句console.log(p)执行，其实Promise与setTimeout类似，会把主对象调用子对象状态函数的过程推迟到空闲时执行，防止主线程里一堆then、finally还没执行完，甚至可能构造函数都还没执行完就开始调用子对象的情况出现
虽然上面说与setTimeout类似，但主对象调用子对象的过程永远早于同一时刻所有的setTimeout，推测setInterval也是同理
所以可以把Promise.resolve(value).then(handle)当作最高优先级的setTimeout(handle, 0, value)来使用
注：
Promise.resolve(value)可以理解为new Promise(resolve => resolve(value));
Promise.reject(value)可以理解为new Promise((resolve, reject) => reject(value));
验证代码：
setTimeout(console.log, 0, 0);
new Promise(r => r()).then(z=>console.log(1));
Promise.resolve().then(z=>console.log(2));
setTimeout(console.log, 0, 4);
console.log(5);
结果
5
1
2
0
4
5.
当子对象拥有主对象状态对应的状态函数时，主对象会直接调用此状态函数，如果成功执行，子对象状态变为resolved，值为状态函数返回值；如果抛出异常，子对象状态变为rejected，值为异常对象
如果子对象没有主对象状态对应的状态函数，则会直接继承主对象的状态与值，交由更后面的子对象处理
如果最后一个子对象执行后依然是rejected状态，浏览器会抛出带有(in promise)字样的异常
验证代码：
var p = Promise.reject(1);
var pp = p.then(()=>console.log(pp)).then(()=>console.log(pp));
pp.finally(()=>console.log(pp));
结果：
Promise {: 1}
Promise {: 1}
Uncaught (in promise) 1
验证代码：
var p = Promise.resolve(1);
var pp = p.catch(()=>console.log(pp)).catch(()=>console.log(pp));
pp.finally(()=>console.log(pp));
结果：
Promise {: 1}
Promise {: 1}
6.
为防止抛出异常干扰其他Promise对象执行，浏览器会把异常留到最后抛出
验证代码：
var p = Promise.reject();
p.then(()=>console.log(1));
p.catch(()=>console.log(2)).then(()=>console.log(3)).then(()=>console.log(4));
结果：
2
3
4
Uncaught (in promise) undefined
7.
主对象使得子对象的状态发生了改变之后，子对象也会开始准备调用其自身的子对象，同样地，它会被推迟到空闲时执行
如果把Promise对象极其子对象们构成的树看成一个单向图，会发现它的执行顺序与广度优先搜索算法BFS是一致的
验证代码：
var p = Promise.resolve();
p.then(() => {console.log(1);}).then(() => {console.log(2);});
p.then(() => {console.log(3);}).then(() => {console.log(4);});
结果：
1
3
2
4
这里需要来个难理解一点的例子加深一下记忆：
var x = function() {
var xp = Promise.resolve();
xp.then(() => {console.log(1);}).then(() => {console.log(2);});
xp.then(() => {console.log(3);}).then(() => {console.log(4);});
}
var p = Promise.resolve();
p.then(x).then(() => {console.log(5);});
p.then(() => {console.log(6);}).then(() => {console.log(7);});
它的结果为：
6
1
3
5
7
2
4
如果最后两句对调，变成这样：
var x = function() {
var xp = Promise.resolve();
xp.then(() => {console.log(1);}).then(() => {console.log(2);});
xp.then(() => {console.log(3);}).then(() => {console.log(4);});
}
var p = Promise.resolve();
p.then(() => {console.log(6);}).then(() => {console.log(7);});
p.then(x).then(() => {console.log(5);});
结果为：
6
7
1
3
5
2
4
为什么是这个顺序？请先自己思考一下。
解析：
设有这么个队列，它决定了下次要调用子对象状态函数的Promise对象，就叫它“执行队列”好了
再设执行队列中所有对象的子对象按顺序可组成一个新的队列，就叫它“子对象队列”吧
第一个例子：
第一次推迟：
刚一开始，执行队列如下：
[p]
子对象队列如下：
[then(x), then(log(6))]
开始依次执行子对象队列中对象的相应状态函数
then(x)调用了x，x执行时创建了xp，xp是resolved状态，进入执行队列
x 执行结束后，then(x)自身进入执行队列
then(log(6))输出了6，自身进入执行队列
第二次推迟：
执行队列：
[xp, then(x), then(log(6))]
子对象队列：
[then(log(1)), then(log(3)), then(log(5)), then(log(7))]
依次输出了1、3、5、7，子对象队列中的对象依次进入执行队列
第三次推迟：
执行队列：
[then(log(1)), then(log(3)), then(log(5)), then(log(7))]
子对象队列：
[then(log(2)), then(log(4))]
依次输出2、4，子对象队列中的对象依次进入执行队列
第四次推迟：
执行队列：
[then(log(2)), then(log(4))]
子对象队列是空的，执行个锤子
第二个例子也就换换顺序，不分析了
8.
如果状态函数返回一个Promise对象，那么状态函数所在的Promise对象的所有子对象都会转移至返回的对象上
验证代码：
Promise.resolve().then(() => {
console.time('Promise');
}).then(() => {
return new Promise(r => setTimeout(r, 1000, 123123));
}).then(v => {
console.timeEnd('Promise');
console.log(v);
});
结果：
Promise: 1000.989990234375ms
123123
End