我们先用Promise实现一个简单的功能，输入一个数字n，n秒后打印这个n，代码如下：
let logn = function(n) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(n)
}, n * 1000)
})
}
logn(1).then(res => {
console.log(res)
})
分析下代码结构，不难发现：
1：Promise是一个构造函数，它接收一个函数fn作为入参
2：fn有两个参数：回调函数resolve、回调函数reject，resolve接收成功后的数据
3：Promise的实例有个then方法，这个方法接收一个回调函数cb
我们初步判断Promie函数大概结构如下：
// MyPromise是构造函数，所以要大写开头
let MyPromise = function(fn) {// 接收一个fn作为参数
// 定义一下fn的回调函数resolve，resolve接收success信息
let resolve = function(res) {
}
// 定义一下fn的回调函数reject，reject接收err信息
let reject = function(err) {
}
// 给实例添加一个then方法，且这个方法接收一个回调函数cb
this.then = function(cb) {
}
}
接下来分析下几个函数是怎么跑的，经过仔细分析得出如下结论：
// 5个函数执行顺序如下
1：new Promise(fn) // 实例化logn
2：fn(resolve, reject) // 设置setTimeout
3：then(cb) // 接收成功回调cb
4：resolve(res) or reject(err) // 调用cb
更新一下MyPromise：
let MyPromise = function(fn) {
// 1、先实例化logn
let resolve = function(res) {
// 4、执行成功的回调函数cb，并把res传递进去
this.success(res)
}
let reject = function(err) {
}
this.then = function(cb) {
// 3、接收成功的回调函数cb
this.success = cb
}
// 2、执行fn，设置setTimeout
fn(resolve, reject)
}
我们把Promise换成MyPromise试一下：
let logn = function(n) {
return new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve(n)
}, n * 1000)
})
}
logn(1).then(res => {
console.log(res)
})
执行代码发现控制台报错了：this.success is not a function。因为resolve是定时器中的函数，this默认指向window。所以修改下代码，给resolve函数bind一下this，并执行下MyPromise，发现1秒后打印了1
let MyPromise = function(fn) {
let resolve = function(res) {
this.success(res)
}
let reject = function(err) {
}
this.then = function(cb) {
this.success = cb
}
fn(resolve.bind(this), reject.bind(this))
}
let logn = function(n) {
return new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve(n)
}, n * 1000)
})
}
logn(1).then(res => {
console.log(res)
})
我们发现MyPromise只处理了resolve函数，没有处理reject函数。为了测试reject，所以我们改变一下需求，传一个0 - 10之间的随机整数n，如果n小于5，1秒后打印'成功'，否则打印'失败'：
let MyPromise = function(fn) {
let resolve = function(res) {
this.success(res)
}
// copy一下resolve
let reject = function(err) {
this.error(err)
}
this.then = function(cb) {
this.success = cb
}
// copy一下this.then
this.catch = function(cb) {
this.error = cb
}
fn(resolve.bind(this), reject.bind(this))
}
let logn = function(n) {
return new MyPromise((resolve, reject) => {
setTimeout(() => {
if(n < 5) {
resolve('成功')
}else{
reject('失败')
}
}, 1000)
})
}
let n = (Math.random() * 10).toFixed(0)
logn(n).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
执行发现又报错了：Cannot read property 'catch' of undefined。因为then和catch都没有return数据，联系到函数的链式编程，我们加一个return this，再执行一下，发现成功实现了catch：
let MyPromise = function(fn) {
let resolve = function(res) {
this.success(res)
}
let reject = function(err) {
this.error(err)
}
this.then = function(cb) {
this.success = cb
return this
}
this.catch = function(cb) {
this.error = cb
return this
}
fn(resolve.bind(this), reject.bind(this))
}
let logn = function(n) {
return new MyPromise((resolve, reject) => {
setTimeout(() => {
if(n < 5) {
resolve('成功')
}else{
reject('失败')
}
}, 1000)
})
}
let n = (Math.random() * 10).toFixed(0)
logn(n).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
