废话不多说,直接上代码:

class myPromise {
constructor(fn) {
this.status = 'pending';
this.resolveCbs = [];
this.rejectCbs = [];
this.value = null;
fn(this._resolve.bind(this), this._reject.bind(this));
return this;
}
_resolve(val) {
if (this.status === 'pending') {
this.value = val;
this.status = 'fulfilled';
this.resolveCbs.forEach(cb => {
cb(this.value);
})
}
}
_reject(err) {
if (this.status === 'pending') {
this.value = err;
this.status = 'rejected';
this.rejectCbs.forEach(cb => {
cb(this.value);
})
// 如果没有处理函数,则直接抛错
if (this.rejectCbs.length === 0) {
throw err
}
}
}
then(resolveCb, rejectCb) {
if (this.status !== 'pending') {
const cb = this.status === 'fulfilled' ? resolveCb : rejectCb;
const self = new myPromise((resolve, reject) => {
this._handleCb(cb, this.value, resolve, reject, self);
})
return self;
} else {
const self = new myPromise((resolve, reject) => {
if (typeof resolveCb === 'function') {
this.resolveCbs.push(res => {
this._handleCb(resolveCb, res, resolve, reject, self);
})
}
if (typeof rejectCb === 'function') {
this.rejectCbs.push(res => {
this._handleCb(rejectCb, res, resolve, reject, self);
})
}
})
return self;
}
}
catch(rejectCb) {
return this.then(null, rejectCb)
}
_handleCb(cb, res, resolve, reject, self) {
try {
const ret = cb(res)
if (ret instanceof Promise || ret instanceof myPromise) {
if (ret === self) {
throw new Error('检测到myPromise链式循环')
}
ret.then(res => resolve(res))
} else {
resolve(ret)
}
} catch (err) {
reject(err)
}
}
}
new myPromise((resolve, reject) => {
setTimeout(() => {
resolve(456)
}, 1000);
}).then(res => {
console.log(res)
throw 'hualala'
}).catch(err => {
console.log('heng!!!')
return new myPromise((resolve, reject) => {
setTimeout(() => {
reject(233)
}, 1000);
})
}).then(res => {
console.log(res)
})

这个简版的Promise已经可以实现到链式的地步了, 如果return是一个非Promise,则直接resolve,如果是Promise,则等then再resolve

 

自己的Promise的更多相关文章

  1. Javascript - Promise学习笔记

    最近工作轻松了点,想起了以前总是看到的一个单词promise,于是耐心下来学习了一下.   一:Promise是什么?为什么会有这个东西? 首先说明,Promise是为了解决javascript异步编 ...

  2. 路由的Resolve机制(需要了解promise)

    angular的resovle机制,实际上是应用了promise,在进入特定的路由之前给我们一个做预处理的机会 1.在进入这个路由之前先懒加载对应的 .js $stateProvider .state ...

  3. angular2系列教程(七)Injectable、Promise、Interface、使用服务

    今天我们要讲的ng2的service这个概念,和ng1一样,service通常用于发送http请求,但其实你可以在里面封装任何你想封装的方法,有时候控制器之间的通讯也是依靠service来完成的,让我 ...

  4. 闲话Promise机制

    Promise的诞生与Javascript中异步编程息息相关,js中异步编程主要指的是setTimout/setInterval.DOM事件机制.ajax,通过传入回调函数实现控制反转.异步编程为js ...

  5. 深入理解jQuery、Angular、node中的Promise

    最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供 ...

  6. Promise的前世今生和妙用技巧

    浏览器事件模型和回调机制 JavaScript作为单线程运行于浏览器之中,这是每本JavaScript教科书中都会被提到的.同时出于对UI线程操作的安全性考虑,JavaScript和UI线程也处于同一 ...

  7. JavaScript进阶之路——认识和使用Promise,重构你的Js代码

    一转眼,这2015年上半年就过去了,差不多一个月没有写博客了,"罪过罪过"啊~~.进入了七月份,也就意味着我们上半年苦逼的单身生活结束了,从此刻起,我们要打起十二分的精神,开始下半 ...

  8. 细说Promise

    一.前言 JavaScript是单线程的,固,一次只能执行一个任务,当有一个任务耗时很长时,后面的任务就必须等待.那么,有什么办法,可以解决这类问题呢?(抛开WebWorker不谈),那就是让代码异步 ...

  9. 浅谈Angular的 $q, defer, promise

    浅谈Angular的 $q, defer, promise 时间 2016-01-13 00:28:00  博客园-原创精华区 原文  http://www.cnblogs.com/big-snow/ ...

  10. angular学习笔记(二十八-附2)-$http,$resource中的promise对象

    下面这种promise的用法,我从第一篇$http笔记到$resource笔记中,一直都有用到: HttpREST.factory('cardResource',function($resource) ...

随机推荐

  1. 关于QQ的NABCD模型

    关于QQ的NABCD模型 N--Need 随着电脑的普及,人们在网络上进行交流的时间越来越多,由于现有的交流工具还不是那么的完善,还不能够完全满足人们在交流时的需求.因此为了满足人们更多的需求,我们设 ...

  2. 接口(interface)与多态

    1. 接口(interface)是抽象方法与常量值的集合: 2. 从本质上来讲,接口是一种特殊的抽象类,这种抽象类中只包含常量与方法的定义,而没有变量和方法的实现: 3. 接口中声明的属性默认为:pu ...

  3. Golang 入门~~基础知识

    变量声明 //通用形式,指定变量名,变量类型,变量值 var name int = 99 fmt.Println(name) //指定变量名,以及变量类型,未指定值的时候默认是类型零值 var age ...

  4. SMBv1 is not installed by default in Windows 10 Fall Creators Update 2017 and Windows Server, Semi-annual Channel

    windows 10 rs3 release enable SMBv1 windows 10 rs3 release file sharing https://support.microsoft.co ...

  5. APS.NET MVC4生成解析二维码简单Demo

    一.视图 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewpor ...

  6. Entity Framwork学习笔记

    一.First Demo

  7. MSTSC 3389 端口修改

    1. 启动注册表编辑器. 2. 找到并单击以下注册表子项: 3. HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\Terminal Server ...

  8. Mark 韦氏拼音 邮政式拼音 和汉语拼音

    一直感觉很多大学名字不像是汉语拼音也不像是英文,百度了下原来是三种不同的拼音方式: 转载百度百科: 邮政式拼音和威妥玛拼音法并未完全消失.北京大学(Peking University).清华大学(Ts ...

  9. Angular 简单的Post

    <!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...

  10. hive-site.xml

    https://cwiki.apache.org/confluence/display/Hive/AdminManual+MetastoreAdmin#AdminManualMetastoreAdmi ...