promise简单实现
function isFunction(fn){
return Object.prototype.toString.call(fn) === '[object Function]';
}
let ST = {
pending: 0,
resolved: 1,
rejected: 2
}
function Promise(fn){
let self = this;
self.status = ST.pending;
self.value = '';
self.reason = '';
self.resolveFns = [];
self.rejectFns = [];
//setTimeout延迟执行,将reslove执行放在下个循环,保证后续then方法先于它执行,不会出现前面已经resolve了,后面的then还没push进resolveFns数组
function resolve(val){
setTimeout(() => {
if(self.status == ST.pending){
self.status = ST.resolved;
self.value = val;
//用数组保存回调,是为了处理一个promise挂载多个then的情况
//注意不是链式,这种场景很少出现
/*
形如:
promise.then(resolve1,reject1)
promise.then(resolve2,reject2)
promise.then(resolve3,reject3)
*/
//在链式调用中,该数组通常只会有一个项,就是当前promise的下一个then里面的resolve函数
//且每次执行,通常都是一个新Promise的resolve数组
self.resolveFns.forEach(fn => fn());
}
})
}
function reject(val){
setTimeout(() => {
if(self.status == ST.pending){
self.status = ST.rejected;
self.reason = val;
self.rejectFns.forEach(fn => fn());
}
})
}
//执行出问题,直接reject,Promise的错误默认不会抛出到全局
try{
fn(resolve,reject);
}
catch(err){
reject(err);
}
}
Promise.prototype.then = function(onResolve,onReject){
let self = this;
//then每次执行都返回一个新的Promise,then方法要处理前一个promise的三种状态
return new Promise(function(resolve,reject){
function handle(value,thenFn){
let res = isFunction(thenFn) && thenFn(value) || value;
if(res instanceof Promise){
res.then(resolve,reject);
}
else{
resolve(res);
}
}
//处理三种状态
//fn函数体里,如果有错误; 会执行try catch里的 reject方法,执行then this.state就是rejected
//如果没错误且没异步,resolve this.state就是resolved
//如果没错误且有异步,this.state就是pending
if(self.status == ST.pending){
self.resolveFns.push(resloveHandle);
self.rejectFns.push(rejectHandle);
}
else if(self.status == ST.resolved){
self.handle(self.value,onResolve);
}
else if(this.status == ST.rejected){
self.handle(self.reason,onReject);
}
})
}
Promise.prototype.catch = function(onReject){
return this.then(undefined, onReject);
}
//finally不是promise的末尾,后面还可以有then,所以value和reason必须可以向下传递
Promise.prototype.finally = function(fn){
let P = this.constructor;
return this.then(
value => P.resolve(fn()).then(() => value),
reason => P.resolve(fn()).then(() => throw reason);
)
}
//done作为promise的末尾,用于收集所有可能的报错,catch方法捕捉所有错误,并抛出
Promise.prototype.done = function(resolve,reject){
return this.then(resolve, reject).catch(function(reason){
setTimeout(function(){
throw reason;
});
})
}
Promise.resolve = function(val){
return new Promise((resolve) => {
resolve(val);
})
}
Promise.reject = function(val){
return new Promise((resolve,reject) => {
reject(val);
})
}
Promise.race = function(promises){
let len = promises.length;
return new Promise(function(resolve,reject){
while(len--){
promises[len].then(resolve,reject);
}
})
}
Promise.all = function(promises){
let len = promises.length,
results = [];
return new Promise(function(resolve,reject){
//用一个数组收集单个promise执行后的结果,收集满数组所有结果,便是所有执行成功
function reslove(index){
return function(value){
results[index] = value;
if(results.length == len){
reslove(results);
}
}
}
while(len--){
promises[len].then(resolve(len),reject);
}
})
}
promise简单实现的更多相关文章
- es6 Promise简单介绍
promise的基本用法 promise执行多步操作非常好用,那我们就来模仿一个多步操作的过程,那就以吃饭为例吧.要想在家吃顿饭,是要经过三个步骤的. 洗菜做饭. 坐下来吃饭. 收拾桌子洗碗. 这个过 ...
- ES6 promise简单实现
基本功能实现: function Promise(fn){ //需要一个成功时的回调 var doneCallback; //一个实例的方法,用来注册异步事件 this.then = function ...
- 理解Promise简单实现的背后原理
在写javascript时我们往往离不开异步操作,过去我们往往通过回调函数多层嵌套来解决后一个异步操作依赖前一个异步操作,然后为了解决回调地域的痛点,出现了一些解决方案比如事件订阅/发布的.事件监听的 ...
- Promise简单实现--摘抄
Promise 看了些promise的介绍,还是感觉不够深入,这个在解决异步问题上是一个很好的解决方案,所以详细看一下,顺便按照自己的思路实现一个简单的Promise. Promise/A+规范: 首 ...
- 小程序 请求Promise简单封装
最近做小程序在调用后台接口的时候感觉总写很长一串,很冗杂.非常想念vue中promise封装的写法,于是自己初步封装了一下. 1.url 接口地址 2.headers请求头 3. params 请求参 ...
- es6 promise 简单总结
话不多说,直捣主题. promise用途:异步编程的一种解决方案. 优点:比传统的解决方案——回调函数和事件——更合理和更强大. 三种状态:pending(进行中).fulfilled(已成功)和re ...
- Promise简单实现(正常思路版)
转自: http://www.jianshu.com/p/473cd754311f Promise 看了些promise的介绍,还是感觉不够深入,这个在解决异步问题上是一个很好的解决方案,所以详细看一 ...
- JavaScript笔记 #06# Promise简单例子
索引 回调版本 Promise版本1 Promise版本2 Notes 参考资料: Promise JavaScript Promise:简介 你去书店借书,按照异步的套路,剧情如下↓ 你:“老板,有 ...
- [javascript] Promise简单学习使用
原文地址:http://www.cnblogs.com/dojo-lzz/p/4340897.html 解决回调函数嵌套太深,并行逻辑必须串行执行,一个Promise代表一个异步操作的最终结果,跟Pr ...
- 关于Promise 简单使用理解
在学一个新的知识的时候,我的总结是首先要具备相关的基础知识,其次就是可以静下心来能看进去去理解,看一两遍不懂,就看四五遍,甚至六七遍,每一遍都认真努力理解,总会学会的. Promise是一个构造函数, ...
随机推荐
- HDU3605 Escape(最大流判满流 + 状压)
[题意]: 有N个人,M个星球,给N*M矩阵,(i, j)为1代表i可以到j星球,0代表不能,问是否能把所有人转移走. [思路]: N的范围为1e6,如果让每个人与星球连边一定TLE,再根据矩阵每一行 ...
- Appium连接夜神模拟器,模拟手势点击(tap)
# -*- coding:utf-8 -*- from appium import webdriver from time import sleep desired_caps ={ 'platform ...
- maven:读取程序版本号的三种方案
方案1在应用项目中,如果应用程序需要获取当前程序的版本号,可以读取”/META-INF/maven/${groupId}/${artifactId}/pom.properties“,获取maven生成 ...
- @Transactional(rollbackFor)
@Transactional注解有两个,一个是spring提供的@org.springframework.transaction.annotation.Transactional 另一个是jdk提供@ ...
- 转载 Easyui Tree方法扩展 - getLevel(获取节点级别)
Easyui Tree一直就没有提供这个方法,以前没有用到,所 以一直没怎么在意,这次自己用到了,顺便扩展了一个方法,分享给大家. $.extend($.fn.tree.methods, { getL ...
- Hbase 分页设计
hbase 数据获取方式 直接根据 rowkey 查找,速度最快 scan,指定 startrowkey.endrowkey 和 limit获取数据,在 rowkey 设计良好的情况下,效率也不错 全 ...
- Windows GUI自动化测试技术的比较和展望
https://www.cnblogs.com/yufun/archive/2009/10/10/1580132.html [这里的自动化测试专指GUI自动化(不包含Web)] 以前写过一篇跟UI自动 ...
- template-web.js 自定义过滤器
// 比如需要自定义一个去零的过滤器 <script id="templateTest" type="text/html"> <% for(i ...
- 大文件断点续传插件webupload插件
java两台服务器之间,大文件上传(续传),采用了Socket通信机制以及JavaIO流两个技术点,具体思路如下: 实现思路: 1.服:利用ServerSocket搭建服务器,开启相应端口,进行长连接 ...
- React 引入import React 原理
本质上来说JSX是React.createElement(component, props, ...children)方法的语法糖. 所以我们如果使用了JSX,我们其实就是在使用React,所以我们就 ...