用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]:这个 ...
随机推荐
- CF1037H Security——SAM+线段树合并
又是一道\(SAM\)维护\(endpos\)集合的题,我直接把CF700E的板子粘过来了QwQ 思路 如果我们有\([l,r]\)对应的\(SAM\),只需要在上面贪心就可以了.因为要求的是字典序比 ...
- loj2587 「APIO2018」铁人两项[圆方树+树形DP]
主要卡在一个结论上..关于点双有一个常用结论,也经常作为在圆方树/简单路径上的良好性质,对于任意点双内互不相同的三点$s,c,t$,都存在简单路径$s\to c\to t$,证明不会.可以参见clz博 ...
- BZOJ2140 稳定婚姻[强连通分量]
发现如果$B_i$和$G_j$配对,那么$B_j$又要找一个$G_k$配对,$B_k$又要找一个$G_l$配对,一直到某一个$B_x$和$G_i$配对上为止,才是不稳定的. 暴力是二分图匹配.匈牙利算 ...
- 基于Ajax技术的前后端Json数据交互方式实现
前言 使用浏览器访问网站是日常生活中必不可少的一件事情,当我们在浏览器地址栏中输入网址后会看到网站的内容,那么这个过程中发生了什么?下面简单介绍下浏览器访问网站过程. 第一步:浏览器向DNS服务器发起 ...
- BZOJ 4802: 欧拉函数 (Pollard-Rho)
开始一直T,原来是没有srand- CODE #include<bits/stdc++.h> using namespace std; typedef long long LL; vect ...
- java8 time计算时间差
最近使用Java8编写代码时,需要计算时间差,现整理如下 前言 本次使用了Java8提供的ChronoUnit工具类,它主要提供以下几种时间维度 枚举 枚举 说明 NANOS 毫微秒(毫秒的10000 ...
- BZOJ 2165: 大楼 倍增Floyd
卡了一上午常数,本地13s,可是bzoj 就是过不去~ #include <bits/stdc++.h> #define N 102 #define M 55 #define ll lon ...
- 记录一：tensorflow下载安装
1.下载Anaconda,默认选项安装 2.验证 conda --v 3.下载 tensorflow 3.1 创建环境 conda create -n tensorflow python=3. ...
- maven创建可执行jar包项目的配置
<build> <plugins> <plugin> <artifactId>maven-shade-plugin</artifactId> ...
- 基于熵的方法计算query与docs相似度
一.简单总结 其实相似度计算方法也是老生常谈,比如常用的有: 1.常规方法 a.编辑距离 b.Jaccard c.余弦距离 d.曼哈顿距离 e.欧氏距离 f.皮尔逊相关系数 2.语义方法 a.LSA ...