• 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);
        }

      });

    }

  • 相关阅读:
    你不知道的CSS(二) (转载)
    sass 使用
    前端常用工具介绍
    web端调用打印
    sublime 插件:Emmet
    Sublime text 安装Package Control
    Sublime Text 常用的16 个 Sublime Text 快捷键
    js中如何快速获取数组中的最大值最小值
    web app变革之rem
    前端工程需要会的技能
  • 原文地址:https://www.cnblogs.com/youlanlan/p/6559336.html
Copyright © 2020-2023  润新知