教你一步步实现一个简易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 相关文章推荐
js继承的实现代码
Aug 05 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
Vue组件开发初探
Feb 14 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
Vue动态组件与异步组件实例详解
Feb 23 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
原生JavaScript实现留言板
Jan 10 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
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
基于jquery实现最简单的选项卡切换效果
2016/05/08 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
js css自定义分页效果
2017/02/24 Javascript
详解jquery和vue对比
2019/04/16 jQuery
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
django富文本编辑器的实现示例
2019/04/10 Python
django中瀑布流写法实例代码
2019/10/14 Python
python——全排列数的生成方式
2020/02/26 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
Python如何实现爬取B站视频
2020/05/20 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
ET Mall东森购物网:东森严选
2017/03/06 全球购物
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
英文翻译的自我评价语句
2013/10/04 职场文书
创业计划书——互联网商机
2014/01/12 职场文书
岗位职责说明书
2014/05/07 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
离婚协议书格式
2014/11/21 职场文书
学校捐书活动总结
2015/05/08 职场文书
暂住证明怎么写
2015/06/19 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js