原生JS实现简单的Promise
javascript es6标准中的 Promise对象在js编程中使用量很大,使用Promise可以让异步逻辑在开发中清晰很多,了解其原理则有益在开发过程中更清晰的使用Promise对象,或者能在没有Promise原生支持的es5标准下简单的造一个Promise对象出来。下边就手写一个简单版本的Promise。 首先要了解Promise的基本用法,Promise是一个原生支持的构造函数,需要传入一个自定义函数,接受两个参数 resolve和reject,resolve接受成功数据回调,reject用于处理异常。基本用法为:
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) })
相关推荐
前端开发Kingcean 2020-07-30
Magicsoftware 2020-06-11
nmgxzm00 2020-11-10
xixixi 2020-11-11
88254251 2020-11-01
MarukoMa 2020-09-02
88234852 2020-09-15
陈旭阳 2020-08-31
whynotgonow 2020-08-19
whynotgonow 2020-07-29
bowean 2020-07-08
前端开发Kingcean 2020-07-08
88520191 2020-07-05
前端开发Kingcean 2020-06-27
88481456 2020-06-18
whynotgonow 2020-06-16
88520191 2020-06-13
88520191 2020-06-13