用es5原生模仿-es6Promise异步处理
用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异步处理的更多相关文章
- 原生AJAX如何异步提交数据？
AJAX概述 AJAX:Asynchronous Javascript And XML,异步的JS和XML.2001,Google为了改进搜索的用户体验,提出了GoogleSugguest效果,正式提 ...
- JS原生对象实现异步请求以及JQ的ajax请求四种方式
一.JS原生方式异步请求 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="A ...
- Node.js用ES6原生Promise对异步函数进行封装
Promise的概念 Promise 对象用于异步(asynchronous)计算..一个Promise对象代表着一个还未完成,但预期将来会完成的操作. Promise的几种状态: pending:初 ...
- 原生Ajax实现异步交互
实现Ajax主要依靠XMLHttpRequest对象,所以首先要创建XMLHttpRequest对象 function getXhr(){ var xhr = null; if(window.XMLH ...
- jsp中使用原生js实现异步交互
Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化.并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读 ...
- JQuery队列queue与原生模仿其实现
jQuery中的queue和dequeue是一组很有用的方法,他们对于一系列需要按次序运行的函数特别有用.特别animate动画,ajax,以及timeout等需要一定时间的函数. queue() 方 ...
- Android模仿jquery异步请求
01 package com.xbl.task; 02 03 import java.io.BufferedReader; 04 import java.io.InputStream; 05 im ...
- 原生JS实现异步图片上传（预览）
效果 实现过程分为两步 1. 用户点击添加后通过 H5文件读取 FileReader对象以DataURL的格式读取图片 2. 通过FormData对象生成表单数据,通过ajax上传到后台 HTML & ...
- （25）ASP.NET Core EF查询（复杂查询运算符、原生SQL查询、异步查询）
1.复杂查询运算符 在生产场景中,我们经常用到LINQ运算符进行查询获取数据,现在我们就来了解下生产场景经常出现几种复杂查询运算符. 1.1联接(INNER JOIN) 借助LINQ Join运算符, ...
随机推荐
- WPF-MVVM-ICommand接口实现
一 接口分析MVVM框架的目的就是让视图和业务逻辑分离,各干各的.那么怎样实现分离呢,精髓就是绑定ICommand.先看一下ICommand接口的定义: // // 摘要: // 定义一个命令. [T ...
- 使用C#的aforge类库识别验证码实例
一: 验证码处理 1. 一般处理原则 这种验证码为什么说跟没有一样,第一点:字体规范工整,第二点:不旋转扭曲粘连,第三点:字体颜色单一,下面看处理步骤. 这里要注意的是,aforge只接受像素格式为 ...
- docker安装centos后没有ifconfig命令解决办法
使用docker pull centos命令下载下来的centos镜像是centos7的最小安装包,里面并没有携带ifconfig命令,导致我想查看容器内的ip时不知道该怎么办 yum provide ...
- gcc的调试调研——gdb
首先来介绍一下gcc的选项: 其他选项都为常用编译选项,在这里介绍一下优化功能: 优化编译时使用选项: -O:可以告诉gcc同时减小代码的长度和执行时间,其效果等价于-O1,在这一级别上能够进行的优化 ...
- 关于js中原生构造函数的继承
前言 在如今快节奏的工作当中,很多基础的东西会渐渐地被丢掉.就如继承这个话题,写React的同学应该都是class xxx extends React.Component,然而这可以理解为es5的一个 ...
- Unity 3D中的阴影设置
在Unity 3D中,经常需要用到光照阴影,即Directional Light的Shadow,Shadow分为Hard Shadow和Soft Shadow.区别是Soft Shadow的阴影边缘比 ...
- 为Owin项目增加WebApi
上一篇文章我们新建了一个Owin项目. 本节,我们来为其增加WebApi功能 项目右键>添加>新搭建基架的项目 选择Web API 2控制器 为默认控制器命名 点击添加后项目结构如下: 将 ...
- JAVA 注解和反射
通过反射来获取类 Class MyTest{ private String name; public String showName{ System.out.println(this.name); } ...
- bash: ./LM35_make_fs: Permission denied 解决办法
执行命令的时候 ./LM35_make_fs 遇到 permission denied, bash: ./LM35_make_fs: Permission denied权限的问题,可以运行 ls -l ...
- Ubuntu 12.04 LTS 查看网关地址方法汇总
来源:http://blog.csdn.net/duyiwuer2009/article/details/26263855 1. ip route show $ ip route show defau ...