原生JS实现简单的Promise

Steven 发布于2019-08-23 17:07 / 613人阅读

摘要：下边就手写一个简单版本的。首先要了解的基本用法，是一个原生支持的构造函数，需要传入一个自定义函数，接受两个参数和，接受成功数据回调，用于处理异常。基本用法为以下为的原生简单实现，满足了的简单调用使用方法同的使用方法一样

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)
})

GPU云服务器云服务器 js实现的简单特效原生js实现 ajax原生js实现原生js实现addclass

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103844.html

[译] 深入理解 Promise 五部曲：4. 扩展问题

摘要：有一个和相关的更大的问题。最后，请负有责任感并且使用安全的扩展。深入理解五部曲异步问题深入理解五部曲转换问题深入理解五部曲可靠性问题深入理解五部曲扩展性问题深入理解五部曲乐高问题最后，安利下我的个人博客，欢迎访问原文地址：http://blog.getify.com/promis... 现在，我希望你已经看过深入理解Promise的前三篇文章了。并且假设你已经完全理解Promises...

Shimmer 2019-08-21 12:24 评论0 收藏0
用原生js写一个"多动症"的简历

摘要：用原生写一个多动症的简历预览地址源码地址最近在知乎上看到方应杭用写了一个会动的简历，觉得挺好玩的，研究一下其实现思路，决定试试用原生来实现。用原生js写一个多动症的简历预览地址源码地址最近在知乎上看到@方应杭用vue写了一个会动的简历，觉得挺好玩的，研究一下其实现思路，决定试试用原生js来实现。 showImg(https://segmentfault.com/img/remot...

Y3G 2019-08-20 16:15 评论0 收藏0
传统 Ajax 已死，Fetch 永生

摘要：结果证明，对于以上浏览器，在生产环境使用是可行的。后面可以跟对象，表示等待才会继续向下执行，如果被或抛出异常则会被外面的捕获。，，都是现在和未来解决异步的标准做法，可以完美搭配使用。这也是使用标准一大好处。只允许外部传入成功或失败后的回调。 showImg(https://cloud.githubusercontent.com/assets/948896/10188666/bc9a53...

fai1017 2019-08-21 10:41 评论0 收藏0
es6 promise面试

摘要：执行函数会返回一个遍历器对象，每一次函数里面的都相当一次遍历器对象的方法，并且可以通过方法传入自定义的来改变函数的行为。函数可以通过配合函数更轻松更优雅的实现异步编程和控制流管理。它和构造函数的不同点类的内部定义的所有方法，都是不可枚举的。 let const的命令在ES6之前，声明变量只能用var，var方式声明变量其实是很不合理的，准确的说，是因为ES5里面没有块级作用域是很不合...

timger 2019-08-23 18:38 评论0 收藏0