这里我们先啰嗦一下Promise的概念：
什么是promise
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。
参考promiseA+规范总结:
我们知道promise中共有三种状态
pending 过渡态
fulfilled 完成态
rejected 失败态
promise状态改变只有两种可能 过渡态=>成功态
过渡态 => 失败态
过程不可逆 无法相互转化
这里来一发图片
let promise = new Promise((resolve, reject) => {
//这里放入我们要执行的函数，可能是同步，也可能是异步, 这里我们就来写一个异步的执行
setTimeout(() => {
resolve('hello');
})
})
promise.then(data => {
console.log(data);
}, err => {console.log(err)})
上面代码表示我们new一个promise实例，并异步执行 这里通过调用then方法，我们成功得到了结果
观察原生promise用法，我们可以发现，在new Promise时候传入了一个函数,这个函数在规范中的叫法是exector 执行器
看到这里，我们先有一个大概思路，构建一个自己的Promise构造函数
// 这里我们创建了一个构造函数 参数就是执行器
function Promise(exector) {
}
好的，第一步完成, 重点来了，这个Promise内部到底干了什么呢 可以看到，原生的exector中传入了两个参数，第一个参数执行会让promise状态变为resolve, 也就是成功， 第二个执行会让函数变为reject状态,也就是失败
并且这连个形参执行之后都可以传入参数，我们继续完善代码 我们将这两个形参的函数封装在构造函数内部
// 这里我们创建了一个构造函数 参数就是执行器
function Promise(exector) {
// 这里我们将value 成功时候的值 reason失败时候的值放入属性中
let self = this;
this.value = undefined;
this.reason = undefined;
// 成功执行
function resolve(value) {
self.value = value;
}
// 失败执行
function reject(reason) {
self.reason = reason;
}
exector(resolve, reject);
}
这里问题来了，我们知道，promise的执行过程是不可逆的，resolve和rejeact之间也不能相互转化， 这里，我们就需要加入一个状态，判断当前是否在pending过程，另外我们的执行器可能直接报错，这里我们也需要处理一下.
// 这里我们创建了一个构造函数 参数就是执行器
function Promise(exector) {
// 这里我们将value 成功时候的值 reason失败时候的值放入属性中
let self = this;
// 这里我们加入一个状态标识
this.status = 'pending';
this.value = undefined;
this.reason = undefined;
// 成功执行
function resolve(value) {
// 判断是否处于pending状态
if (self.status === 'pending') {
self.value = value;
// 这里我们执行之后需要更改状态
self.status = 'resolved';
}
}
// 失败执行
function reject(reason) {
// 判断是否处于pending状态
if (self.status === 'pending') {
self.reason = reason;
// 这里我们执行之后需要更改状态
self.status = 'rejected';
}
}
// 这里对异常进行处理
try {
exector(resolve, reject);
} catch(e) {
reject(e)
}
}
这里先留个小坑，一会我们回头来补上
好了，Promise基本就是这样，是不是很简单，这里我们先实现一个简易版，后面的功能会逐步添加进去，不要心急，继续往后看
new Promise之后我们怎么去改变promise对象的状态呢， 通过前面原生的用法我们了解到，需要使用then方法， then方法分别指定了resolved状态和rejeacted状态的回调函数
那怎么知道使用哪个回调函数呢，我们刚不是在构造函数内部定义了status么，这里就用上啦，上代码
// 我们将then方法添加到构造函数的原型上 参数分别为成功和失败的回调
Promise.prototype.then = function(onFulfilled, onRejected) {
// 获取下this
let self = this;
if (this.status === 'resolved') {
onFulfilled(self.value);
}
if (this.status === 'rejected') {
onRejected(self.reason);
}
}
ok,我们现在可以自己运行试试
let promise = new Promise((resolve, reject) => {
resolve("haha");
})
promise.then(data => {
console.log(data); //输出 haha
}, err=> {
console.log(err);
})
// 多次调用
promise.then(data => {
console.log(data); //输出 haha
}, err=> {
console.log(err);
})
上面可以注意到， new Promise中的改变状态操作我们使用的是同步，那如果是异步呢，我们平时遇到的基本都是异步操作，该如何解决？
这里我们需要在构造函数中存放两个数组，分别保存成功回调和失败的回调
因为可以then多次，所以需要将这些函数放在数组中
代码如下：
// 这里我们创建了一个构造函数 参数就是执行器
function Promise(exector) {
// 这里我们将value 成功时候的值 reason失败时候的值放入属性中
let self = this;
// 这里我们加入一个状态标识
this.status = 'pending';
this.value = undefined;
this.reason = undefined;
// 存储then中成功的回调函数
this.onResolvedCallbacks = [];
// 存储then中失败的回调函数
this.onRejectedCallbacks = [];
// 成功执行
function resolve(value) {
// 判断是否处于pending状态
if (self.status === 'pending') {
self.value = value;
// 这里我们执行之后需要更改状态
self.status = 'resolved';
// 成功之后遍历then中成功的所有回调函数
self.onResolvedCallbacks.forEach(fn => fn());
}
}
// 失败执行
function reject(reason) {
// 判断是否处于pending状态
if (self.status === 'pending') {
self.reason = reason;
// 这里我们执行之后需要更改状态
self.status = 'rejected';
// 成功之后遍历then中失败的所有回调函数
self.onRejectedCallbacks.forEach(fn => fn());
}
}
// 这里对异常进行处理
try {
exector(resolve, reject);
} catch(e) {
reject(e)
}
}
// then 改造
Promise.prototype.then = function(onFulfilled, onRejected) {
// 获取下this
let self = this;
if (this.status === 'resolved') {
onFulfulled(self.value);
}
if (this.status === 'rejected') {
onRejected(self.reason);
}
// 如果异步执行则位pending状态
if(this.status === 'pending') {
// 保存回调函数
this.onResolvedCallbacks.push(() => {
onFulfilled(self.value);
})
this.onRejectedCallbacks.push(() => {
onRejected(self.reason)
});
}
}
// 这里我们可以再次实验
let promise = new Promise((resolve, reject) => {
setTimeout(() => {
if(Math.random() > 0.5) {
resolve('成功');
} else {
reject('失败');
}
})
})
promise.then((data) => {
console.log('success' + data);
}, (err) => {
console.log('err' + err);
})
这里要开始重点了，千万不要错过，通过以上代码，我们实现了一个简易版的promise，说简易版是因为我们的then方法只能调用一次，并没有实现原生promise中的链式调用。
那链式调用是如何实现的呢？
这里我们需要回顾下promiseA+规范，通过查看规范和阮一峰的es6讲解可以了解到
then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。
这里我们看一段原生promise代码
getJSON("/posts.json").then(function(json) {
return json.post;
}).then(function(post) {
// ...
});
上面的代码使用then方法，依次指定了两个回调函数。
第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。
采用链式的then，可以指定一组按照次序调用的回调函数。这时，前一个回调函数，有可能返回的还是一个Promise对象（即有异步操作），这时后一个回调函数，就会等待该Promise对象的状态发生变化，才会被调用。
后续更新中...