自己的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内核设计与实现> 第一二章学习笔记 第一章 Linux内核简介 1.1 Unix的历史 Unix的特点 Unix很简洁,所提供的系统调用都有很明确的设计目的. Unix中一切皆 ...
- SVN入门教程
1. 什么是SVN SVN全名Subversion,即版本控制系统.SVN与CVS一样,是一个跨平台的软件,支持大多数常见的操作系统. 作为一个开源的版本控制系统,Subversion管理者随时间改变 ...
- Notepad++找回Plugin Manager{在v7.50后(包括7.50)不带有插件管理器(Plugin Manager)}
https://github.com/notepad-plus-plus/notepad-plus-plus/issues/2459 64 bit Plugin Manager is now avai ...
- HTML5的placeHolder在IE9下workaround引发的Bug(按下葫芦起了瓢)
详见StackOverFlow的:Simple jQuery form Validation: Checking for empty .val() failing in ie9 due to plac ...
- awk、sed、grep三大shell文本处理工具之awk的应用
awk 1.是什么 是一个编程语言.支持变量.数组.函数.流程控制(if...else/for/while) 单行程序语言. 2.工作流程 读取file.标准输入.管道给的数据,从第一行开始读取,逐行 ...
- js日期
常用函數: 創建一個日期對象 var ss =new Date(): 獲取一周的天數: ss.getDay(); 獲取1970年1月1日到現在的毫秒數: getTime(): 設置具體的日期: set ...
- Java代码redis基础操作
maven依赖包: <dependency> <groupId>redis.clients</groupId> <artifactId>jedis< ...
- Omni(USDT)钱包安装(ubuntu)
一.下载Omni Layer钱包 wget https://bintray.com/artifact/download/omni/OmniBinaries/omnicore-0.3.0-x86_64- ...
- 【题解】N皇后
题目描述 相信大家都听过经典的“八皇后”问题吧?这个游戏要求在一个8×8的棋盘上放置8个皇后,使8个皇后互相不攻击(攻击的含义是有两个皇后在同一行或同一列或同一对角线上). 桐桐对这个游戏很感兴趣,也 ...
- BZOJ1146[CTSC2008]网络管理——出栈入栈序+树状数组套主席树
题目描述 M公司是一个非常庞大的跨国公司,在许多国家都设有它的下属分支机构或部门.为了让分布在世界各地的N个 部门之间协同工作,公司搭建了一个连接整个公司的通信网络.该网络的结构由N个路由器和N-1条 ...