用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运算符, ...
随机推荐
- Go 包管理工具--glide
网上有一篇解释glide比较好的文章:https://my.oschina.net/u/553243/blog/1475626 在命令行中输入glide $glide NAME: glide - Ve ...
- vue-cli 项目实现路由懒加载
在vue 单页应用中,如果路由不实现懒加载,那么打包出来的文件将会非常大,加载也会非常慢.vue-router 官网也有相应的介绍,但是具体怎么去实现还是讲的比较模糊的,下面将一步步讲解配置路由懒加载 ...
- tomcat catalina.out乱码
启动参数添加-Dfile.encoding=UTF-8 -Dsun.jnu.encoding=UTF-8解决
- c# BackgroundWorker初试
/* * Created by SharpDevelop. * User: Administrator * Date: 2017/7/31 * Time: 16:18 * * To change th ...
- centos7系统优化-转载
禁用SELINUX # grep -i ^selinux /etc/selinux/config SELINUX=enforcing SELINUXTYPE=targeted 注释掉上面2行,并增加 ...
- java注解篇
@SuppressWarnings注解 该批注的作用是给编译器一条指令,告诉它对被批注的代码元素内部的某些警告保持静默. 允许您选择性地取消特定代码段(即,类或方法)中的警告.其中的想法是当您看到警告 ...
- <python的线程与threading模块>
<python的线程与threading模块> 一 线程的两种调用方式 threading 模块建立在thread 模块之上.thread模块以低级.原始的方式来处理和控制线程,而thre ...
- api签名认证方案
微信签名算法 token (自己后台配置) nonce:随机数 signature:签名 echostr:返回字符串 https://mp.weixin.qq.com/wiki?t=resource/ ...
- WebApi Owin OAuth
Microsoft.Owin.Host.SystemWeb Owin Microsoft.Owin Microsoft.Owin.Diagnostics Owin Micros ...
- CSS Core Technology
1. Selector Different types of selectors: Selectors can be divided into the following categories: Si ...