Promise 解析
Promise
由于js的语言特性(用户交互)和工作环境(浏览器脚本),决定了它是单线程工作,所以两段脚本不能同时运行,但为了实现功能,所以人们使用了事件和回调来初步解决这个问题,例如(addEventListener),但这也带来了严重的回调问题,非常容易陷入回调地狱的困恼,
由于这个问题。js发展至今,社区提出了promise(承若)标准,被es6写入了语言标准中,统一了它的用法,并在原生中提供了标准的Promise对象
让我们先来实例化一个标准的promise对象:
//实例化一个promise对象,这个对象有两个参数(resolve-决定,reject-拒绝)
let promise = new Promise((resolve,reject)=>{
//延时3s,把promise的状态改为resolve-决定
setTimeout(function(){
resolve('666')
},3000)
})
//每个实例都有then()方法,用来获取其值或原因。
//then(onFulfilled, onRejected)
//成功的回调,失败的回调
promise.then(data=>{
console.log(data)
},err=>{
console.error(err)
}).then()
同时promise还可以多次调用then()方法,也可以在resolve中继续抛出一个新的promise 例:
promise.then(function(data){
console.log('data2=',data);
},function(err){
console.log('err2=',err);
});
或者:
let promise2 = promise.then(function(data){
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve(data + '777' );
},1000);
});
});
当然还有常见的all(),catch(),resolve(),reject()等等一些方法,而这些方法都是按照Promise/A+规范规定的 (详情)
我们现在就按照这个规范来实现一个属于我们自己的promise
首先我们先定义出这个类:
// executor是一个执行函数,在实例化的时候被传入。这个函数会执行两个被传入的状态函数
var Promise = function (executor) {
let self = this;
//没个promise都会有个初始化值,这个值在规范中叫做pending
self.status = 'pending';
self.value = undefined; // 默认成功的值
self.reason = undefined; // 默认失败的原因
self.onResolvedCallbacks = []; // 存放then成功的回调
self.onRejectedCallbacks = []; // 存放then失败的回调
// 成功状态要执行的函数
function resolve(value) {
//更改他的状态值,为成功,且不能更改
if (self.status === 'pending') {
self.status = 'resolved';
self.value = value;
//实例多次调用then(),循环释放数组
self.onResolvedCallbacks.forEach(function (fn) {
fn();
});
}
}
// 失败状态要执行的函数
function reject(reason) {
//更改他的状态值,为失败,且不能更改
if (self.status === 'pending') {
self.status = 'rejected';
self.reason = reason;
//实例多次调用then(),循环释放数组
self.onRejectedCallbacks.forEach(function (fn) {
fn();
})
}
}
如果直接传入错误的代码,那么直接进入reject
try {
executor(resolve, reject)
} catch (e) {
// 捕获的时候发生异常,就直接失败了
reject(e);
}
}
下面我们来实现then()方法,个方法每个实例都有,他是一个方法,所以我们把它挂载到Promise原型上:
Promise.prototype.then = function (onFulfilled, onRjected) {
//成功和失败默认一个函数,防止报错,
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : function (value) {
return value;
}
onRjected = typeof onRjected === 'function' ? onRjected : function (err) {
throw err;
}
let self = this;
//定义一个返回的promise
let promise2;
//当状态是成功的时候,可能会在函数中再次返回一个promise
if (self.status === 'resolved') {
promise2 = new Promise(function (resolve, reject) {
// 当成功或者失败执行时有异常那么返回的promise应该处于失败状态
//这个x 是第一个promise执行后的结果
// x可能是一个promise 也有可能是一个普通的值
setTimeout(function () {
try {
let x = onFulfilled(self.value);
// x可能是别人promise,写一个方法统一处理
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
})
})
}
//当状态是失败的时候
if (self.status === 'rejected') {
promise2 = new Promise(function (resolve, reject) {
setTimeout(function () {
try {
let x = onRjected(self.reason);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
})
})
}
// 当调用then时可能没成功 也没失败
if (self.status === 'pending') {
promise2 = new Promise(function (resolve, reject) {
// 此时没有resolve 也没有reject
self.onResolvedCallbacks.push(function () {
setTimeout(function () {
try {
let x = onFulfilled(self.value);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e)
}
})
});
self.onRejectedCallbacks.push(function () {
setTimeout(function () {
try {
let x = onRjected(self.reason);
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
})
});
})
}
return promise2;
}
集中处理x
function resolvePromise(promise2, x, resolve, reject) {
// 有可能这里返回的x是别人的promise
// 先跑错
if (promise2 === x) { //这里应该报一个类型错误,有问题
return reject(new TypeError('循环引用了'))
}
// 看x是不是一个promise,promise应该是一个对象
let called; // 表示是否调用过成功或者失败
if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
//根据语法规定的几种情况来判断
// 可能是promise {},看这个对象中是否有then方法,如果有then我就认为他是promise了
try {
let then = x.then;
if (typeof then === 'function') {
// 成功
then.call(x, function (y) {
if (called) return
called = true
// y可能还是一个promise,在去解析直到返回的是一个普通值
//递归调用这个函数,
resolvePromise(promise2, y, resolve, reject)
}, function (err) { //失败
if (called) return
called = true
reject(err);
})
} else {
resolve(x)
}
} catch (e) {
if (called) return
called = true;
reject(e);
}
} else { // 说明是一个普通值1
resolve(x); // 表示成功了
}
}
在实现了这些之后,其他的方法,更多的就是一个语法糖,我们来实现他们
catch:
catch实际上就是reject,所以一般建议在then里面不穿reject(),而链式调用catch方法
Promise.prototype.catch = function (callback) {
return this.then(null, callback)
}
all
//会传入一个数组,这个数组是promise集合
Promise.all = function (promises) {
return new Promise(function (resolve, reject) {
//arr是最终返回值的结果
let arr = [];
// 表示成功了多少次
let i = 0;
function processData(index, y) {
arr[index] = y;
if (++i === promises.length) {
resolve(arr);
}
}
for (let i = 0; i < promises.length; i++) {
promises[i].then(function (y) {
processData(i, y)
}, reject)
}
})
}
race
//race就是赛跑的意思,谁获取结果比较快,就返回谁
// 只要有一个promise成功了 就算成功。如果第一个失败了就失败了
Promise.race = function (promises) {
return new Promise(function (resolve, reject) {
for (var i = 0; i < promises.length; i++) {
promises[i].then(resolve,reject)
}
})
}
// 生成一个成功的promise
Promise.resolve = function(value){
return new Promise(function(resolve,reject){
resolve(value);
})
}
// 生成一个失败的promise
Promise.reject = function(reason){
return new Promise(function(resolve,reject){
reject(reason);
})
}
defer 延期处理
会包容promise 可用于封装在传递方法之外调用原有的promise回调
Promise.defer = Promise.deferred = function () {
let dfd = {};
dfd.promise = new Promise(function (resolve, reject) {
dfd.resolve = resolve;
dfd.reject = reject;
});
return dfd
}
Promise 解析的更多相关文章
- Promise解析(待完成)
Promise是一种异步操作的解决方案,将写法复杂的传统的回调函数和监听事件的异步操作,用同步代码的形式表达出来.避免了多级异步操作的回调函数嵌套. 1.主要用于异步计算 2.可以将异步操作队列化,按 ...
- Promise,Generator(生成器),async(异步)函数
Promise 是什么 Promise是异步编程的一种解决方案.Promise对象表示了异步操作的最终状态(完成或失败)和返回的结果. 其实我们在jQuery的ajax中已经见识了部分Promise的 ...
- Netty源码解析—客户端启动
Netty源码解析-客户端启动 Bootstrap示例 public final class EchoClient { static final boolean SSL = System.getPro ...
- 基于PromiseA+规范实现一个promise
实现如果下规范的promise Aplus规范 1,promise是一个类:有三个状态 pending/等待态 fulfilled/成功态 rejected/失败态 2,promise默认执行器立即执 ...
- AngularJS之代码风格36条建议【一】(九)
前言 其实在新学一门知识时,我们应该注意下怎么书写代码更加规范,从开始就注意养成一个良好的习惯无论是对于bug的查找还是走人后别人熟悉代码都是非常好的,利人利己的事情何乐而不为呢,关于AngularJ ...
- 使用 Promises 编写更优雅的 JavaScript 代码
你可能已经无意中听说过 Promises,很多人都在讨论它,使用它,但你不知道为什么它们如此特别.难道你不能使用回调么?有什么了特别的?在本文中,我们一起来看看 Promises 是什么以及如何使用它 ...
- ES6核心内容精讲--快速实践ES6(三)
Promise 是什么 Promise是异步编程的一种解决方案.Promise对象表示了异步操作的最终状态(完成或失败)和返回的结果. 其实我们在jQuery的ajax中已经见识了部分Promise的 ...
- Netty源码分析(三):客户端启动
Bootstrap Bootstrap主要包含两个部分,一个是服务器地址的解析器组AddressResolverGroup,另一个是用来工作的EventLoopGroup. EventLoopGrou ...
- js async await 终极异步解决方案
既然有了promise 为什么还要有async await ? 当然是promise 也不是完美的异步解决方案,而 async await 的写法看起来更加简单且容易理解. 回顾 Promise Pr ...
随机推荐
- oracle 误删除 恢复
select * from LFS_WELFAxxxxxASTDAYS AS OF TIMESTAMP (SYSTIMESTAMP - INTERVAL '100' MINUTE) order by ...
- CentOS7.3 ffmpeg安装
ffmpeg安装笔记 ======================== 一.安装依赖 yum -y install yum-utils yum-config-manager --add-repo ht ...
- AI大厂算法测试心得:人脸识别关键指标有哪些?
仅仅在几年前,程序员要开发一款人脸识别应用,就必须精通算法的编写.但现在,随着成熟算法的对外开放,越来越多开发者只需专注于开发垂直行业的产品即可. 由调查机构发布的<中国AI产业地图研究> ...
- Mybatis开启二级缓存(全局缓存)的方法
Mybatis开启二级缓存的方法 开启步骤 1.在 mybatis-config.xml 的配置文件中进行显示配置,开启二级缓存(全局缓存) 2.在 Mapper.xml 文件中添加cache标签 一 ...
- Python os.fdatasync() 方法
概述 os.fdatasync() 方法用于强制将文件写入磁盘,该文件由文件描述符fd指定,但是不强制更新文件的状态信息.高佣联盟 www.cgewang.com 如果你需要刷新缓冲区可以使用该方法. ...
- PHP acosh() 函数
实例 返回不同数的反双曲余弦: <?phpecho(acosh(7) . "<br>");echo(acosh(56) . "<br>&qu ...
- luogu P4008 [NOI2003]文本编辑器 splay 块状链表
LINK:文本编辑器 这个东西感觉块状链表写细节挺多 (块状链表本来就难写 解释一下块状链表的做法:其实是一个个数组块 然后利用链表给链接起来 每个块的大小为sqrt(n). 这样插入删除的时候直接暴 ...
- 回首Java——写在前面
我记得在大学的课程要求中,第一个接触的高级编程语言,应该是C语言或者C++等.但是Java应该是我的编程母语,我在高中毕业就接触了Java语言.当时看的是纸质书,具体书名也忘记了.只记得当时第一次接触 ...
- [转]Nginx介绍-反向代理、负载均衡
原文:https://www.cnblogs.com/wcwnina/p/8728391.html 作者:失恋的蔷薇 1. Nginx的产生 没有听过Nginx?那么一定听过它的"同行&qu ...
- .net hbase client--终于浮出水面的轮子
一.开篇 1.背景 在大数据时代,HBase 数据库是个绕不开的热门话题. 由于其使用 Java 作为主要开发语言,并且依赖大量的 Java 组件(如 Hadoop.zooKeep),使得其他技术栈想 ...