链式调用
上文有提到标准 Promise 的一些特性，接下来一起来实现 Promise 的链式调用。
来看看标准 Promise 的链式调用：
var fn = new Promise(function (resolve, reject) {
setTimeout(function() {
resolve('oook~')
}, 500)
})
fn.then(function(data) {
console.log('data-1: ', data)
return new Promise(function(resolve, reject) {
setTimeout(function() {
reject('不oook~')
}, 1000)
})
}, function(err) {
console.log('err-1: ', err)
})
.then(function(data) {
console.log('data-2:', data)
}, function(err) {
console.log('err-2: ', err)
})
.then(function(data) {
console.log('data-3:', data)
}, function(err) {
console.log('err-3: ', err)
})
特征如下：
- then 方法可以返回普通值，也可以返回一个 Promise 对象。
- 如果 then 方法返回的是一个 Promise 对象，则会根据这个 Promise 对象里执行的是 resolve 还是 reject 走后一个 then 方法的成功和失败回调（本例在第一个 then 里返回了一个 Promise 对象，并异步调用了 reject ，所以会输出 err-2: 不oook~）。
- 如果 then 方法返回的是一个普通值（无论走的成功还是失败），那么这个普通值就会被当做下一个 then 里成功回调函数的参数（上面例子最后打出 err-3: undefined 就是因为函数默认返回了普通值 undefined）。
根据以上特征，我们的 Promise 对象需要增加以下处理：
- 只有 Promise 对象才有 then 方法，所以我们的 then 方法要支持链式调用的话，需要返回一个新的 Promise 对象，并在这个对象里对要传递的值进行处理
- 由于 then 方法的返回值可能是一个普通值，也可能是一个新的 Promise 对象，Promise 对象里可能又是一个 Promise 对象，所以我们需要对这个返回值做一个统一的处理，本例用一个统一的方法 resolvePromise 来处理
代码如下：
Promise.prototype.then = function (onFulfilled, onRejected) {
var _this = this
// 定义一个promise2变量（别问我为什么这么命名，A+规范里就是这么命名的）
var promise2
if (_this.status === 'fulfilled') {
// 返回一个新的promise
promise2 = new Promise(function (resolve, reject) {
// A+ 规范规定，onFulfilled 和 onRejected 都需要异步执行，所以加上一个定时器
setTimeout(function() {
try {
// x可能是个普通值，也可能是个promise
var x = onFulfilled(_this.successVal)
// x也可能是第三方的 Promise 库，用一个函数统一来处理
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
})
});
}
if (_this.status === 'rejected') {
promise2 = new Promise(function (resolve, reject) {
setTimeout(function() {
try {
var x = onRejected(_this.failVal)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
})
})
}
// 当调用then时，如果是异步操作，就会处于pending状态
if (_this.status === 'pending') {
// 将成功的回调添加到数组中
promise2 = new Promise(function (resolve, reject) {
_this.onFulfilledList.push(function () {
// 可以看到，我们在每一个 resolve 和 reject 执行的地方都加上了异步
setTimeout(function() {
try {
var x = onFulfilled(_this.successVal)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
})
})
_this.onRejectedList.push(function () {
setTimeout(function() {
try {
var x = onRejected(_this.failVal)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
})
})
})
}
return promise2
}
function resolvePromise(p2, x, resolve, reject) {
// 不能返回自己
if (p2 === x) {
return reject(new TypeError('不能循环引用！'))
}
// 上一篇有说过，resolve 和 reject 不能同时执行，所以用一个锁来当开关
var called
// x返回的可能是对象和函数也可能是一个普通的值
if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
try {
var then = x.then
if (typeof then === 'function') {
then.call(x, function (y) {
// ------- resolve 和 reject 不能同时执行 -------
if (called) {
return
}
called = true
// 如果成功的话，y有可能也是个 promise，所以递归继续解析
resolvePromise(p2, y, resolve, reject)
}, function (e) {
// ------- resolve 和 reject 不能同时执行 -------
if (called) {
return
}
called = true
reject(e)
})
} else {
// 如果是普通值，直接返回成功
resolve(x)
}
} catch(e) {
if (called) {
return
}
called = true
reject(e)
}
} else {
resolve(x)
}
}
ok，链式调用的处理基本上就完成了，下面来看看效果：
var p = new Promise(function(resolve, reject){
setTimeout(function() {
resolve('完全ooooook~')
}, 500)
})
p.then(function (data) {
console.log('success1: ', data)
return new Promise(function(resolve, reject) {
setTimeout(function() {
reject('啊啊啊啊啊啊啊啊啊')
}, 1000)
})
}, function (err) {
console.log('failed: ', err)
})
.then(function (data) {
console.log('success2: ', data)
}, function(err) {
console.log('failed2: ', err)
})
结果如下：
结果完全ooooook啊啊啊啊啊啊
