原生JS实现Promise
2017-10-22 22:13
477 查看
ES6中Promise可以说很大情况下改善了异步回调的嵌套问题,那么如果我们自己去写一个类似Promise的库应该怎么去写?我们先看一下Promise的特点
那么原生js实现以上特点应该比较简单了
以上只是最基本的实现,在代码结构结构和容错方面没有进行考虑。
第一:Promise构造函数接受一个函数作为参数,函数里面有两个参数resolve和reject分别作为执行成功或者执行失败的函数 var promise=new Promsie(function(resolve,rejec){ if(/*异步执行成功*/){ resolve(value); }else{ reject(error); } }) 第二:可以通过then设置操作成功之后的操作,接受两个函数作为参数 .then(function(){ //回调执行成功之后的操作 },function(){ //回调执行失败之后的操作,可以没有 });
那么原生js实现以上特点应该比较简单了
function PromiseM(){ this.status='pending'; this.msg=''; var process=arguments[0]; var that=this; process(function(){ that.status='resolve'; that.msg=arguments[0]; },function(){ that.status='reject'; that.msg=arguments[0]; }); return this; } PromiseM.prototype.then=function(){ if(this.status=='resolve'){ arguments[0](this.msg); } if(this.status=='reject'&&arguments[1]){ arguments[1](this.msg); } } //测试用例 var mm=new PromiseM(function(resolve,reject){ resolve('123'); }); mm.then(function(success){ console.log(success); console.log("ok!"); },function(){ console.log('fail!'); });
以上只是最基本的实现,在代码结构结构和容错方面没有进行考虑。
相关文章推荐
- 如何用原生JS实现一个简单的promise
- 原生JS实现Promise
- 使用原生js实现页面蒙灰(mask)效果示例代码
- 原生JS实现parseInt
- 原生js实现简单移动端轮播图
- 阿里巴巴校招2017前端笔试题目 -- 原生js/html5 实现一个路由
- 【JavaScript】原生JS实现AJAX、JSONP
- vuejs2.0运用原生js实现简单的拖拽元素功能
- 原生JS取代一些JQuery方法的简单实现
- 原生js实现类似jq的trigger
- 原生Js无缝滚动效果的简单实现
- 原生js实现ajax
- JS-------------原生JS实现AJAX
- 原生js实现图片层叠轮播切换效果
- 使用jQuery或者原生js实现鼠标滚动加载页面新数据
- android和JS交互,相互调用方法传值。不使用第三方实现原生加载word、ppt、pdf文档
- 原生JS实现轮播+学前端的感受(防止走火入魔)
- 原生JS实现验证框架 checkFun(待优化)
- 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
- 原生JS实现几个常用DOM操作API