第一步: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. [leetcode]692. Top K Frequent Words频率最高的前K个单词

    这个题的排序是用的PriorityQueue实现自动排列,优先队列用的是堆排序,堆排序请看:http://www.cnblogs.com/stAr-1/p/7569706.html 自定义了优先队列的 ...

  2. windows和Linux的文件路径

    (1)windows的文件路径格式"E:\Python\workplace\codes"单反斜杠的方式,但是在很多编程语言中会不认识"\"字符,可能会把它识别成 ...

  3. Java内存模型精讲

    1.JAVA 的并发模型 共享内存模型 在共享内存的并发模型里面,线程之间共享程序的公共状态,线程之间通过读写内存中公共状态来进行隐式通信 该内存指的是主内存,实际上是物理内存的一小部分 2.JAVA ...

  4. git基础-撤销操作

    ---恢复内容开始--- 撤销操作 在任何阶段,你都有可能想要撤销某些操作. 当我们提交完了代码,发现漏掉了几个文件没有添加,后者提交信息写错了,此时,可以运行--amend选项的提交命令尝试重新提交 ...

  5. pxe过程和原理

    pxe过程和原理 概要 远程安装和启动操作系统 网卡固件支持pxe的接口,一般是有基本的ip/udp协议栈,支持dhcp, tftp协议:bios中可以设置通过pxe启动操作系统 启动过程,大致如下: ...

  6. Unraid修改docker镜像地址&默认启动

    起源 由于Unraid系统每次启动都会清空Docker的镜像地址配置,故需要默认配置镜像地址 方法 添加修改镜像脚本到开机文件中实现 先找一个镜像加速地址,我使用的是阿里云的容器镜像服务 形如 :ht ...

  7. 5款极简极美WordPress主题,亲测可用附送源码

    2020年深冬,新闻上报道是.从1950年以来最寒冷的冬天. 一个周六的下午,我找遍了全网的简约博客主题,搭建了三年来的第7个独立博客, 多么难得的周末啊,我却在家花了一整天的时间.整理出直接套用5️ ...

  8. 【Java基础】Java 语言概述

    Java 语言概述 主要应用场景 JavaEE.大数据.Android 开发方向. 基础知识概述 编程语言核心结构 变量.基本语法.分支.循环.数组.- Java 面向对象的核心逻辑 OOP.封装.继 ...

  9. SpringBoot入门 简单搭建和使用

    前言 差不多两年前,那个时候我准备要做毕业设计了,才第一次知道java有框架这种东西,在网上找了好多SSM的教程,那会儿真的是Spring+SpringMVC+MyBatis搭建的,印象极深的是还要写 ...

  10. 一文带你学会AQS和并发工具类的关系2

    1.创建公平锁 1.使用方式 Lock reentrantLock = new ReentrantLock(true); reentrantLock.lock(); //加锁 try{ // todo ...