教你一步步实现一个简易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 无提示关闭浏览器页面的代码
Mar 09 Javascript
基于jquery tab切换(防止页面刷新)
May 23 Javascript
JavaScript实现Flash炫光波动特效
May 14 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
js html实现计算器功能
Nov 13 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 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设计模式 FlyWeight (享元模式)
2011/06/26 PHP
php class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
javascript编程起步(第七课)
2007/02/27 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
Angular实现响应式表单
2017/08/04 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python实现linux下抓包并存库功能
2018/07/18 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
Python extract及contains方法代码实例
2020/09/11 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
介绍一下木马病毒的种类
2015/07/26 面试题
关于抽烟的检讨书
2014/02/25 职场文书
《王二小》教学反思
2014/02/27 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
合作与交流自我评价
2015/03/09 职场文书
《从现在开始》教学反思
2016/02/16 职场文书
团组织关系介绍信
2019/06/24 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
一条 SQL 语句执行过程
2022/03/17 MySQL
python使用torch随机初始化参数
2022/03/22 Python