教你一步步实现一个简易promise


Posted in Javascript onNovember 02, 2021

step1 搭建框架

1. 首先我们需要在这里放置一个promise函数本体 后面要在里面添加resolve、reject的执行函数

function Promise(execotor) {}

2. 原装promise中有then与catch这两个主要的方法,所以我们要给promise的原型挂载then与catch

Promise.prototype.then = function (onResolved, onRejected) {}
  Promise.prototype.catch = function (onRejected) {}

3. 给promise挂载几个常见方法 resolve、reject、all、race等等

resolve:返回的是一个指定结果的promise对象

Promise.resolve = function (value) { }

reject:返回失败状态的方法

Promise.reject = function (value) { }

all:返回一个promise对象,只有当promise都返回的时候,这个状态才算成功

Promise.all = function (value) { }

race:返回一个promise对象,它的状态是由第一个返回的对象确定的,这个race里面哪个函数先执行完,就直接返回第一个值,其他的继续执行

Promise.race = function (value) { }

4. 全局声明mypromise

window.Promise = Promise

5. 建立一个自执行函数 将上述内容全部包裹进去

(function (window) {

})()

step2 填充搭建好了的Promise框架

1.填充function Promise()

(1)let self = this固定一个function内部的this,这个this在后面会发挥很大作用

(2)self.status = 'pending'为Promise函数本体添加一个基础状态‘pending'

(3)self.data = undefined建立一个data源,用来存储resolve传回来的结果

(4)self.callbacks = []建立一个数组,用来将promise中的回调全部保存起来

2.填充function resolve()

(1)        if (self.status !== 'pending') {           return         }判断当前传入进程的状态是否为pending,是就继续下面的操作,不是就直接返回

promise内部有三种状态pending、resolved、rejected,这三种状态都是一种开关变量,如果该状态从pending转为其他状态后将无法改变。

(2)self.status = 'resolved'将该进程的状态改为resolved

(3)self.data = value将value存起来,待会then中的回调会需要使用该数据

(4)放上最重要的执行函数部分,如果sele.data中有待执行的callback函数,立即异步执行它

if (self.callbacks.length > 0) {
      setTimeout(() => {
        self.callbacks.forEach(callbackObj => {
          callbackObj.onResolved(value)
        })
      }, 0)
    }

3.填充function reject()

(1) 与resolve函数相同,此处简略

4.填充execotor方法

promise主体在执行时如果出错,错误信息被catch捕捉,此时catch会跳至该函数来单独执行一个reject

try {
       execotor(resolve, reject)
     } catch (error) {
       reject(error)
     }

5.填充.then函数

首先我们要区分传入进程的状态,如果是pending状态就把回调函数存起来,如果不是pending状态就干点什么它应该做的

(1)if (self.status === 'pending')如果当前的状态是pending的话,我们就把它保存起来

self.callbacks.push({
      onResolved() { onResolved(self.data) },
      onRejected() { onRejected(self.data) }
    })

(2)else if (self.status === 'resolved')如果status的状态是resolved

我们就开开心心的给它执行一下

setTimeout(() => {
      onResolved(self.data)
    }, 0)

可是有这么一种状态:resolve没有执行,但此时状态却已经改变了,我们就不能执行resolve而改为执行rejected

else{
     setTimeout(() => {
       onRejecyed(self.data)
     }, 0)
   }

经过了如同怎么把大象塞进冰箱一样“简略”的两步,我们就实现了一个简易的Promise                        

是不是很简单呀,快叫上身边的小伙伴一起来试一试吧!

总结

到此这篇关于实现一个简易promise的文章就介绍到这了,更多相关实现简易promise内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript延迟加载
Mar 09 Javascript
js 调整select 位置的函数
Feb 21 Javascript
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
Oct 20 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
jQuery实现元素的插入
Feb 27 Javascript
JS监听事件的叠加和移除功能
Nov 19 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
一定要知道的 25 个 Vue 技巧
原型和原型链 prototype和proto的区别详情
Nov 02 #Javascript
浅谈克隆 JavaScript
Nov 02 #Javascript
WebWorker 封装 JavaScript 沙箱详情
quickjs 封装 JavaScript 沙箱详情
Nov 02 #Javascript
js 数组 fill() 填充方法
浅谈 JavaScript 沙箱Sandbox
You might like
Codeigniter注册登录代码示例
2014/06/12 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
应聘教师自荐信
2013/10/12 职场文书
班组长岗位职责范本
2014/01/05 职场文书
写给女生的道歉信
2014/01/08 职场文书
詹天佑教学反思
2014/04/30 职场文书
大四毕业生自荐书
2014/07/05 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
复兴之路观后感
2015/06/02 职场文书
工作年限证明范本
2015/06/15 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL