es6中promise的实现及原理

简介

Promise 对象用于延迟(deferred) 计算和异步(asynchronous )计算。一个Promise对象代表着一个还未完成，但预期将来会完成的操作。Promise 对象是一个返回值的代理，这个返回值在promise对象创建时未必已知。它允许你为异步操作的成功或失败指定处理方法。这使得异步方法可以像同步方法那样返回值：异步方法会返回一个包含了原返回值的 promise 对象来替代原返回值。

解决了什么问题及怎么使用

// 一个简单的示例 执行一个动画A，执行完之后再去执行另一个动画B
setTimeout(function(){
    //A动画
    console.log('A'); setTimeout(function() { //B动画 console.log('B'); },300) },300); // 这里只有两个动画，如果有更多呢，就会看到一堆函数缩进

不难想象，如果依次有很多个动画，就会出现多重嵌套。代码不是纵向发展，而是横向发展，很快就会乱成一团，无法管理。

因为多个异步操作形成了强耦合，只要有一个操作需要修改，它的上层回调函数和下层回调函数，可能都要跟着修改。这种情况就称为回调函数地狱“（callback hell）。

Promise 对象就是为了解决这个问题而提出的。它不是新的语法功能，而是一种新的写法，允许将回调函数的嵌套，改成链式调用。

浏览器实现方式：可以在支持Promise的版本上运行

var p = new Promise(function (resolve, reject) {
    setTimeout(function () {
        // A动画
        console.log('A'); resolve(); }, 300); }); p.then(function () { setTimeout(function () { // B动画 console.log('B'); }, 300); });

promise会让代码变得更容易维护，像写同步代码一样写异步代码。

promise原理

其实，promise就是三个状态。利用观察者模式的编程思想，只需要通过特定书写方式注册对应状态的事件处理函数，然后更新状态，调用注册过的处理函数即可。

这个特定方式就是then，done，fail，always…等方法，更新状态就是resolve、reject方法。

实现代码：

/**
 * Promise类实现原理
 * 构造函数传入一个function，有两个参数，resolve：成功回调; reject：失败回调
 * state: 状态存储 [PENDING-进行中 RESOLVED-成功 REJECTED-失败]
 * doneList: 成功处理函数列表
 * failList: 失败处理函数列表
 * done: 注册成功处理函数
 * fail: 注册失败处理函数
 * then: 同时注册成功和失败处理函数
 * always: 一个处理函数注册到成功和失败
 * resolve: 更新state为：RESOLVED，并且执行成功处理队列
 * reject: 更新state为：REJECTED，并且执行失败处理队列
**/

class PromiseNew {
  constructor(fn) {
    this.state = 'PENDING'; this.doneList = []; this.failList = []; fn(this.resolve.bind(this), this.reject.bind(this)); } // 注册成功处理函数  done(handle) { if (typeof handle === 'function') { this.doneList.push(handle); } else { throw new Error('缺少回调函数'); } return this; } // 注册失败处理函数  fail(handle) { if (typeof handle === 'function') { this.failList.push(handle); } else { throw new Error('缺少回调函数'); } return this; } // 同时注册成功和失败处理函数  then(success, fail) { this.done(success || function () { }).fail(fail || function () { }); return this; } // 一个处理函数注册到成功和失败  always(handle) { this.done(handle || function () { }).fail(handle || function () { }); return this; } // 更新state为：RESOLVED，并且执行成功处理队列  resolve() { this.state = 'RESOLVED'; let args = Array.prototype.slice.call(arguments); setTimeout(function () { this.doneList.forEach((item, key, arr) => { item.apply(null, args); arr.shift(); }); }.bind(this), 200); } // 更新state为：REJECTED，并且执行失败处理队列  reject() { this.state = 'REJECTED'; let args = Array.prototype.slice.call(arguments); setTimeout(function () { this.failList.forEach((item, key, arr) => { item.apply(null, args); arr.shift(); }); }.bind(this), 200); } } // 下面一波骚操作 new PromiseNew((resolve, reject) => { resolve('hello world'); // reject('you are err'); }).done((res) => { console.log(res); }).fail((res) => { console.log(res); })

解释：当我们调用new Promise(fn)时，就会立即执行第一个参数fn。上面案例中，先将then(done,fail)对应的回调函数分别加入到doneList或者failList中，always中对应的参数同时加到doneList和failList中；

当异步代码执行完毕，就调用resolve方法，此时改变promise的状态为resolved，并执行doneList里面的回调函数。如果执行失败，则调用fail方法，此时改变promise的状态为rejected，并执行failList里面的回调函数。

简介