用es6实现一个promsie
Promise 使用方法：https://www.runoob.com/w3cnote/javascript-promise-object.html
直接上代码，相关的解释都在代码的注释里面，这里以minPromise 代替 Promise：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body> <script type="text/javascript">
class minPromise {
/**
比如
var p = new minPromise ((resolve, reject)=> {
// 这里是处理的代码，脑补
})
那么 executor 就是 (resolve, reject) => { ... }
**/
constructor(executor){
// executor 必须是 function 类型
if (typeof executor !== 'function') {
throw new Error('Executor must be a function');
} // 初始状态是 PENDING
this.state = 'PENDING';
this.chained = []; const resolve = res => {
// 如果状态不是 PENDING 那就不进行处理了
if (this.state !== 'PENDING') {
return;
} // 假如说res这个对象有then的方法，我们就认为res是一个promise
if (res != null && typeof res.then === 'function') {
return res.then(resolve, reject);
} this.state = 'FULFILLED';
this.internalValue = res;
// 这里用到 解构 相当于 for(let item of this.chainer) 然后 { onFulfilled } = item ， 下同
for (let { onFulfilled } of this.chained) {
onFulfilled(res);
}
}; const reject = err => {
if (this.state !== 'PENDING') {
return;
}
this.state = 'REJECTED';
this.internalValue = err;
for (const { onRejected } of this.chained) {
onRejected(err);
}
}; // 这里相当于函数初始运行 利用了构造函数自动执行的特性
try{
executor(resolve, reject);
}catch(err){
reject(err);
}
} // 状态是 FULFILLED 或者 REJECTED 说明已经执行完 resolve 方法， internalValue 也已经有值了，可以直接执行
// 状态是 PENDING 说明 resolve 的方法是异步的， 就先把 onFulfilled, onRejected 事件放到 chained 里面，存起来，等 resolve 的时候在执行 // 如果不需要then的链式调用， 用这个then就可以
// then(onFulfilled, onRejected) {
// if (this.state === 'FULFILLED') {
// onFulfilled(this.internalValue);
// } else if (this.state === 'REJECTED') {
// onRejected(this.internalValue);
// } else {
// this.chained.push({ onFulfilled, onRejected });
// }
// } // 需要then的链式调用的话 让then返回 Promise 就行
then(onFulfilled, onRejected) {
return new minPromise((resolve, reject) => {
// 这里把 onFulfilled onRejected 封装了下 是因为 resolve(onFulfilled(res)) 或者 reject(onRejected(err)) 执行的时候 有可能报错，做了错误兼容处理
const _onFulfilled = res => {
try {
//注意这里resolve有可能要处理的是一个promise
resolve(onFulfilled(res));
} catch (err) {
reject(err);
}
};
const _onRejected = err => {
try {
reject(onRejected(err));
} catch (_err) {
reject(_err);
}
};
if (this.state === 'FULFILLED') {
_onFulfilled(this.internalValue);
} else if (this.state === 'REJECTED') {
_onRejected(this.internalValue);
} else {
this.chained.push({ onFulfilled: _onFulfilled, onRejected: _onRejected });
}
});
},
// resolve方法 相当于返回一个Promise对象
resolve(value) {
return new minPromise(value => {
resolve(value);
})
},
reject(reason) {
return new minPromise((resolve, reject) => {
reject(reason);
});
},
// 全部成功的时候返回的是一个结果数组,失败的时候 会直返回失败
all(promiseArr) {
return new minPromise((res, rej) => {
// promiseArr 所有的值都看一下
var arr = [];
var times = 0;
processResult = (index, result) =>{
arr[index] = result;
times++;
// arr.length == promiseArr.length, 代表全部都 resolve 成功
if (times == promiseArr.length) {
// 在这里执行最后的 resolve
res(arr);
}
}; for (let i = 0; i < promiseArr.length; i++) {
var oPromise = promiseArr[i];
// 是 promise
if (typeof oPromise.then == 'function') {
oPromise.then((val) =>{
// then 成功后把值存下来
processResult(i, val)
}, (reason) =>{
// 不成功 直接 reject
rej(reason);
})
}else {
processResult(i, oPromise);
}
}
});
}, // 哪个实例获得结果最快，就返回那个结果，不管结果本身是成功还是失败；
race(promiseArr) {
return new minPromise((resolve, reject) => {
promiseArr.forEach((promise) => {
promise.then(resolve, reject);
});
});
}, } // 测试非链式调用
let p = new minPromise(resolve => {
setTimeout(() => resolve('Hello'), 100);
}); p.then(res => console.log(res)); p = new minPromise((resolve, reject) => {
setTimeout(() => reject(new Error('woops')), 100);
}); p.then(() => {}, err => console.log('Async error:', err.stack)); // 测试链式调用
let p2 = new minPromise(resolve => {
setTimeout(() => resolve('World'), 100);
}); p2.
then(res => new minPromise(resolve => resolve(`Hello, ${res}`))).
then(res => console.log(res)); </script> </body>
</html>
参考：https://segmentfault.com/a/1190000014440641 ，https://juejin.im/post/5aa7868b6fb9a028dd4de672#heading-9
2020.3.11 新增：
all(promiseArr) {
let result = []
promiseArr.forEach((item, index) => {
item.then(res => {
result[index] = res
i++
if(i === promiseArr.length) {
resolve(result)
}
}, err => {
reject(err)
})
}
}
用es6实现一个promsie的更多相关文章
- 用es6写一个分数库
es6发布后nodejs开始更新.最近写一些库发现新特性还是很好用的,于是回来写一个分数库练手. 对于es6本身 ... => 以及 array.includes 很简洁.class依然不是很顺 ...
- new.target元属性 | 分别用es5、es6 判断一个函数是否使用new操作符
函数内部有两个方法 [[call]] 和 [[construct]] (箭头函数没有这个方法),当使用new 操作符时, 函数内部调用 [[construct]], 创建一个新实例,this指向这个实 ...
- es6声明一个类
js语言的传统方式是通过定义构造函数,生成心得对象.是一种基于原型的面向对象系统.在es6中增加了class类的概念,可以使用class关键字来声明一个类.之后用这个类来实例化对象. 构造函数示例 c ...
- 用ES6创建一个简单工厂模式
1 什么是工厂模式? 工厂模式是用来创建对象的一种最常用的设计模式.我们不暴露创建对象的具体逻辑,而是将将逻辑封装在一个函数中,那么这个函数就可以被视为一个工厂.工厂模式根据抽象程度的不同可以分为:简 ...
- 不用循环，、es6创建一个长度为100的数组
问题描述:在不使用循环的条件下,如何创建一个长度为100的数组,并且数组的每一个元素是该元素的下标? 结果为: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1 ...
- es6 封装一个登录注册的验证滑块
1,需求分析 滑块从左滑到右,开始滑.结束滑两种状态.两种状态显示的内容和样式的不同. 这是淘宝注册验证滑块的示例图 2,代码分析 const render = Symbol('render') co ...
- es6 封装一个基础的表单验证
1, 需求分析 设计一个通用的表单验证,如果后期表单中添加了更多的需求,不需要更改之前的代码逻辑,最好不要改之前的代码,需要加什么直接加就好了. 2,代码分析 此表单验证最好返回一个函数,在api设计 ...
- ES6 自定义一个实现了Iterator接口的对象
参考资料 var obj = { data: [1,2,3,4,5], // 这里实际上就是去定义如何实现Iterator接口 [Symbol.iterator](){ const that = th ...
- 深入浅出ES6教程『async函数』
大家好,本人名叫苏日俪格,大家叫我 (格格) 就好,在上一章节中我们学到了Symbol & generator的用法,下面我们一起来继续学习async函数: async [ə'zɪŋk]:这个 ...
随机推荐
- selenium检测webdriver封爬虫的解决方法
有不少朋友在开发爬虫的过程中喜欢使用Selenium + Chromedriver,以为这样就能做到不被网站的反爬虫机制发现. 先不说淘宝这种基于用户行为的反爬虫策略,仅仅是一个普通的小网站,使用一行 ...
- RT-Thread代码启动过程与$Sub$ $main、$Super$ $main
文章转载自:https://blog.csdn.net/yang1111111112/article/details/80913001 我们找到系统复位的地方,可以往下单步跟踪. ①从系统初始化开始执 ...
- [Abp vNext微服务实践] - 租户登录
简介 Abp vNext微服务授权验证基于ids4,实现租户登录需要在授权服务中获取token,和之前的介绍的登录方式一样,只是多了tenant参数.本篇将介绍在Abp vNext授权服务中启用多租户 ...
- fonts/font-awesome-woff2 404问题
报错环境: vue 开发的项目 npm 引入的font-awesome, 页面正常显示,就是控制台会报这个错误 产生原因:因为服务器IIS不认SVG,WOFF/WOFF2 这几个文件类型,只要在IIS ...
- solr schema.xml配置
solr使用_version_来做文档的版本控制和修改时加锁(乐观锁) <field name="_version_" type="long" index ...
- Redis主从复制（读写分离）（四）
Redis主从复制(读写分离) 克隆三台linux虚拟机 9.1.1.克隆虚拟机 9.1.2.生成新的mack地址 9.1.3.主从复制配置 redis主从复制 概述 1.redis的复制功能 ...
- css3 制作圆环进度条
引子 移动端做一个 loadiing 加载的图标,跟以往沿用的都不太一样,是一个圆环进度条,圆环进度条也就罢了,还得能用百分比控制. CSS3 实现圆环 demo 刚开始写这个圆环的时候是参照帖子上给 ...
- Beep调用系统声音
using System.Runtime.InteropServices; 引用命名空间 [DllImport("kernel32.dll")]public static ...
- javascript内置对象一：String
<script> //string.split("-"),以字符"-"把string拆分成一个数组.返回一个数组 //array.joi ...
- 2016 NEERC, Moscow Subregional Contest K. Knights of the Old Republic（Kruskal思想）
2016 NEERC, Moscow Subregional Contest K. Knights of the Old Republic 题意:有一张图,第i个点被占领需要ai个兵,而每个兵传送至该 ...