重学JS（三）—— promise

Promise这东西，只会用，没有刻意去了解过。但有时不得不为它带来的便利感到惊叹。用的多了，对他的思想就会有一点了解，越来越觉得和消息订阅模式有异曲同工之妙。

为什么要有promise呢。以读文件为例：

var reader = new FileReader();
reader.readAsText(file);
reader. = function(f){
}

如果想要操作文件内容，就必须得在中进行操作。很麻烦，项目中不可能永远写这几行代码，所以封装下

function readFile(file,fnc){    var  reader = new FileReader();
    reader.readAsText(file);
    reader. = function(f){
        fnc();
    }
}

通过传入fnc函数，让FileReader对象在中调用。这种解决异步的方式叫回调。
好像promise目前没有出场的必要。
直到有一天，老板让你连续读文件，前一个文件读完才允许读下一个，读4个。

readFile(a,()=>{
    readFile(b,()=>{
        readFile(c,()=>{
              readFile(d,()=>{
              })  
        })
    })
})

第一天写完可能还好，记得调用顺序，等过几天再看到这坨估计就要抓狂了。真实代码中更是会夹杂许多逻辑，加上几个if else带来的花括号，想要快速理清这个嵌套关系，说出执行顺序几乎是不可能的。
所以，想要编写可维护代码，一种更顺序的写法来解决异步显得十分重要。
最理想的方式当然是这样

readFile(a,funcA);
readFile(b,funcB);
readFile(c,funcC);
readFile(d,funcD);

但是他不能保证读完A文件后才读B。
突然，你灵机一动，想到了消息订阅模式。不去直接执行读取文件的函数，而是依次添加订阅。这样，顺序性也就解决了。试试！

class Mypromise{    constructor(fn){          this._topics= [];  //管理订阅的事件
          fn(this._resolve.bind(this));  //_resolve函数中用到了this，所以这里绑定下，保证能够找到_topics对象
    }
    then(callback){  //添加订阅
          this._topics.push(callback);          return this;   //为了持续添加订阅
    }
     _resolve(val){  //发布消息
          this._topics.forEach(callback=>{
               callback(val);   
          })
    }
}

使用then函数来添加订阅，resolve函数发布消息。写段测试代码测试下，这里使用简单的定时器来模拟异步操作：

function readFile(a){    return new Mypromise(resolve=>{
          setTimeout(()=>{              console.log(a);
              resolve(a);
          },500)
    })
}

readFile('a')
.then(()=>{   console.log('b')
})
.then(()=>{    console.log('c')
});

按顺序打出了a b c。效果已经出来了。这样写我们可以马上看清谁先调用，谁后调用。并且解决了异步问题。
有人就有疑问了，如果readFile函数里全是同步代码，你还没有通过.then添加回调函数，你就resolve了，那不就什么函数都没有被调用。
记得setTimeout(function(){},0)这个经典面试题吗，它会将在0S后将函数推入事件队列，当前同步代码执行完后，才会开始执行。所以只要用它把_resolve函数内部实现包裹一下，就能解决这个问题。

 _resolve(val){  //发布消息
    setTimeout(()=>{        this._topics.forEach(callback=>{
             callback(val);   
        })
    },0)
}

这样就能保证所有的.then都执行完再resolve了。
Promise最好用的一点是每个then返回的都是一个新的Promise对象，而不是原来的promise实例，如下：

let p = Promise.resolve('1');
p.then(json=>{    console.log(1);   //1
    return 2  }).then(json=>{    console.log(json)   //2});

第二个会输出2是因为第一个then返回了一个新的Promise对象。第二个then的回调加在了这个新的Promise对象中。所以我们的then函数不能return this，而是要return Mypromise。

then(callback){    this._topics.push(callback);    return new Mypromise(resolve=>{
        resolve(callback());
    })
}

但是这样每次.then的时候立刻执行了callback，显然不符合要求。且没有达成传递的要求。所以衔接前一个promise和后一个promise变得至关重要。
其实也简单，调用then函数往_topics塞回调的时候不仅把callback塞进去，也把新生成的promise对象的resolve也塞进去。执行resolve的时候不仅要执行callback,也要执行resolve，即触发下一个then的回调，修改后完整代码如下：

class Mypromise{    constructor(fn){        this._topics= [];  //管理订阅的事件
        fn(this._resolve.bind(this));
    }
    then(callback){  //添加订阅
        return new Mypromise(resolve=>{          this._topics.push({              callback:callback,   //当前then添加的回调函数
              resolve:resolve   //then新生成promise对象的resolve，用于触发该promise回调
          })
        });
     }
     _resolve(val){  //发布消息
        setTimeout(()=>{            this._topics.forEach(call=>{                var result = call.callback(val);   //执行当前promise注册的回调
                call.resolve(result);   //触发新生成promise的回调
            })
        },0)
     }
}function readFile(a){    return new Mypromise(resolve=>{
        setTimeout(()=>{            console.log(a);
            resolve(1);
        },500)
    })
}

readFile('a')
.then(json=>{   console.log(json);   return 2;
})
.then(json=>{   console.log(json)
});

打印出了理想的a,1,2。一个极简的promise就完成了。

作者：闪闪发光的狼
链接：https://www.jianshu.com/p/66c6ab883efc