分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

原生JS实现Promise

发布时间:2023-09-06 02:03责任编辑:熊小新关键词:暂无标签

  ES6中Promise可以说很大情况下改善了异步回调的嵌套问题,那么如果我们自己去写一个类似Promise的库应该怎么去写?

  我们先看一下Promise的特点:

  第一: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‘);//123其实就是第二个arguments[0]});//上面的第一个arguments[0]mm.then(function(success){ ???console.log(success);//该success其实就是上面的this.msg ???console.log("ok!");},function(){ ???console.log(‘fail!‘);});
//123
//ok

  以上只是最基本的实现,在代码结构结构和容错方面没有进行考虑。

原生JS实现Promise

原文地址:https://www.cnblogs.com/goloving/p/9297308.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved