A promise represents the eventual result of an asynchronous operation.
How Use?
The primary way of interacting with a promise is through its then method, which registers callbacks to receive either a promise's eventual value or the reason why the promise cannot be fulfilled.
sample
new Promise((resolve, reject) => {
let a = 1
setTimeout(() => {
if(a === 1){
resolve('resolve')
}else{
reject('reject')
}
}, 1000)
}).then((value)=>{
console.log(value)
},(err)=>{
console.log(err)
})Why Promise?
在promise还没有出现的时候，在进行异步操作的时候，最常用的方式使用回调函数。但是使用回调函数，会造成回调函数层层嵌套。使得代码不易阅读以及不够优雅。但是如果使用promise之后，可以进行链式调用。代码如下:
// 回调写法
asyncFunc1(opt, (...args1) => {
asyncFunc2(opt, (...args2) => {
asyncFunc3(opt, (...args3) => {
asyncFunc4(opt, (...args4) => {
// some operation
});
});
});
});
// promise 写法
new Promise((resolve, reject) => {
resolve(value)
}).then((value1) => asyncFunc1()).then((value2) => asyncFun2()).then((value3) => asyncFunc3()).then((value4) => asyncFunc4())这样看上去,promise链式调用的写法是比回调函数写法更好一些。
在刚开始使用promise到现在，一直有几个问题困扰着我，趁着这几天有空，带着问题出发，看下源码是怎么实现的。
1 为什么说promise是立刻执行的对象？
2 promise中发生异常时，是如何被捕获到的？
3 promise如何根据状态不同调用不同的回调函数？
4 promise中的then是如何实现链式调用的？
本文只分析core.js文件，只关心作者自身想探究的问题，其他细节问题没有阐述，请见谅。代码来自 github:then/promise
先解决第一个问题，promise如何立即执行，当然是直接进到promise的构造函数里面去。
function Promise(fn) {
if (typeof this !== 'object') {
throw new TypeError('Promises must be constructed via new');
}
if (typeof fn !== 'function') {
throw new TypeError('Promise constructor\'s argument is not a function');
}
this._deferredState = 0;
this._state = 0; // 当前状态
this._value = null; // resolve 返回的结果
this._deferreds = null;
if (fn === noop) return;
doResolve(fn, this);
}
/**
* Take a potentially misbehaving resolver function and make sure
* onFulfilled and onRejected are only called once.
*
* Makes no guarantees about asynchrony.
*/
function doResolve(fn, promise) {
var done = false;
var res = tryCallTwo(fn, function (value) {
if (done) return;
done = true;
resolve(promise, value);
}, function (reason) {
if (done) return;
done = true;
reject(promise, reason);
});
if (!done && res === IS_ERROR) {
done = true;
reject(promise, LAST_ERROR);
}
}
function tryCallTwo(fn, a, b) {
try {
fn(a, b);
} catch (ex) {
LAST_ERROR = ex;
return IS_ERROR;
}
}
var LAST_ERROR = null; //存储的是最后的异常
var IS_ERROR = {}; //表示不成功，包括程序异常或者reject状态以上有三个方法，过程是这样子的。调用Promise的构造函数，中间除了做一些状态属性声明，初始化和对参数的判断外，最后会调用doResolve方法。这里又调用了tryCallTwo方法，将promise内部定义的resolve和reject作为参数，传给了fn执行。 所以说Promise是立即执行的，问题1得到了验证
在tryCallTwo函数体中，使用了try catch 捕获了异常，并且返回了ISERROR,表示发生了异常。然后通过判断当前异步函数执行结果是否为ISERROR，来执行reject函数。 举个例子：
new Promise((resolve, reject) => {
throw new Error()
}).then((value)=>{
console.log(value)
},(err)=>{
console.log('error')
})
// 输出结果是errorpromise在内部发生异常的时候，是通过try catch捕获到之后通过返回异常状态，最后调用reject函数，得到了问题2的答案。
说到promise里面的状态，其中有四种状态
// 0 pending
// 1 - fulfilled with _value
// 2 - rejected with _value
// 3 - adopted the state of another promise, _value
// 其中3 表示的是state传给下一个promise那接下去看下resolve 和 reject 两个函数。
function resolve(self, newValue) {
// Promise Resolution Procedure: https://github.com/promises-aplus/promises-spec#the-promise-resolution-procedure
if (newValue === self) {
return reject(
self,
new TypeError('A promise cannot be resolved with itself.')
);
}
if (
newValue &&
(typeof newValue === 'object' || typeof newValue === 'function')
) {
var then = getThen(newValue);
if (then === IS_ERROR) {
return reject(self, LAST_ERROR);
}
if (
then === self.then &&
newValue instanceof Promise
) {
self._state = 3;
self._value = newValue;
finale(self);
return;
} else if (typeof then === 'function') {
doResolve(then.bind(newValue), self);
return;
}
}
self._state = 1;
self._value = newValue;
finale(self);
}
function reject(self, newValue) {
self._state = 2;
self._value = newValue;
if (Promise._onReject) {
Promise._onReject(self, newValue);
}
finale(self);
}resolve方法主要对传入的newValue进行了判断。分别为newValue和promise本身相等，newValue为object或者function类型，newValue是另一个Promise对象和newValue为普通数据类型四种状态。函数细节不细看。主要看当newValue为普通数据类型的时候。将state赋值为1，value赋值为参数newValue.同时调用了finale函数。接下去看finale函数。为了节约篇章，这里reject就不再多说了。
function finale(self) {
if (self._deferredState === 1) {
handle(self, self._deferreds);
self._deferreds = null;
}
if (self._deferredState === 2) {
for (var i = 0; i < self._deferreds.length; i++) {
handle(self, self._deferreds[i]);
}
self._deferreds = null;
}
}
function handle(self, deferred) {
while (self._state === 3) {
self = self._value;
}
if (Promise._onHandle) {
Promise._onHandle(self);
}
if (self._state === 0) {
if (self._deferredState === 0) {
self._deferredState = 1;
self._deferreds = deferred;
return;
}
if (self._deferredState === 1) {
self._deferredState = 2;
self._deferreds = [self._deferreds, deferred];
return;
}
self._deferreds.push(deferred);
return;
}
handleResolved(self, deferred);
}在finale函数内部对deferredState进行了判断。但是在handle函数里面我们发现，对state为0的时候，会有赋值操作，但是到finale这个函数为止，并没有对deferredState有修改值的操作，deferredState仍然为0.所以，过程就在finale中止了。这样，new Promise过程就结束了，最后结果好像仅仅是对value和state进行了赋值操作。
虽然知道了state和value改变了，但是我们还不知道改变了_state有什么用。我们暂且先把这个问题放下，去看看其他没看到的代码。首先找到then方法,是一个定义在原型上面的方法。
Promise.prototype.then = function(onFulfilled, onRejected) {
if (this.constructor !== Promise) {
return safeThen(this, onFulfilled, onRejected);
}
var res = new Promise(noop);
handle(this, new Handler(onFulfilled, onRejected, res));
return res;
};then函数调用到了handle函数，这个就是之前被中断掉的函数。神奇诶，又回到了之前断掉的函数。这里把定义在then函数里面的两个回调传给了handle函数。在handle函数里面，最后执行了handleResolved函数。来看看handleResolved函数
function handleResolved(self, deferred) {
asap(function() {
var cb = self._state === 1 ? deferred.onFulfilled : deferred.onRejected;
if (cb === null) {
if (self._state === 1) {
resolve(deferred.promise, self._value);
} else {
reject(deferred.promise, self._value);
}
return;
}
var ret = tryCallOne(cb, self._value);
if (ret === IS_ERROR) {
reject(deferred.promise, LAST_ERROR);
} else {
resolve(deferred.promise, ret);
}
});
}
function tryCallOne(fn, a) {
try {
return fn(a);
} catch (ex) {
LAST_ERROR = ex;
return IS_ERROR;
}
}handleResolved函数里面做了件什么事情呢？根据state状态，去拿到resolved或者rejected状态的回调函数。如果回调函数没有定义的话，则把原来的promise和value传给resolve或者reject函数。但是如果定义了回调函数的话，将promise和_value传给回调函数执行。将执行的结果作为参数传给resolve函数。这样，就产生了与之前一样的流程。诶，这好像就是我们要找的链式？
回顾一下
在new Promise过程中
1 doResolve
2 resolve || reject // 更改value和state
3 finale // 中断
如果这个时候promise有调用then方法的话
4 handle
5 handleResolved
6 resolve || reject
7 finale // 中断
如果这个时候then后面还有then的话，则继续上面的4,5,6,7步操作。因为then返回的是一个promise对象。所以后面可以继续then方法。
上面的流程，可以看到promise的链式调用了。找到了问题4的答案
同时，在resolve里面变更后的state在handleResolved函数里面用到了。用于调用不同的回调函数。也找到了问题3的答案。
