你的位置:首页 > Java教程

[Java教程][javascript] Promise简单学习使用


原文地址:http://www.cnblogs.com/dojo-lzz/p/4340897.html

 

解决回调函数嵌套太深,并行逻辑必须串行执行,一个Promise代表一个异步操作的最终结果,跟Promise交互的主要方式是通过他的then()方法来注册回调函数,去接收Promise的最终结果值

 

Promise相关的协议有PromiseA和PromiseA+

 

定义一个类Promise

定义属性队列queue,初始化空数组[]

定义属性值value,初始化null

定义属性状态status,初始化“pending”(默认值)

 

定义成员方法getQueue(),返回属性queue

定义成员方法getStatus(),返回属性status

定义成员方法setStatus(),设置状态,传递参数:status,value

判断status为fulfilled或者rejected,

设置status属性this.status=status

设置value属性this.value=value || null ,如果不传value就是null

定义冻结变量freezeObject

 

定义成员方法isFulfilled(),判断当前状态是否是(完成)

定义成员方法isRejected(),判断当前状态是否是(失败)

定义成员方法isPending(),判断当前状态师傅是(等待)

定义成员方法then(),传递参数:onFulfilled成功的回调,onRejected失败的回调

定义对象handler对象,属性fulfilled,rejected两个回调函数

定义handler对象的deferred属性,Deferred对象

判断当前状态是否等待,如果是等待 把handler对象塞入queue队列数组

如果不是等待状态,调用Utils对象的procedure()方法,参数:status,

返回 handler.deferred.promise对象

 

定义一个类Deferred

定义属性promise,初始化Promise对象

定义成员方法resolve(),传递参数:result结果

         判断Promise对象的状态是 等待,直接返回

         调用Promise对象的getQueue()方法,获取queue数组

         循环数组

         //todo调用工具类Utils. procedure()方法,参数:“fulfilled”,元素,err信息

         调用Promise对象的setStatus()方法,设置状态,参数:'fulfilled',result

 

定义成员方法reject,传递参数:err错误信息

         判断Promise对象的状态是 等待,直接返回

         调用Promise对象的getQueue()方法,获取queue数组

         循环数组

         //todo,调用工具类Utils. procedure()方法,参数:“rejected”,元素,err信息

         调用Promise对象的setStatus()方法,设置状态,参数:'fulfilled',result

 

        

定义工具类Utils,使用匿名函数立即执行,得到一个对象

 

返回对象,对象中有一个方法procedure()

定义procedure()方法,传递参数:type状态类型,handler处理器数组,result结果

获取到处理函数func,在handler[type]

到这里我看晕了。。。

 

 

使用方法:

 

定义一个函数ajax,传递参数:url路径

 

获取Deferred对象,new出来

ajax请求数据的代码,在返回数据的回调方法中

如果成功了调用Deferred对象的resolve()方法,参数:返回的数据

如果失败了调用Deferred对象的reject()方法,参数:返回的数据

返回Deferred.promise对象

 

调用ajax()方法,得到promise对象,参数:url,

调用promise对象的then()方法,参数:匿名函数

         调用ajax()方法,获取到promise对象,返回这个对象

形成链式调用

 

js部分:

<script>//Promise代码部分(我选择狗带)Promise = function() {  this.queue = [];  this.value = null;  this.status = 'pending';// pending fulfilled rejected};Promise.prototype.getQueue = function() {  return this.queue;};Promise.prototype.getStatus = function() {  return this.status;};Promise.prototype.setStatus = function(s, value) {  if (s === 'fulfilled' || s === 'rejected') {    this.status = s;    this.value = value || null;    this.queue = [];    var freezeObject = Object.freeze || function(){};    freezeObject(this);// promise的状态是不可逆的  } else {    throw new Error({      message: "doesn't support status: " + s    });  }};Promise.prototype.isFulfilled = function() {  return this.status === 'fulfilled';};Promise.prototype.isRejected = function() {  return this.status === 'rejected';}Promise.prototype.isPending = function() {  return this.status === 'pending';}Promise.prototype.then = function(onFulfilled, onRejected) {  var handler = {    'fulfilled': onFulfilled,    'rejected': onRejected  };  handler.deferred = new Deferred();  if (!this.isPending()) {//这里允许先改变promise状态后添加回调    utils.procedure(this.status, handler, this.value);  } else {    this.queue.push(handler);//then may be called multiple times on the same promise;规范2.2.6  }  return handler.deferred.promise;//then must return a promise;规范2.2.7};var utils = (function(){  var makeSignaler = function(deferred, type) {    return function(result) {      transition(deferred, type, result);    }  };  var procedure = function(type, handler, result) {    var func = handler[type];    var def = handler.deferred;    if (func) {      try {        var newResult = func(result);        if (newResult && typeof newResult.then === 'function') {//thenable          // 此种写法存在闭包容易造成内存泄露,我们通过高阶函数解决          // newResult.then(function(data) {          //   def.resolve(data);          // }, function(err) {          //   def.reject(err);          // });          //PromiseA+规范,x代表newResult,promise代表def.promise          //If x is a promise, adopt its state [3.4]:          //If x is pending, promise must remain pending until x is fulfilled or rejected.          //If/when x is fulfilled, fulfill promise with the same value.          //If/when x is rejected, reject promise with the same reason.          newResult.then(makeSignaler(def, 'fulfilled'), makeSignaler(def, 'rejected'));//此处的本质是利用了异步闭包        } else {          transition(def, type, newResult);        }      } catch(err) {        transition(def, 'rejected', err);      }    } else {      transition(def, type, result);    }  };  var transition = function(deferred, type, result) {    if (type === 'fulfilled') {      deferred.resolve(result);    } else if (type === 'rejected') {      deferred.reject(result);    } else if (type !== 'pending') {      throw new Error({        'message': "doesn't support type: " + type      });    }  };  return {    'procedure': procedure  }})();Deferred = function() {  this.promise = new Promise();};Deferred.prototype.resolve = function(result) {  if (!this.promise.isPending()) {    return;  }  var queue = this.promise.getQueue();  for (var i = 0, len = queue.length; i < len; i++) {    utils.procedure('fulfilled', queue[i], result);  }  this.promise.setStatus('fulfilled', result);};Deferred.prototype.reject = function(err) {  if (!this.promise.isPending()) {    return;  }  var queue = this.promise.getQueue();  for (var i = 0, len = queue.length; i < len; i++) {    utils.procedure('rejected', queue[i], err);  }  this.promise.setStatus('rejected', err);}/*****************************上面看不懂,分割线************************************///测试部分ajax = function(url) {  var def = new Deferred();  var xhr = new = function() {    if (xhr.readyState === 4) {      if ((xhr.status >=200 && xhr.status < 300) || xhr.status === 304) {        def.resolve(xhr.responseText)      } else {//简化ajax,没有提供错误回调        def.reject(new Error({          message: xhr.status        }));      }    }  };  xhr.open('get', url, true);  xhr.send(null);  return def.promise;}ajax('test.php?act=1').then(function(data1) {  console.log(data1);//处理data1  return ajax('test.php?act=2');}).then(function(data2) {  console.log(data2);//处理data2  return ajax('test.php?act=3');}, function(err) {  console.error(err);}).then(function(data3) {  console.log(data3);  alert('success');}, function(err) {  console.error(err);});</script>

php:

<?phpif($_GET['act']==1){  echo json_encode(array("code"=>200));}else if($_GET['act']==2){  echo json_encode(array("code"=>300));}else if($_GET['act']==3){  echo json_encode(array("code"=>400));}