实现之前,我们先看看Promise的调用

const src = 'https://img-ph-mirror.nosdn.127.net/sLP6rNBbQhy0OXFNYD9XIA==/799107458981776900.jpg?imageView&thumbnail=223x125&quality=100'

const promise = new Promise(function (resovle, reject) {
var img = document.createElement('img')
img.onload = function () {
resovle(img)
} img.onerror = function () {
reject()
} img.src = src
}) promise.then(function (img) {
console.log(img.width)
}, function () {
console.log('错误')
}).then(function (img) {
console.log(img.height)
document.body.appendChild(img)
})

下面我们一边分析,一边实现自己的promise。

首先Promise是一个构造方法,并且初始化的时候传入了一个函数作为参数

var MyPromise = function (doSomething) {
this.doSomething = doSomething
}

then方法很明显可以看出是Promise的实例方法,并且可以实现链式调用,说明在then方法中返回了Promise实例,即this

MyPromise.prototype.after = function (resovle, reject) {
this.doSomething(resovle, reject)
return this
}

此处的after方法相当于then方法。那么MyPromise的简易版就完成了。他的调用方法和示例的调用是一样的。

const src = 'https://img-ph-mirror.nosdn.127.net/sLP6rNBbQhy0OXFNYD9XIA==/799107458981776900.jpg?imageView&thumbnail=223x125&quality=100'

const mypromise = new MyPromise(function (resovle, reject) {
var img = document.createElement('img')
img.onload = function () {
resovle(img)
} img.onerror = function () {
reject()
} img.src = src
}) mypromise.after(function (img) {
console.log(img.width)
}, function () {
console.log('错误')
}).after(function (img) {
console.log(img.height)
document.body.appendChild(img)
})

后记:相比Promise,这个实现过于简单,功能上简直不值一提。仅仅抛砖引玉。

10行代码实现简易版的Promise的更多相关文章

  1. 《zw版·Halcon-delphi系列原创教程》简单的令人发指,只有10行代码的车牌识别脚本

    <zw版·Halcon-delphi系列原创教程>简单的令人发指,只有10行代码的车牌识别脚本 简单的令人发指,只有10行代码的车牌识别脚本      人脸识别.车牌识别是opencv当中 ...

  2. 第一行代码 Android 第二版到货啦

    今日android第一行代码[第二版]已到,收获的季节到了 先看一下封面 书签: 以后就把空闲时间送给它吧 先来看一下本书的目录: 第1章 开始启程--你的第1行Android代码 第2章 先从看得到 ...

  3. 如何用Python统计《论语》中每个字的出现次数?10行代码搞定--用计算机学国学

    编者按: 上学时听过山师王志民先生一场讲座,说每个人不论干什么,都应该学习国学(原谅我学了计算机专业)!王先生讲得很是吸引我这个工科男,可能比我的后来的那些同学听课还要认真些,当然一方面是兴趣.一方面 ...

  4. 10行代码,用python能做出什么骚操作

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:小栗子 PS:如有需要Python学习资料的小伙伴可以加点击下方链接自 ...

  5. 200行代码实现简版react🔥

    200行代码实现简版react

  6. [Unity Editor]10行代码搞定Hierarchy排序

    在日常的工作和研究中,当给我们的场景摆放过多的物件的时候,Hierarchy面板就会变得杂乱不堪.比如这样:    过多的层次结构充斥在里面,根层的物件毫无序列可言,整个层次面板显示非常的杂乱不堪,如 ...

  7. 10行代码搞定移动web端自定义tap事件

    发发牢骚 移动web端里摸爬滚打这么久踩了不少坑,有一定移动web端经验的同学一定被click困扰过.我也不列外.一路走来被虐的不行,fastclick.touchend.iscroll什么的都用过, ...

  8. delphi 牛逼 了 app (已在软件界掀起波澜)10分钟10行代码做出让人惊叹的程序

    (已在软件界掀起波澜)10分钟10行代码做出让人惊叹的程序 http://v.qq.com/x/page/m0328h73bs7.html?ptag=bbs_csdn_net

  9. 纯css爱心代码-最近超级火的打火机与公主裙中的爱心代码(简易版)

    theme: cyanosis 最近打火机与公主裙中的爱心代码超级火,看着特别心动,让俺用css来写个简易版!!! 先看效果: 代码拆解: 主要是分为3大部分 分子颗粒 爱心 动画 代码实现: 分子颗 ...

随机推荐

  1. 网站SEO中服务器优化的三个问题

    网站做好之后,站长第一件事就是想到去做SEO,但是有一些网站在做优化的时候,出现一些奇怪的情况,比如说优化已经不错的网站,排名突然就掉下来了:还有一些网站各项优化工作都是非常认真,但是排名却一直不上来 ...

  2. 剑指offer-面试题33-二叉搜索树的后序遍历序列-二叉树遍历

    /* 题目: 给定一个序列,判断它是否为某个二叉搜索树的后序遍历. */ /* 思路: 二叉搜索树:左子树<根节点<右子树. 序列的最右端为根节点,小于根节点的左半部分为左子树,大于根节点 ...

  3. Luogu2040 | 打开所有的灯 (广搜+状压)

    题目背景 pmshz在玩一个益(ruo)智(zhi)的小游戏,目的是打开九盏灯所有的灯,这样的游戏难倒了pmshz... 题目描述 这个灯很奇(fan)怪(ren),点一下就会将这个灯和其周围四盏灯的 ...

  4. Lucene索引维护(添加、修改、删除)

    1. Field域属性分类 添加文档的时候,我们文档当中包含多个域,那么域的类型是我们自定义的,上个案例使用的TextField域,那么这个域他会自动分词,然后存储            我们要根据数 ...

  5. windows系统安装Java(详细版)

    1.下载JDK 官网下载: www.oracle.com/technetwork… 百度云下载: pan.baidu.com/s/1LGf3Podz…提取码:s6mg (官网下载步骤) 进入官网 ht ...

  6. 【学习笔记】BP神经网络

    转自 huaweizte123的CSDN博客  链接 https://blog.csdn.net/huaweizte123/article/details/78803045 第一步.向前传播得到预测数 ...

  7. IDEA如何快速搭建Java开发环境

    作为IntelliJ IDEA mac新手,IDEA如何快速搭建Java开发环境呢?今天小编就给大家带来了IntelliJ IDEA mac使用教程,想知道IDEA如何快速搭建Java开发环境? 全局 ...

  8. UVA10085-不知错在何处

    #include<cstdio> #include<cstring> #include<iostream> #include<algorithm> #i ...

  9. [PAT] A1021 Deepest Root

    [题目大意] 给出n个结点和n-1条边,问它们能否形成一棵n个结点的树,如果能,从中选出结点作为树根,使整棵树的高度最大.输出所有满足要求的可以作为树根的结点. [思路] 方法一:模拟. 1 连通.边 ...

  10. QS Network ZOJ - 1586 板子题

    #include<iostream> #include<algorithm> using namespace std; ; struct edge{ int a,b; doub ...