脚本宝典收集整理的这篇文章主要介绍了原生JS实现简单的Promise,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
javascript es6标准中的 Promise对象在js编程中使用量很大,使用PRomise可以让异步逻辑在开发中清晰很多,了解其原理则有益在开发过程中更清晰的使用Promise对象,或者能在没有Promise原生支持的ES5标准下简单的造一个Promise对象出来。下边就手写一个简单版本的Promise。
首先要了解Promise的基本用法,Promise是一个原生支持的构造函数,需要传入一个自定义函数,接受两个参数 resolve和reject,resolve接受成功数据回调,reject用于处理异常。基本用法为:
@H_406_28@
VAR exp1 = new Promise(function(resolve,reject){
try{
setTimeout(function(){
xxx
resolve(xx)
},3000)
}catch(e){
reject(e)
}
})
exp1.then(function(data){
xxx
})
以下为es5的原生简单实现,满足了then的简单调用
function PromiseX(fun){
var _this = this;
this.status = 'PEndding';
this.data = null;
this.error = null;
var resolve = function(data){
_this.changeStatus('success');
_this.thenCb&&_this.thenCb(data);
_this.data = data;
}
var reject = function(e){
_this.changeStatus('error');
_this.thenErrCb&&_this.thenErrCb(e);
_this.error = e;
}
fun&&fun(resolve,reject)
}
PromiseX.prototype.then = function(cb,errCb){
if(this.data){
cb&&cb(this.data);
}
if(this.error){
errCb&&errCb(this.error);
}
this.thenCb = cb;
this.thenErrCb = errCb;
return this;
}
PromiseX.prototype.changeStatus = function(status){
this.status = status;
}
使用方法同es6的使用方法一样
var testPromiseX = new PromiseX(function(resolve){
setTimeout(function(){
resolve(1)
},3000)
})
testPromiseX.then(function(res){
alert(res)
})
以上是脚本宝典为你收集整理的原生JS实现简单的Promise全部内容,希望文章能够帮你解决原生JS实现简单的Promise所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。