naro

您所在的位置:首页 > 解决方案 > 其他 > 正文
异步:现在值和将来值 发表时间:2018-05-16 07:22:50 点击:
导言:在项目中往往会遇到这种需求,语句B依赖语句A的完成,语句A完成才能执行语句B,否则都不能完成。
var x,y = 2;
console.log( x + y );//NaN <-- 因为x还没赋值;

沿着这个简单的demo思路,如果x没赋值,期望运算符+本身能够检测并等待x和y都准备好再进行运算是没有意义的,如果有的语句现在完成,有的是将来完成,那么是会在程序里引起混乱的。

如果两个语句的任何一个可能还没完成,你怎么追踪这两条语句的关系呢?

如果语句B依赖于语句A的完成,那么就有两种结果输出:要么语句A完成,一切顺利执行;要么语句A未完成,语句B也就跟着失败。


回到demo的思路,把x和y相加,一旦他们都准备好就马上执行相加运算,试着用回调处理这个问题:

function add(getX,getY,sum){
  var x,y;
  getX( funcion(xVal){
    x = xVal;
    // 两个都准备好了?
    if(y != undefined){
      sum{ x + y}; 
      // 发送和
    }
  });
  getY( funcion(yVal){
    y = yVal;
    // 两个都准备好了?
    if(x != undefined){
      sum{ x + y}; 
      // 发送和
    }
  });

  // fetchX()和fechY()是同步或者异步函数
  add(fetchX,fetchY,funcion(sum){
    console.log(sum);
  })
}


通过promise处理这个例子

funcion add(x,y){
  // Promise.all[ .. ]接受一个promise数组并返回一个新的promis,
  // 这个新的promise等待数组中的promise完成
  return Promise.all( [x,y] )

  // 这个promise决议后,我们取得收到的X和Y值并加在一起
  .then(function(values){
    // values是来自于之前决议的promise的消息数组
    return values[0] + values[1];
  });
}

// fetchX()和fetchY()返回相应值的promise,可能已经就绪,也可能以后就绪
add( fetchX(), fetchY() )

// 我们得到一个这两个数组的和promise,现在用链式调用then(..)来等待返回promise的决议
.then{function(sum){
  console.log(sum);
}}

这段代码中有两层Promise:

fetchX()和fetchY()是直接调用,他们的返回值(promise!)被传给add()。这些promise代表的底层值可用时间的现在和将来,但不管怎样,promise归一保证了行为的一致性。

第二层是add(..)(通过Promise.all([..]))创建并返回promise。我们通过调用then(..)等待这个promise。add(..)运算完成后,未来值sum就准备好了,可以打印出来。


解决方案

开发过程中解决问题的思路和方法

作品锦集

项目案例及设计作品

心路历程

散文、日志、记录及其他