用es5原生模仿-es6Promise异步处理,不过在处理异常的时候有点小bug不是很完美,不过多级then 是没问题的和resolve, rejec  正常调用和异常处理调用是没问题的。本帖属于原创,转载请出名出处。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>es5原生模仿-es6Promise</title>
<body>
<script type="text/javascript">
//虽然写的也原生的有点差距不是很完美,只是这个例子给大家了解下es6的Promise 异步机制原理而已。
function _Promise(fn){
fn.call(this,this.resolve.bind(this),this.rejec.bind(this));
}
_Promise.prototype={
listFn:[],
time:null,
data:'',
filter:function(arr,key){
//过滤队列中的同级的key函数
for( var i=0; i<arr.length; i++){
if(arr[i].key==key){
arr.splice(0,i+1);
if((arr.length>=1)&&(arr[0].key==key)){
return this.filter(arr,key);
}
break;
}
}
return arr;
},
start:function(data,key){
//开始执行队列中的函数 var _this=this;
(function(data,key){
setTimeout(function(){
var index=null;
for(var i=0; i<_this.listFn.length; i++){
//匹配key值 执行then或者catch函数
if(_this.listFn[i].key==key){
// console.log(key)
index=i;
break;
}
}
if(index!==null){
try{
//执行 key值 执行then或者catch函数
data=_this.listFn[index].fn(data);
//已经执行的函数退出队列
_this.listFn.splice(index,index+1);
if(_this.listFn.length>=1){
try{
_this.start.call(_this,data,'then')
}catch(e){
_this.start.call(_this,data,'catch')
}
}
}catch(e){ //发生错误的时候执行可以当执行then 报错异常的时候 已经执行完then,所以bug导致来至这里 ,then发生错误执行catch
//调用catch 函数
_this.start.call(_this,data,'catch')
//执行catch 函数
_this.data=_this.listFn[index].fn(data);
//执行过的catch 函数 退出队列
_this.listFn.splice(index,index+1);
//删除
// _this.filter.call(_this,_this.listFn,'then'); if(_this.listFn.length>=1){
//删除一个统计的then
if (_this.listFn[0].key=='then') {
_this.listFn.splice(index,index+1);
}
try{
_this.start.call(_this,data,'then')
}catch(e){
_this.start.call(_this,data,'catch')
}
}
}
}
}.bind(_this),0)
})(data,key)
},
rejec:function(data){
this.start.call(this,data,'catch')
},
resolve:function(data){
try{
this.start.call(this,data,'then')
}catch(e){
this.start.call(this,data,'catch')
} },
then:function(fn){
//添加队列then函数
this.listFn.push({
key:'then',
fn:fn
});
return this;
},
catch:function(fn){
//添加队列catch函数
this.listFn.push({
key:'catch',
fn:fn
});
return this;
},
}
new _Promise(function(resolve,rejec){
resolve(100);
}).then(function(data){
console.log('then');
console.log(data);
throw 123;
return data;
}).catch(function(data){
console.log('catch');
console.log(data);
return data;
}).then(function(data){
console.log('then');
console.log(data); return data;
}) </script>
</body>
</html>

  

用es5原生模仿-es6Promise异步处理的更多相关文章

  1. 原生AJAX如何异步提交数据?

    AJAX概述 AJAX:Asynchronous Javascript And XML,异步的JS和XML.2001,Google为了改进搜索的用户体验,提出了GoogleSugguest效果,正式提 ...

  2. JS原生对象实现异步请求以及JQ的ajax请求四种方式

    一.JS原生方式异步请求 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="A ...

  3. Node.js用ES6原生Promise对异步函数进行封装

    Promise的概念 Promise 对象用于异步(asynchronous)计算..一个Promise对象代表着一个还未完成,但预期将来会完成的操作. Promise的几种状态: pending:初 ...

  4. 原生Ajax实现异步交互

    实现Ajax主要依靠XMLHttpRequest对象,所以首先要创建XMLHttpRequest对象 function getXhr(){ var xhr = null; if(window.XMLH ...

  5. jsp中使用原生js实现异步交互

    Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化.并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读 ...

  6. JQuery队列queue与原生模仿其实现

    jQuery中的queue和dequeue是一组很有用的方法,他们对于一系列需要按次序运行的函数特别有用.特别animate动画,ajax,以及timeout等需要一定时间的函数. queue() 方 ...

  7. Android模仿jquery异步请求

    01 package com.xbl.task; 02   03 import java.io.BufferedReader; 04 import java.io.InputStream; 05 im ...

  8. 原生JS实现异步图片上传(预览)

    效果 实现过程分为两步 1. 用户点击添加后通过 H5文件读取 FileReader对象以DataURL的格式读取图片 2. 通过FormData对象生成表单数据,通过ajax上传到后台 HTML & ...

  9. (25)ASP.NET Core EF查询(复杂查询运算符、原生SQL查询、异步查询)

    1.复杂查询运算符 在生产场景中,我们经常用到LINQ运算符进行查询获取数据,现在我们就来了解下生产场景经常出现几种复杂查询运算符. 1.1联接(INNER JOIN) 借助LINQ Join运算符, ...

随机推荐

  1. jboss wildfly 外网访问

    在standalone.xml中: 找到下面三行,看到是要访问public(8080端口的)和management的interface,将interface中的127.0.0.1改为0.0.0.0即可 ...

  2. c# 支付宝查单补单

    谁谁谁手机那边支付宝支付成功扣钱了,游戏里面却没有充钱,唯有写个补单程序. 首先要查单,查单接口(交易信息查询接口:https://mapi.alipay.com/gateway.do),服务名称:s ...

  3. oracle 锁表查询及解决、表字段查询

    在进行批量对DML操作时程序竟然中断了,不再往下执行.查询一下某张表被锁住了,因此不再往下执行了 如果怀疑表被锁了,或者事务未被正常关闭,在Oracle数据库中我们可以通过以下语句进行查询获取相关信息 ...

  4. [转] Paxos算法2-算法过程(实现)

    请先参考前文:Paxos算法1 1.编号处理 根据P2c ,proposer在提案前会先咨询acceptor查看其批准的最大的编号和value,再决定提交哪个value.之前我们一直强调更高编号的pr ...

  5. 详解Java中的访问控制修饰符(public, protected, default, private)

    Java中的访问控制修饰符已经困惑笔者多时,其中较复杂的情况一直不能理解透彻.今天下定决心,系统.全面地研究Java中的访问控制修饰符的所有方面,并整理成这篇文章,希望有同样疑惑的读者读完后能有所收获 ...

  6. js获取非行内样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 支持向量机通俗导论(理解SVM的三层境地)

    支持向量机通俗导论(理解SVM的三层境地) 作者:July :致谢:pluskid.白石.JerryLead.出处:结构之法算法之道blog. 前言 动笔写这个支持向量机(support vector ...

  8. mockjax MOCK.js的拦截ajax请求

    今天看了下 mock.js的拦截请求 .https://github.com/nuysoft/Mock/blob/master/src/mockjax.js //覆盖(拦截) Ajax 请求,目前内置 ...

  9. shrio登录验证

    shiro的认证过程也就是判断用户名和密码的过程,在认证过程中,用户需要提交实体信息(用户名)(Principals)和凭据信息(密码)(Credentials)来判断用户是否合法,最常见的" ...

  10. Git SSH Key 生成步骤及使用

    Git是分布式的代码管理工具,远程的代码管理是基于SSH的,所以要使用远程的Git则需要SSH的配置. github的SSH配置如下: 一 . 设置Git的user name和email: $ git ...