Promise详解
异步流程的发展过程
0.之前处理异步流程最常用的就是回调，它的好处是非常容易理解，事件1执行完之后，成功执行事件1的回调，即开始事件2的执行，但是缺点是特别容易造成回调地狱，代码难以维护。
1. 随后Promise出现了，它是抽象异步处理对象以及对其各种操作的组件
2. 其后出现了generator函数，用*修饰函数搭配yield的语法，搭配co（自动执行完迭代器方法）会更方便快捷
3. 随着时代的发展，技术的日益更新，出现了优雅的写法，采用async+await的写法，内部其实是generator函数的实现，异步代码实现同步执行的功能。
Promise的使用
Promise表示一个异步操作的最终结果，顾名思义，是一种'承诺'，传入Promise的是一个函数，有两个参数，一个是resolve方法，一个是reject方法，当耗时操作成功返回数据时执行resolve方法，返回数据失败事调用reject方法，之后通过then方法接着进一步处理数据
let p1 = new Promise(function(resolve, reject){
setTimeout(function(){
resolve(100);
}, 1000);
});
let p2 = p1.then(function(data){
return new Promise(function(resolve, reject) {
setTimeout(() => {
resolve(new Promise(function(resolve, reject){
setTimeout(() => {
resolve(data + 100);
}, 1000);
}));
}, 1000)
})
}, function(err) {
console.log('error', err);
});
p2.then(function(data) {
console.log('p2成功', data);
},function(err){
console.log('p2失败', err);
});
Promise源码详解
Promise状态
一个Promise必须处在3种状态之一，pending，fullfilled或rejected
1. pending:当处在pending状态时，可转向fullfilled或rejected状态
2.fullfilled:当处在fullfilled状态时，不能转向任何一种状态，即不可变且必须有值，并且不能够改变
3.rejected:当处在rejected状态时，不能转向任何一种状态且必须有个原因，不能够改变
then方法
Promise的then方法接收2个参数，一个是onFulfilled,一个是onRejected,onFulfilled和onRejected都是可选的参数，若onFulfilled或者onRejected不是函数，则直接忽略返回。
若promise的状态为pending，内部返回一个promise实例，并把成功态执行的回调函数保存在一个成功态的数组里，失败态的执行的回调函数保存在另一个失败态数组里。
若promise的状态为fullfilled，内部返回一个promise实例，并把执行结果赋给成功态执行函数，
若promise的状态为rejected，内部返回一个promise实例，并把失败的原因赋给失败态执行函数
Promise.prototype.then = function(onFulfilled, onRejected) {
onFulfilled = typeof onFulfilled == 'function' ? onFulfilled : function(value) {return value};
onRejected = typeof onRejected == 'function' ? onRejected : function(reason) {return reason};
let self = this;
let promise2;
if (self.status == FULFILLED) {
return promise2 = new Promise(function(resolve, reject){
setTimeout(function(){
try {
let x = onFulfilled(self.value);
resolvePromise(promise2, x, resolve, reject);
} catch(e) {
reject(e);
}
})
});
}
if (self.status == REJECTED) {
return promise2 = new Promise(function(resolve, reject){
setTimeout(function(){
try {
let x = onRejected(self.value);
resolvePromise(promise2, x, resolve, reject);
} catch(e) {
reject(e);
}
})
});
}
if (self.status == PENDING) {
return promise2 = new Promise(function(resolve, reject){
self.onResolvedCallbacks.push(function(){
try {
let x = onFulfilled(self.value);
resolvePromise(promise2, x, resolve, reject);
} catch(e) {
reject(e);
}
});
self.onRejectedCallbacks.push(function(){
try {
let x = onRejected(self.value);
resolvePromise(promise2, x, resolve, reject);
} catch(e) {
reject(e);
}
})
});
}
}
Promise解析过程
promise解析过程是以一个promise和一个值作为参数的抽象过程.可表示为resolve(promise, x),
若promise与x的值相等使用TypeError将循环引用作为原因将promise拒绝。
若x是一个promise的实例，x的状态为pending，就调用then方法继续解析promise的实例x，否则的话调用resolve方法或reject方法。
若x是一个对象，直接调用resolve方法fullfill promise。
若x是一个函数，继续解析，若失败，就以原因拒绝。
若x既不是对象也不是函数，则以x为值fullfill promise。
function resolvePromise(promise2, x, resolve, reject){
if (promise2 === x) {
return reject(new TypeError('循环引用'));
}
let called = false;
if (x instanceof Promise) {
if (x.status == PENDING) {
x.then(function(y){
resolvePromise(promise2, y, resolve, reject);
}, reject);
} else {
x.then(resolve, reject);
}
} else if (x != null && ((typeof x == 'object') || (typeof x == 'function'))) {
try {
let then = x.then;
if (typeof then == 'function') {
then.call(x,function(y){
if (called) return;
called = true;
resolvePromise(promise2, y, resolve, reject);
}, function(err){
if (called) return;
called = true;
reject(err);
});
} else {
resolve(x);
}
} catch(e) {
if (called) return;
called = true;
reject(e);
}
} else {
resolve(x);
}
}
Promise的API
1. Promise.all
生成并返回一个新的Promise对象，参数为一个个promise实例组成的数组，返回结果为一个个promise实例成功执行的数据组成的数组。
注：参数传递的promise所有实例都变为resolve的时候，该方法才会返回，若其中任意一个promise实例返回reject，整个promise.all调用会立即终止，并返回一个reject的promise对象。
let p1 = Promise.resolve(1),
p2 = Promise.resolve(2),
p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function(results){
console.log(results); // [1, 2, 3]
})
2. Promise.race
生成并返回一个新的Promise对象
参数promise数组中的任何一个promise对象如果变成resolve或者reject，该函数就会返回，并使用这个promise对象的值进行resolve或reject。
let p1 = Promise.resolve(1),
p2 = Promise.resolve(2),
p3 = Promise.resolve(3);
Promise.race([p1, p2, p3]).then(function(value){
console.log(value); // 1
})