用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运算符, ...
随机推荐
- 左耳听风-ARTS-第3周（2019/4/7-2019/4/13）
Algorithm 本周的算法题是按顺序合并两个已排序的链表(https://leetcode.com/problems/merge-two-sorted-lists/).和归并排序的合并已排序数组的 ...
- java中构造代码块、方法调用顺序问题
1. 继承的概念 继承在本职上是特殊——一般的关系,即常说的is-a关系.子类继承父类,表明子类是一种特殊的父类,并且具有父类所不具有的一些属性或方法. 2. 继承中的初始化顺序 从类的结构上而言,其 ...
- C# 广告
新建一个XML页面,设置属性 选择架构,勾选下面的目标,确定即可添加广告 广告模板: <?xml version="1.0" encoding="utf-8&quo ...
- centos7配置iscsi
什么是ISCSI iscsi--internet small computer system interface互联小型计算机系统接口,将数据包封装在TCP/IP协议中传输,使用普通网线和网络设备即可 ...
- C语言之一维数组与指针
一维数组: 假如有一维数组如下: ]; 该数组有3个元素,数据类型为char型,地址空间如下. 如果想访问数据,直接使用a[0].a[1].a[2]取出相应地址空间的值即可 一级指针: 指针即地址,c ...
- 【java】java三种技术架构
JAVAEE : 企业环境下开发应用程序,servlet,jsp,针对web应用程序的开发. JAVASE:普通简单的桌面应用程序,商务应用程序.(java版扫雷) JAVAME手机应用软件,电子消费 ...
- 使用透视表pivot_table
使用透视表pivot_table 功能:从一张大而全的表格中提取出我们需要的信息来分析 import pandas as pd unames = ['user_id', 'gender', 'age' ...
- http请求返回响应码及意义
http 响应码及意义 HTTP状态码(HTTP Status Code)是用以表示网页服务器HTTP响应状态的3位数字代码.它由 RFC 2616 规范定义的,并得到RFC 2518.RFC 281 ...
- 浏览器端使用javascript调用腾讯翻译api
最近在学习的小玩意,发现腾讯的文档十分坑爹,里面有很多错误的指示. 不过腾讯的机器翻译还是很牛的,我觉得翻译水准比谷歌好很多. 腾讯的机器翻译貌似在试用阶段,不收费,用QQ或微信登录即可申请使用. 首 ...
- 常用LINQ关键字用法汇总
背景 传统上,针对数据的查询都以简单的字符串表示,而没有编译时类型检查或 IntelliSense 支持.此外,还需要针对每种数据源学习一种不同的查询语言:SQL 数据库.XML 文档.各种 Web ...