第一步:Promise构造函数接受一个函数作为参数,该函数的两个参数分别是:resolve和reject;
function Promise(task) {
// 缓存this
let that = this
// 进行中的状态
this.status = 'pending'
//初始值
this.value = undefined
// 存放成功后要执行的回调函数的序列
that.onResolvedCallbacks = []
// 存放失败后要执行的回调函数的序列
that.onRejectCallbacks = []
// 该方法将Promise由pending变为fulfiled
function resolve(value) {
if(that.status == 'pending') {
that.status = 'fulfiled'
that.value = value
that.onResolvedCallbacks.forEach(cb => cb(that.value))
}
}
// 该方法是将Promise由pending变成rejected
function reject(reason) {
if(that.status == 'pending') {
that.status = 'rejected'
that.value = reason
that.onRejectCallbacks.forEach(cb => cb(that.value))
}
}
try {
// 每一个Promise在new一个实例的时候 接受的函数都是立即执行的
task(resolve, reject)
} catch(e) {
reject(e)
}
}
第二部 写then方法,接收两个函数onFulfilled onRejected,状态是成功态的时候调用onFulfilled 传入成功后的值,失败态的时候执行onRejected,传入失败的原因,pending 状态时将成功和失败后的这两个方法缓存到对应的数组中,当成功或失败后 依次再执行调用
Promise.prototype.then = function(onFulfilled, onRejected) {
if(this.status == 'fulfiled') {
onFulfilled(this.value)
}
if(this.status == 'rejected') {
onRejected(this.value)
}
if (this.status == 'pending') {
this.onResolvedCallbacks.push(onFulfilled(this.value));
this.onRejectCallbacks.push(onRejected(this.value));
}
}
new Promise(function (resolve, reject) {
resolve(100);// reject(100)
}).then(function (data) {
console.log('666', data)
})

 

如何手动封装Promise函数的更多相关文章

  1. 使用promise手动封装ajax函数

    最近在做一个单页应用,node和浏览器仅通过json传输数据,因为是只有自己用等于是锻炼一下自己,所以也不用考虑seo的问题,node端我已经写好了,但是浏览器端想要用ajax原生太麻烦,用封装的函数 ...

  2. 封装原生promise函数

    阿里面试题: 手动封装promise函数 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  3. Thinkphp3.2.3框架下封装公共的函数,例如封装CURL函数来获取接口数据

    当我们需要在控制层调用相同的封装函数时,写多次相同的函数,显得代码十分的拉杂,不精简: TP框架有一个很好的机制,可以再Common定义一个function.php函数,当我们在控制层调用的时候直接调 ...

  4. 手动封装AJAX

    正常函数的调用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  5. 【Vue】---- 手动封装on,emit,off

    一.概念 1. $on("事件名称",回调函数) 事件绑定,一个事件名称上面可能绑定多个函数 2. $emit("事件名称",需要传递的值) 事件触发时,会触发 ...

  6. jQuery编写插件--封装全局函数的插件(一些常用的js验证表达式)

    上一篇写到了jQuery插件的3种类型,介绍了第一种类型的写法--封装jQuery对象的方法插件.这一篇要介绍第二种插件类型:封装全局函数的插件:这类插件就是在jQuery命名空间内部添加函数:这类插 ...

  7. Thinkphp框架下封装文件下载函数

    第一步:开启php_fileinfo.dll 方法:打开php.ini,将874行的;extension=php_fileinfo.dll前面的分号注释去掉即可: 第二步:控制层封装文件下载函数 fu ...

  8. 封装PDO函数

    funPDO.php <?php /** * @title: 封装PDO函数 * * @Features: * 1. 封装 SELECT ,INSERT,DELETE,UPDATE 操作 @do ...

  9. 原生javascript封装的函数

    1.javascript 加载的函数 window.onload = function(){} 2.封装的id函数 function $(id) { return document.getElemen ...

随机推荐

  1. Qt学习笔记-Qt-4.8.6+phonon+mplayer

    首先,用phonon播放音乐时,可以使用mplayer.首先,你的设备上需要安装一个mplayer并测试能用. 然后安装后端播放插件. 我用的是网上找的phonon-mplayer. 按照网上的方法, ...

  2. 使用BigDecimal舍小数取整数

    项目需求说明: 解决WMS系统收货容差问题,例如:SKU的采购数量95件,容差是5,95+95*5/100=99.75,传WMS的数量是99,且容差传零. 参数说明: 其中ROUND_UP:向上取整, ...

  3. collection常用功能:

    collection常用功能: Collection是所有单列集合的父接口,因此在collection中定义了单列集合(List)和(Set)通用的一些方法.这些方法可用于操作所有的单列集合,方法如下 ...

  4. 【JavaWeb】现代 JavaScript 教程

    js_model_tutorial !!待更新 前言 现代 JavaScript 教程的学习笔记,它是一份不错的学习资源,感谢开源. 中文链接 基础 函数 代码示例 函数的声明方式 function ...

  5. 【C++】《C++ Primer 》第八章

    第八章 IO库 一.IO类 1. 标准库定义的IO类型 头文件 作用 类型 iostream 从标准流中读写数据 istream, wistream 从流读取数据 ostream, wostream ...

  6. PMP知识领域

    · 十大知识领域 整合-项目整合管理 识别.定义.组合.统一和协调个项目管理过程组的各种过程和活动而展开的活动与过程. 整合:统一.合并.沟通和简历联系:贯穿项目始终 七个过程组 一.制定项目章程(启 ...

  7. Rabbitmq可靠消息投递,消息确认机制

    前言 我们知道,消息从发送到签收的整个过程是 Producer-->Broker/Exchange-->Broker/Queue-->Consumer,因此如果只是要保证消息的可靠投 ...

  8. docker logs 查看容器日志操作

    查看日志 官方文档:https://docs.docker.com/engine/reference/commandline/logs/ # 查看指定数量的实时日志 # docker logs -tf ...

  9. (十五)xml模块

    xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多,但json使用起来更简单,不过在json还没诞生的黑暗年代,大家只能选择用xml呀,至今很多传统公司如金融行业的很多系统的接口还主要 ...

  10. Docker 如何动态修改容器端口映射

    Docker端口映射往往是Docker Run命令时通过-p将容器内部端口映射到宿主机的指定端口上,一般来说容器的端口所对应的端口是提前确定需要映射的.但是有些情况下不得不需要临时映射端口,例如Doc ...