最简实现可以异步链式调用的Promise

在面试的时候，经常会有面试官让你实现一个Promise，如果参照A+规范来实现的话，可能面到天黑都结束不了。
说到Promise，我们首先想到的最核心的功能就是异步链式调用，本篇文章就带你用20行代码实现一个可以异步链式调用的Promise。
这个Promise的实现不考虑任何异常情况，只考虑代码最简短，从而便于读者理解核心的异步链式调用原理。
代码
先给代码吧，真就20行。
function Promise(excutor) {
var self = this
self.onResolvedCallback = []
function resolve(value) {
self.data = value
self.onResolvedCallback.forEach(callback => callback(value))
}
excutor(resolve.bind(self))
}
Promise.prototype.then = function(onResolved) {
var self = this
return new Promise(resolve => {
self.onResolvedCallback.push(function() {
var result = onResolved(self.data)
if (result instanceof Promise) {
result.then(resolve)
} else {
resolve(result)
}
})
})
}
复制代码核心案例
new Promise(resolve => {
setTimeout(() => {
resolve(1)
}, 500)
})
.then(res => {
console.log(res)
return new Promise(resolve => {
setTimeout(() => {
resolve(2)
}, 500)
})
})
.then(console.log)
复制代码本文将围绕这个最核心的案例来讲，这段代码的表现如下：

500ms后输出1
500ms后输出2

实现
构造函数
首先来实现Promise构造函数
function Promise(excutor) {
var self = this
self.onResolvedCallback = [] // Promise resolve时的回调函数集

// 传递给Promise处理函数的resolve
// 这里直接往实例上挂个data 然后把onResolvedCallback数组里的函数依次执行一遍就可以
function resolve(value) {
self.data = value
self.onResolvedCallback.forEach(callback => callback(value))
}

// 执行用户传入的函数
excutor(resolve.bind(self))
}
复制代码好，写到这里先回过头来看案例
const excutor = resolve => {
setTimeout(() => {
resolve(1)
}, 500)
}

new Promise(excutor)
复制代码分开来看，excutor就是用户传入的一个形参为resolve的函数，这个函数内部只是把promise实例上的onResolvedCallback执行一遍。
到此为止我们还不知道onResolvedCallback这个数组里的函数是从哪里来的，接着往下看。
then
这里是最重要的then实现，链式调用全靠它：
Promise.prototype.then = function(onResolved) {
// 保存上下文，哪个promise调用的then，就指向哪个promise。
var self = this

// 一定要返回一个新的promise
// promise2
return new Promise(resolve => {
self.onResolvedCallback.push(function() {
var result = onResolved(self.data)
if (result instanceof Promise) {
// resolve的权力被交给了user promise
result.then(resolve)
} else {
resolve(result)
}
})
})
}
复制代码再回到案例里
var excutor = resolve => {
setTimeout(() => {
resolve(1)
}, 500)
}

var promise1 = new Promise(excutor)

promise1.then(res => {
console.log(res)
// user promise
return new Promise(resolve => {
setTimeout(() => {
resolve(2)
}, 500)
})
})
复制代码注意这里的命名：

我们把Promise构造函数返回的实例叫做promise1，

在then的实现中，我们构造了一个新的promise返回，叫它promise2

在用户调用then方法的时候，用户手动构造了一个promise用来做异步的操作，叫它user promise

那么在then的实现中，self其实就指向promise1
而promise2的excutor中，立刻执行了一个函数，它往promise1的onResolvedCallback数组中push了一个函数，
那么重点看这个push的函数，注意，这个函数在promise1被resolve了以后才会执行。
self.onResolvedCallback.push(function() {
// onResolved就对应then传入的函数
var result = onResolved(self.data)
// 例子中的情况 返回了一个promise3
if (result instanceof Promise) {
// 那么直接把promise2的resolve决定权交给了user promise
result.then(resolve)
} else {
resolve(result)
}
})
复制代码如果用户传入给then的onResolved方法返回的是个promise，那么这个user promise里拿到的参数resolve，其实就代表了内部promise2的resolve，
所以这就可以做到：user promise被resolve以后，接下来的then函数才会继续执行，
new Promise(resolve => {
setTimeout(() => {
// resolve1
resolve(1)
}, 500)
})
// then1
.then(res => {
console.log(res)
return new Promise(resolve => {
setTimeout(() => {
// resolve2
resolve(2)
}, 500)
})
})
// then2
.then(console.log)
复制代码then1其实进入了promise1的回调数组里，所以resolve1执行完毕后，then1才会执行
then2其实进入了promise2的回调数组里，又因为我们刚刚知道，resolve2正是promise2的resolve方法，
所以resolve2执行完毕后, then2才会执行，这就实现了异步的链式调用。