promise 的实现

//定义新的Promise类
class LxPromise{
            constructor(fn) {

                //将成功的事件函数集成在successList数组里
                this.successList  = [];
                //这里将所有的失败函数集成到failList里
                this.failList = []

                //pending,fullfilled,rejected

                this.state = "pending"

                //传入的函数对象,(异步操作的函数内容)
                //并且调用resolveFn()和rejectFn()方法
                //将resolveFn/rejectFn和传入的func绑定
                //resolve() => resolveFn()
                //reject() => rejectFn()
                fn(this.resolveFn.bind(this),this.rejectFn.bind(this))
            }

            //定义then方法,把传入的func压入list数组
            then(successFn,failFn){
                if(typeof successFn=='function'){
                    this.successList.push(successFn)
                }
                if(typeof failFn=='function'){
                    this.failList.push(failFn)
                }
            }
            catch(failFn){
                if(typeof failFn=='function'){
                    this.failList.push(failFn)
                }
            }

            //声明resolve实现函数
            resolveFn(res){
                this.state = "fullfilled"
                this.successList.forEach(function(item,index){
                    //将成功的事件循环调用
                    item(res)
                })
            }
            //声明reject实现函数
            rejectFn(res){
                this.state = 'rejected'
                //注册到的失败所有事件进行调用
                this.failList.forEach(function(item,index){
                    item(res)
                })

                throw Error(res);
            }

        }
//******************LxPromise()构造结束*****************

开始调用

//参数
        var fn = function(resolve,reject){
            setTimeout(function(){
                if(true){
                    //函数调用
                    resolve("老陈promise成功")
                }else{
                    //函数调用
                    reject("老陈promise失败")
                }
            },1000)
        }

        //创建实例对象
        var p1 = new LxPromise(fn);

        //函数声明,和函数的具体操作
        p1.then(function(res){
            document.body.style.background = "greenyellow"
            console.log("这是成功做的事情")
            console.log(res)
        })

        p1.catch(function(res){
            document.body.style.background = "pink"
            console.log("这是失败做的事情")
            console.log(res)
        })

ok~实现!可能还不是很完整,不过旨在学习认清promise的实现和运作过程。

原文链接:segmentfault.com

上一篇:JavaScript两个不同类型之间是如何使用==进行比较的?
下一篇:elementUI的table表格表头错位问题解决办法

相关推荐

  • 🔥 Promise|async|Generator 实现&原理大解析 | 9k字

    笔者刚接触async/await时,就被其暂停执行的特性吸引了,心想在没有原生API支持的情况下,await居然能挂起当前方法,实现暂停执行,我感到十分好奇。好奇心驱使我一层一层剥开有关JS异步编程的...

    3 个月前
  • (通用 Socket.io、push-notification)教你实现 web 网站实时推送系统消息到“电脑任务通知栏”

    消息通知是 web 网站的一个基本常规功能。web 网站消息管理模块一般都是用户主动请求消息通知,即使采用 socket 技术,也仅仅只是在用户浏览当前系统网站时,才能发现系统推送的消息通知,这样很容...

    1 个月前
  • (小小黑科技)vue+echarts实现半圆图表

    如何用echarts实现半圆图表?在echarts官方实例倒腾一波,发现官方并没有提供半圆图表的写法,那怎么办呢?官方没提供,但需求还是要实现的。 半圆图表其实就是饼图的一半,那么简单的思路如下:设...

    1 年前
  • 龙骨换装游戏系统设计与实现(基于Egret+DragonBones龙骨动画)

    如何开发一个可维护性,可扩展,跨平台的换装游戏呢,本文从产品设计、龙骨动画、前端再到后端如何管理等角度,来介绍骨骼换装游戏从0到1的实现过程。 项目背景   我们一直在思考,如何能激励学员自主学习的积...

    3 个月前
  • 鼠标事件实现拖拽

    为什么需要拖拽 当前的互联网用户早已习惯了拖拽,习惯了拖拽带来的便利。任何一个前端项目都有加入拖拽这个功能的可能性。 拖拽的实现方案 鼠标事件实现 drag and drop api 这两种实现方...

    5 个月前
  • 高德地图实现(附案例)

    需求:基于高德地图实现地图展示实现步骤:1.首先注册登录并创建一个应用 image.png(/public/upload/db7478b92a72da60c0e15d99f5cd83d7) 2....

    1 个月前
  • 高德地图实现(附案例)

    需求:基于高德地图实现地图展示实现步骤:1.首先注册登录并创建一个应用 image.png(/public/upload/d8060ff8271b63096cb542d0c310299b) 2....

    25 天前
  • 高德地图+vue实现页面点击绘制多边形及多边形切割拆分

    最终效果 (/public/upload/7732e1e729bfcd99f99f56cd04ac17b1) 技术栈 项目中使用到的技术 高德基于vue的vueamap,组件使用的elemen...

    1 个月前
  • 马蜂窝推荐系统容灾缓存服务的设计与实现

    数据库突然断开连接、第三方接口迟迟不返回结果、高峰期网络发生抖动...... 当程序突发异常时,我们的应用可以告诉调用方或者用户「对不起,服务器出了点问题」;或者找到更好的方式,达到提升用户体验的目的...

    1 年前
  • 颜色十六进制转换rgb编码实现思路

    今天在某网上做面试题的时候,发现一道颜色进制转换的题目 题目如下: 请编写一个JavaScript函数toRgb,它的作用是转换CSS中常用的颜色编码要求。要求: 思路: 1.理解题目意思,也就...

    8 个月前

官方社区

扫码加入 JavaScript 社区