阿鼠的秘密

导航

Promise的一点感悟~

在什么大环境下?

今天要讨论的Promise,是js的同步|异步任务的概念下出来的

什么是同步?什么是异步?

我的理解:

一件事情Q

分三部分:Q1 ,  Q2  ,  Q3

同步方式完成: Q1 -> Q2 -> Q3

异步方式完成:  Q1_1 -> Q2 -> Q3 - >Q1_2 【Q1_1 至 Q1_2期间可以有一个代理的角色Promise ~~】

 

什么是Promise?

很多地方这么解释:Promise是一种更好的代码组织方式,提供一种【全新的视角】来理解异步回调

我所理解的视角的含义有几种:

  电影中经常会出现视角这个词,个人觉得视角的选择影响环境呈现、人物的心情表达。。。

  小说中也经常会出现视角这个词,从不同的视角出发去观察、思考会有不同的效果。。

  画画。。。

  瞬间感觉艺术的相通性。。此时有点心虚

  辣么问题来了?Promise提供的全新的视角是什么?

我脑海里有一个这样的画面:

一个初入职场的小女孩Y,懵懂、青春、聪明、努力。刚开始工作的时候,感觉自己全身被一道道充盈的力量的金光包围着。

她一天的基本工作可分为A,B,C,D,其中不定期会有一些老大或是同事穿插的事件W1,W2,W3.....  

刚开始的时候,对于W类事件,她会很热情的立即回应:"等一下哈,等我做完手头上的事,马上进入W类事件。。。"

如果是W1-3的范围的时候还OK,但是当(W>3甚至达到10以上),再这样毫无规律自然的答复缺乏管理,也不专业。

Y总结分析了平时的情况,想到一个方法,使事情看起来不会杂乱,以导致看起来自己忙忙碌碌、没什么成就的赶脚。她找来

一个本子做代理【代理这个异步任务】,大家只要按照顺序的把事情告诉她,只要她有空方便的时候就可以一一帮忙完成了。

 这个本子就记录每一个事件的三个状态【未开始、完成:收获结果、任务失败:失败原因】。这样处理之后,YY觉得自己的工作

更在自己的把控之内了,且完成的有条理、更清晰舒服。

 

----- - ——~~

 

如何实现一个Promise?

1.异步对象状态和回调函数如何分离

2.如何实现链式调用及管理状态

 

var PENDING = 1,

  RESOLVED = 2,

  REJECTED = 3;

function Promise(fn){

  var self = this;

  self.state = PENDING;

  self.value = null;

  self.handlers = [];

 

  function fulfill(result){

    if(self.state === PENDING) {

      self.state = RESOLVED;

      self.value = result;

      for(var i = 0, len = self.handlers.length; i <len; i++) {

        self.handlers[i](result);

      }

    }

  }

 

  function reject(error){

    if(self.state === PENDING) {

      self.state = REJECTED;

      self.value = error;     

    }

  }

 

  fn && fn(fulfill, reject);

 

Promise.prototype.then = function(onResolved, onRejected){

  return new Promise(function(resolve, reject){

    var onResolvedFade = function(val){

      var ret = onResolved? onResolved(val): val;

      if(Promise.isPromise(ret)) {

       //回调函数返回值也是Promise

       ret.then(function(val){

         resolve(val);      

       }); 

      }else {

        resolve(ret);

      }

    } 

    

    var onRejectedFade = function(val){
      var ret = onRejected? onRejected(val) : val;

      reject(ret);
    };

    //只是成功的回调进入容器
    self.handlers.push(onResolvedFade);

    if(self.state === FULFILLED) {
      onResolvedFade(self.value);
    }

    if(self._status === REJECTED) {
      onRejectedFade(self.value);
    }

  });

}

 

posted on 2017-03-16 14:30  阿鼠的秘密  阅读(112)  评论(0编辑  收藏  举报