原文地址: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 XMLHttpRequest();
xhr.onreadystatechange = 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:

<?php
if($_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));
}

[javascript] Promise简单学习使用的更多相关文章

  1. django之JavaScript的简单学习2

    前言:ajax预备知识:json进阶 1.JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON是用字符串来表示Javascript对象: 请大家记住一 ...

  2. JavaScript 的简单学习2

    AJAX 一 AJAX预备知识:json进阶 1.1 什么是JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON是用字符串来表示Javas ...

  3. JavaScript闭包简单学习

    因为实验室项目要用,所以最近在学习OpenLayers,但是从来没有做过前端呀,坑爹的,硬着头皮上吧 反正正好借这个机会学习一下JS,本来对这门语言也挺感兴趣的,多多少少写过一下JS代码了,差不多学一 ...

  4. javaScript的简单学习

    JavaScript介绍 JavaScript跟java没半毛钱关系 JavaScript有三部分组成:ECMAScript,document object model,broswer object ...

  5. Javascript Promise对象学习

    ES6中的Promise对象 var p = new Promise(function(resolve, reject){ window.setTimeout(function(){ console. ...

  6. JavaScript Promise的学习笔记

    首先声明:本人今天刚接触Promise,通过一个例子,希望能更好的来理解,如果有不对的地方,还望指正 Promise是专门为解决 js中回调而引起的各种问题,而产生的. 在异步编程中,我们经常使用回调 ...

  7. JavaScript 标准内置对象Promise使用学习总结

    Javascript标准内置对象Promise使用学习总结   by:授客 QQ:1033553122 1.   基础用法 var condition = true; let p = new Prom ...

  8. Javascript Promise 学习(上)

    Promise 就是处理异步的一个规范方法 a();b();alert("a");如果a() 里面有一个ajax 或者settimeout 那么alert("a" ...

  9. Javascript Promise 学习笔记

    1.     定义:Promise是抽象异步处理对象以及对其进行各种操作的组件,它把异步处理对象和异步处理规则采用统一的接口进行规范化. 2.     ES6 Promises 标准中定义的API: ...

随机推荐

  1. MYsql 之单标查询.

    http://www.cnblogs.com/wangfengming/articles/8064956.html .数据操作 .增 INSERT into t2(name,age) VALUES() ...

  2. jsp的九大内置对象(查询资料,搬砖所得)

    此笔记大部分摘自大神https://www.cnblogs.com/SimonHu1993/,部分通过网上搜寻补充. 1.Request内置对象(类型:HttpServletRequest    表示 ...

  3. 673. Number of Longest Increasing Subsequence

    Given an unsorted array of integers, find the number of longest increasing subsequence. Example 1: I ...

  4. webpack快速入门——处理HTML中的图片

    在webpack中是不喜欢你使用标签<img>来引入图片的,但是我们作前端的人特别热衷于这种写法, 国人也为此开发了一个:html-withimg-loader.他可以很好的处理我们在ht ...

  5. 【wireshark】Wireshark原理分析与二次开发系列

    1.版权声明 本系列文章是本人花了很多心血写成,wireshark本是开源软件,本人也乐于技术知识和经验的分享,更是欣赏和推崇开源精神,因此任何看到本文的人都可以随意转载,但只有一个要求: 在大段甚至 ...

  6. 企业IM (或业务系统)web api的json格式设计思考(原创)

    在企业IM开发中,经常用到和业务系统的数据交换,在中国企业最常见的比如组织架构变更,一般在客户端加密保存了组织架构树(便于快速的查询和树展示),当HR或OA或AD域这些管控企业组织架构的数据发生改变, ...

  7. linux下redis安装步骤

    1.官网上下载redis最新包,我下载的是redis-5.0.3.tar.gz,上传至服务器 2.解压缩:tar zxvf redis-5.0.3.tar.gz3.cd redis-5.0.3进入re ...

  8. 【bzoj3489】 A simple rmq problem k-d树

    由于某些原因,我先打了一个错误的树套树,后来打起了$k-d$.接着因不明原因在思路上被卡了很久,在今天中午蹲坑时恍然大悟...... 对于一个数字$a_i$,我们可以用一组三维坐标$(i,pre,nx ...

  9. (转)mysql explain详解

    原文:http://www.cnblogs.com/xuanzhi201111/p/4175635.html http://yutonger.com/18.html http://www.jiansh ...

  10. MySQl资料链接

    原文:http://www.uml.org.cn/sjjm/sjjm-MySql.asp MySQl   MySQL高可用数据库内核深度优化的四重定制   MySQL数据表存储引擎类型及特性   My ...