教你一步步实现一个简易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 一道字符串分解的题目
Aug 03 Javascript
JS中的public和private对象,即static修饰符
Jan 18 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 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
php适配器模式介绍
2012/08/14 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
python django集成cas验证系统
2014/07/14 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
励志演讲稿200字
2014/08/21 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
事业单位考察材料范文
2014/12/25 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
反腐倡廉观后感
2015/06/08 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
background-position百分比原理详解
2021/05/08 HTML / CSS
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android
Python如何使用循环结构和分支结构
2022/04/13 Python
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL