自己的Promise
废话不多说,直接上代码:
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的更多相关文章
- Javascript - Promise学习笔记
最近工作轻松了点,想起了以前总是看到的一个单词promise,于是耐心下来学习了一下. 一:Promise是什么?为什么会有这个东西? 首先说明,Promise是为了解决javascript异步编 ...
- 路由的Resolve机制(需要了解promise)
angular的resovle机制,实际上是应用了promise,在进入特定的路由之前给我们一个做预处理的机会 1.在进入这个路由之前先懒加载对应的 .js $stateProvider .state ...
- angular2系列教程(七)Injectable、Promise、Interface、使用服务
今天我们要讲的ng2的service这个概念,和ng1一样,service通常用于发送http请求,但其实你可以在里面封装任何你想封装的方法,有时候控制器之间的通讯也是依靠service来完成的,让我 ...
- 闲话Promise机制
Promise的诞生与Javascript中异步编程息息相关,js中异步编程主要指的是setTimout/setInterval.DOM事件机制.ajax,通过传入回调函数实现控制反转.异步编程为js ...
- 深入理解jQuery、Angular、node中的Promise
最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供 ...
- Promise的前世今生和妙用技巧
浏览器事件模型和回调机制 JavaScript作为单线程运行于浏览器之中,这是每本JavaScript教科书中都会被提到的.同时出于对UI线程操作的安全性考虑,JavaScript和UI线程也处于同一 ...
- JavaScript进阶之路——认识和使用Promise,重构你的Js代码
一转眼,这2015年上半年就过去了,差不多一个月没有写博客了,"罪过罪过"啊~~.进入了七月份,也就意味着我们上半年苦逼的单身生活结束了,从此刻起,我们要打起十二分的精神,开始下半 ...
- 细说Promise
一.前言 JavaScript是单线程的,固,一次只能执行一个任务,当有一个任务耗时很长时,后面的任务就必须等待.那么,有什么办法,可以解决这类问题呢?(抛开WebWorker不谈),那就是让代码异步 ...
- 浅谈Angular的 $q, defer, promise
浅谈Angular的 $q, defer, promise 时间 2016-01-13 00:28:00 博客园-原创精华区 原文 http://www.cnblogs.com/big-snow/ ...
- angular学习笔记(二十八-附2)-$http,$resource中的promise对象
下面这种promise的用法,我从第一篇$http笔记到$resource笔记中,一直都有用到: HttpREST.factory('cardResource',function($resource) ...
随机推荐
- Linux内核分析— —进程的切换和系统的一般执行过程
进程调度的时机 linux进程调度是基于分时和优先级的 中断处理过程(包括时钟中断.I/O中断.系统调用和异常)中,直接调用schedule(),或者返回用户态时根据need_resched标记调用s ...
- FMDB数据库升级
FMDBMigrationManager 是与FMDB结合使用的一个第三方,可以记录数据库版本号并对数据库进行数据库升级等操作.首先要集成FMDB和FMDBMigrationManager,建议使用c ...
- 速读《构建之法》(Build to win)有感
通过这两天时间,我粗读了<构建之法>这本书.老实说,对于这样四百多页的一本书,刚开始把这样的任务当作是一种负担,然而当我开始真正接触它时却被它幽默有趣的风格所深深吸引,它不同于以往学习的教 ...
- Beta阶段敏捷冲刺一
一.举行站立式会议 1.当天站立式会议照片一张 2.团队成员报告 林楚虹 (1) 昨天已完成的工作:查找连接数据库有关资料,请教在上一轮已经连接成功的同学 (2) 今天计划完成的工作:连接上数据库 ( ...
- JavaScript使用childNodes和children
childNodes用来获取一个元素的所有子元素,这个包括元素节点和文本节点. children用来获取一个元素的子元素节点,注意只是元素节点 其中DOM中常见的三种节点分别如下: 元素节点:< ...
- shell脚本--continue、break
shell中的continue和break和其他语言中的使用方法一模一样:continue用于跳过本次循环,break用于中断本层的循环 下面是使用例子: #!/bin/bash #文件名:test. ...
- 表格属性和BFC(block framing content)
th和tr都是表示列但是 th有一个居中加粗的效果. 表单是由 : 1表单域:<form name=" " method="get/post" acti ...
- Null Object Design Pattern (Python recipe)
Null Object 个人感觉非常有用.也是在review公司其他同事写代码的时候看到. 当时使用了flask的request全局请求变量g,然后使用了g.x保存了一个东西. 当时在view代码读取 ...
- 关于flask 上直接使用py.test测试框架进行测试
这个周末基本上都在研究这玩意儿中度过了,虽然效率不高,英文文档看得晕头转向,但是好歹弄出来了 有个结果测试也通过了现在粗略总结一下有时间补上更多详细的例子. 首先使用py.test测试框架,可以做最简 ...
- Mysql索引结构及常见索引的区别
一.Mysql索引主要有两种结构:B+Tree索引和Hash索引 Hash索引 mysql中,只有Memory(Memory表只存在内存中,断电会消失,适用于临时表)存储引擎显示支持Hash索引,是M ...