Promise实现
整体代码
/*自定义Promise函数模块:IIFE */
(function (window) {
//Promise构造函数
//executor:执行器函数(同步执行)
function Promise(executor) {
//将当前promise对象保存起来
const self = this
self.PromiseState = 'pending' //给promise对象指定PromiseState属性, 初始值为pending
self.PromiseResult = null //给promise对象指定一个用于存储结果数据的属性
self.callbacks = [] //每个元素的结构:{ onResolved() {}, onRejected() {}},数组里面是一个一个的对象,每一个对象来自一个then方法,一个对象中有两个回调函数:onResolved 和 onRejected
function resolve(value) {
//如果当前状态不是pending,直接结束
if(self.PromiseState !== 'pending') {
return
}
//将装填改为fulfilled
//这里要把this改成self,因为(this)是window对象调用了resolve函数,而我们本意上是想让Promise对象调用
self.PromiseState = 'fulfilled'
//保存value数据
self.PromiseResult = value
//这里是执行then方法中的回调函数,为了能拿到then中的回调函数,用一个数组callbacks[]将回调函数存起来
//如果有待执行的callback函数,立即异步执行回调函数onResolved
if (self.callbacks.length>0) {
//这里执行的是then方法中的回调函数,then方法中的回调函数是异步执行的,所以要放入定时器中执行
setTimeout(() => { //放入队列中执行所有成功的回调
self.callbacks.forEach(callbacksObj => {
callbacksObj.onResolved(value)
})
});
}
}
function reject(reason) {
//如果当前状态不是pending,直接结束
if(self.PromiseState !== 'pending') {
return
}
//将装填改为resolved
self.PromiseState = 'rejected'
//保存value数据
self.PromiseResult = reason
//如果有待执行的callback函数,立即异步执行回调函数onRejected
if (self.callbacks.length>0) {
setTimeout(() => { //放入队列中执行所有成功的回调
self.callbacks.forEach(callbacksObj => {
callbacksObj.onRejected(reason)
})
});
}
}
//立即同步执行executor
try {
executor(resolve, reject)
} catch (error) { //如果执行器抛出异常,promise对象变为rejected状态
reject(error)
}
}
/*
*Promise原型对象的then()
指定成功和失败的回调函数
返回一个新的promise对象
注意:then方法中的回调函数是异步执行的
*/
Promise.prototype.then = function (onResolved, onRejected) {
const self =this;
//判断回调函数参数
//内置的Promise允许对象只传入一个参数,也就是不传入onRejected函数
if(typeof onRejected !== 'function'){
onRejected = reason => {
throw reason;
}
}
//当不传入onResolved时,
if(typeof onResolved !== 'function'){
onResolved = value => value;
//等同于 value => {return value};
}
//then方法返回的是一个Promise对象
return new Promise((resolve,reject) => {
//封装函数
function callback(type){
try{
//执行onResolved函数的实参是promise对象返回的结果,其实就是PromiseResult
let result = type(self.PromiseResult);
//用result获取回调函数的执行结果
//判断
if(result instanceof Promise){
//如果是Promise类型的对象,直接调用then方法
result.then(
v => {
resolve(v);
},
r => {
reject(r);
}
)
}else{
//返回的结果如果不是一个Promise对象
//设置结果的对象状态为成功
resolve(result);
}
}catch(e){
reject(e);
}
}
//调用回调函数 PromiseState
if(this.PromiseState === 'fulfilled'){
//then方法中的回调函数是异步执行的
setTimeout(() => {
callback(onResolved)
})
}
if(this.PromiseState === 'rejected'){
//then方法中的回调函数是异步执行的
setTimeout(() => {
callback(onRejected)
})
}
//判断pending 状态
if(this.PromiseState === 'pending'){
//保存回调函数,将这些函数推入数组中后,会在上面的Promise对象的setTimeout里面的resolve里面执行
this.callbacks.push({
onResolved: function() {
callback(onResolved)
},
onRejected: function() {
callback(onRejected)
}
});
}
})
}
/*
*Promise原型对象的catch()
指定失败的回调函数
返回一个新的promise对象
*/
Promise.prototype.catch = function (onRejected) {
return this.then(undefined,onRejected);
}
/*
*Promise函数对象的resolve方法
返回一个指定结果的成功的promise,
*/
Promise.resolve = function (value) {
return new Promise((resolve,reject) => {
if(value instanceof Promise){
value.then(v=>{
resolve(v);
},r=>{
reject(r)
})
}else{
//状态设置为成功
resolve(value)
}
})
}
/*
*Promise函数对象的rejected方法
返回一个指定reason的失败的promise
*/
Promise.rejected = function (reason) {
return new Promise((resolve,reject) => {
reject(reason)
})
}
/*
*Promise函数对象的all方法
返回一个promise,只有当所有promise都成功时才成功,否则只要有一个失败的就失败
成功的结果是所有promise的成功结果的数组
*/
Promise.all = function (promises) {
return new Promise((resolve,reject)=>{
//声明变量
let count=0;
let arr=[];//所有promise的成功结果的数组
//遍历
for(let i=0;i<promises.length;i++){
promises[i].then(v=>{
//得知对象的装啊提是成功
//每个promise对象 都成功
count++;
//将当前promise对象成功的结果 存入到数组中
arr[i]=v;
//判断
if(count === promises.length){
//修改状态
resolve(arr);
}
},
r=>{
reject(r);
})
}
})
}
/*
*Promise函数对象的race方法
返回一个promise,其结果由第一个完成的promise决定
*/
Promise.race = function (promises) {
return new Promise((resolve,reject) => {
for(let i=0;i<promises.length;i++){
promises[i].then(v=>{
//修改返回对象的状态为成功
resolve(v);
},r=>{
//修改返回对象的状态为失败
reject(r);
})
}
})
}
//向外暴露Promise函数
window.Promise = Promise
})(window)
executor:执行器函数(同步执行)
//Promise构造函数
//executor:执行器函数(同步执行)
function Promise(executor) {
//将当前promise对象保存起来
const self = this
self.PromiseState = 'pending' //给promise对象指定PromiseState属性, 初始值为pending
self.PromiseResult = null //给promise对象指定一个用于存储结果数据的属性
self.callbacks = [] //每个元素的结构:{ onResolved() {}, onRejected() {}},数组里面是一个一个的对象,每一个对象来自一个then方法,一个对象中有两个回调函数:onResolved 和 onRejected
function resolve(value) {
//如果当前状态不是pending,直接结束
if(self.PromiseState !== 'pending') {
return
}
//将装填改为fulfilled
//这里要把this改成self,因为(this)是window对象调用了resolve函数,而我们本意上是想让Promise对象调用
self.PromiseState = 'fulfilled'
//保存value数据
self.PromiseResult = value
//这里是执行then方法中的回调函数,为了能拿到then中的回调函数,用一个数组callbacks[]将回调函数存起来
//如果有待执行的callback函数,立即异步执行回调函数onResolved
if (self.callbacks.length>0) {
//这里执行的是then方法中的回调函数,then方法中的回调函数是异步执行的,所以要放入定时器中执行
setTimeout(() => { //放入队列中执行所有成功的回调
self.callbacks.forEach(callbacksObj => {
callbacksObj.onResolved(value)
})
});
}
}
function reject(reason) {
//如果当前状态不是pending,直接结束
if(self.PromiseState !== 'pending') {
return
}
//将装填改为resolved
self.PromiseState = 'rejected'
//保存value数据
self.PromiseResult = reason
//如果有待执行的callback函数,立即异步执行回调函数onRejected
if (self.callbacks.length>0) {
setTimeout(() => { //放入队列中执行所有成功的回调
self.callbacks.forEach(callbacksObj => {
callbacksObj.onRejected(reason)
})
});
}
}
//立即同步执行executor
try {
executor(resolve, reject)
} catch (error) { //如果执行器抛出异常,promise对象变为rejected状态
reject(error)
}
}
then方法实现
/*
*Promise原型对象的then()
指定成功和失败的回调函数
返回一个新的promise对象
注意:then方法中的回调函数是异步执行的
*/
Promise.prototype.then = function (onResolved, onRejected) {
const self =this;
//判断回调函数参数
//内置的Promise允许对象只传入一个参数,也就是不传入onRejected函数
if(typeof onRejected !== 'function'){
onRejected = reason => {
throw reason;
}
}
//当不传入onResolved时,
if(typeof onResolved !== 'function'){
onResolved = value => value;
//等同于 value => {return value};
}
//then方法返回的是一个Promise对象
return new Promise((resolve,reject) => {
//封装函数
function callback(type){
try{
//执行onResolved函数的实参是promise对象返回的结果,其实就是PromiseResult
let result = type(self.PromiseResult);
//用result获取回调函数的执行结果
//判断
if(result instanceof Promise){
//如果是Promise类型的对象,直接调用then方法
result.then(
v => {
resolve(v);
},
r => {
reject(r);
}
)
}else{
//返回的结果如果不是一个Promise对象
//设置结果的对象状态为成功
resolve(result);
}
}catch(e){
reject(e);
}
}
//调用回调函数 PromiseState
if(this.PromiseState === 'fulfilled'){
//then方法中的回调函数是异步执行的
setTimeout(() => {
callback(onResolved)
})
}
if(this.PromiseState === 'rejected'){
//then方法中的回调函数是异步执行的
setTimeout(() => {
callback(onRejected)
})
}
//判断pending 状态
if(this.PromiseState === 'pending'){
//保存回调函数,将这些函数推入数组中后,会在上面的Promise对象的setTimeout里面的resolve里面执行
this.callbacks.push({
onResolved: function() {
callback(onResolved)
},
onRejected: function() {
callback(onRejected)
}
});
}
})
}
catch方法实现
/*
*Promise原型对象的catch()
指定失败的回调函数
返回一个新的promise对象
*/
Promise.prototype.catch = function (onRejected) {
return this.then(undefined,onRejected);
}
resolve方法实现
/*
*Promise函数对象的resolve方法
返回一个指定结果的成功的promise,
*/
Promise.resolve = function (value) {
return new Promise((resolve,reject) => {
if(value instanceof Promise){
value.then(v=>{
resolve(v);
},r=>{
reject(r)
})
}else{
//状态设置为成功
resolve(value)
}
})
}
reject方法实现
/*
*Promise函数对象的rejected方法
返回一个指定reason的失败的promise
*/
Promise.rejected = function (reason) {
return new Promise((resolve,reject) => {
reject(reason)
})
}
all方法实现
/*
*Promise函数对象的all方法
返回一个promise,只有当所有promise都成功时才成功,否则只要有一个失败的就失败
成功的结果是所有promise的成功结果的数组
*/
Promise.all = function (promises) {
return new Promise((resolve,reject)=>{
//声明变量
let count=0;
let arr=[];//所有promise的成功结果的数组
//遍历
for(let i=0;i<promises.length;i++){
promises[i].then(v=>{
//得知对象的装啊提是成功
//每个promise对象 都成功
count++;
//将当前promise对象成功的结果 存入到数组中
arr[i]=v;
//判断
if(count === promises.length){
//修改状态
resolve(arr);
}
},
r=>{
reject(r);
})
}
})
}
race方法实现
/*
*Promise函数对象的race方法
返回一个promise,其结果由第一个完成的promise决定
*/
Promise.race = function (promises) {
return new Promise((resolve,reject) => {
for(let i=0;i<promises.length;i++){
promises[i].then(v=>{
//修改返回对象的状态为成功
resolve(v);
},r=>{
//修改返回对象的状态为失败
reject(r);
})
}
})
}