promise 的实现

2019-11-21 admin
//定义新的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的实现和运作过程。

[转载]原文链接:https://segmentfault.com/a/1190000021081045

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-79633.html

文章标题:promise 的实现

相关文章
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 <!DOCTYPE html> <html lang="en" style="width: 100%; height:100%;"&gt...
2017-02-17
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
回到顶部