用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运算符, ...
随机推荐
- [双硬盘GPT分区安装linux] ----安装
最近机器学习课程需要用到pytorch, 基于cuda8的pytorch的需要,最终决定还是要安装一个linux系统在我的windows10机器上.本篇记录安装过程备用. 本人笔记本是联想Y520,系 ...
- 1-Two Sum @LeetCode
1-Two Sum 题目 思路 题目中得到的信息有: 都是整数,并且可正可负,也可一个值包含多个: 只有一个正确的结果. 方法一: 最直接的思路就是两重循环遍历,时间复杂度是O(n^2),这样肯定不行 ...
- Python Faker的使用(1)：基础使用方法与函数速查，生成随机数据
在软件需求.开发.测试过程中,有时候需要使用一些测试数据,针对这种情况,我们一般要么使用已有的系统数据,要么需要手动制造一些数据. 在手动制造数据的过程中,可能需要花费大量精力和工作量,现在好了,有一 ...
- 2018-2019-2 《网络对抗技术》Exp0 Kali安装 Week1 20165308 张士洋
2018-2019-2 <网络对抗技术>Exp0 Kali安装 Week1 20165308 张士洋 1.进入官网下载Kali Linux VirtualBox版本的镜像文件. 2.解压并 ...
- 《我的嵌入式开发》---- IIC 通信
IIC 通用文件,文件是在NRF51xx 芯片基础,keil 平台开发测试通过,后期修改为STM32F2xx系列的配置. 文件百度云盘链接 : https://pan.baidu.com/s/1AFx ...
- angular2在模板中使用属性引发Cannot read property 'xxx' of undefined
angular在模板中使用属性引发Cannot read property 'xxx' of undefined 在使用ng2的过程中,发现模板中如下方式 <li *ngFor="le ...
- VisualSVN设置提交时必须输入日志信息
VisualSVN设置提交时必须输入日志信息 1.svn提交时强制输入提交信息 为了阻止SVN提交空日志信息和垃圾文件可以在SVN服务器端强制必须填写日志信息,这时需用到pre-commit钩子脚本. ...
- vue 深拷贝
Vue.set(row,'isEdit',true); let newRow = JSON.parse(JSON.stringify(row)); this.totalData.push(newRow ...
- 浅析MSIL中间语言——基础篇(转)
来自:https://www.cnblogs.com/dwlsxj/p/MSIL.html 一.开篇 研究MSIL纯属于个人喜好,说在前面MSIL应用于开发的地方很少,但是很大程度上能够帮着我们理解底 ...
- Ubuntu 18.04 启用 rc.local 设置开机启动
ubuntu18.04 不再使用initd管理系统,改用systemd. 然而systemd很难用,改变太大,跟之前的完全不同. 使用systemd设置开机启动为了像以前一样,在/etc/rc.loc ...