Promise
是JS进行异步操作的重要API,也是开发基本上绕不开的技术,所以很有必要对其进行深入的了解。本文我们就 一步步手动实现Promise
的相关功能。
Promise
属性和构造函数
原生功能
Promise
对象的属性
- 验证原生
Promise
let p = new Promise((resolve, reject) => {});
console.log(p);
- 结果:
[[Prototype]]: Promise
[[PromiseState]]: "pending"
[[PromiseResult]]: undefined
- 结论:
原生
Promise
有两个属性,PromiseState
和PromiseResult
Promise
构造函数
- 验证原生
Promise
let p = new Promise((resolve, reject) => {
resolve("success");
});
console.log(p);
- 结果:
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "success"
- 结论
resolve
函数作用: 1) 将Promise
的PromiseState
由 默认的 pending 变成了 fulfilled, 2) 将Promise
的PromiseResult
由undefined变成了函数的传入参数success。(resolve, reject) => { ... }
这函数在初始化对象的时候是同步执行的。
- 验证原生
Promise
let p = new Promise((resolve, reject) => {
reject("failed")
});
console.log(p);
- 结果:
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "failed"
- 结论
reject
函数作用: 1) 将Promise
的PromiseState
由 默认的 pending 变成了 rejected, 2) 将Promise
的PromiseResult
由undefined变成了函数的传入参数failed。
代码模拟实现
function Promise(executor) {
// 记录上下文,否则resolve和reject的this调用会有问题
var _this = this;
// 1. 设置属性
this.PromiseState = "pending";
this.PromiseResult = undefined;
// 2. 两个对外暴露的函数接收传入的参数data,然后可以改变PromiseState和PromiseResult
function resolve(data) {
_this.PromiseState = "fulfilled";
_this.PromiseResult = data;
}
function reject(data) {
_this.PromiseState = "rejected";
_this.PromiseResult = data;
}
// 3. 构造函数execotor会同步执行
executor(resolve, reject);
}
Promise
构造器函数执行抛出异常
- 验证原生
Promise
let p = new Promise((resolve, reject) => {
throw "throwed error"
});
console.log(p);
- 结果:
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "throwed error"
- 结论
Promise
构造器函数执行抛出异常则PromiseState
变为rejected
,PromiseResult
为抛出异常的内容。
代码模拟实现
function Promise(executor) {
var _this = this;
this.PromiseState = "pending";
this.PromiseResult = undefined;
function resolve(data) {
_this.PromiseState = "fulfilled";
_this.PromiseResult = data;
}
function reject(data) {
_this.PromiseState = "rejected";
_this.PromiseResult = data;
}
// 用try,catch 捕获异常,有异常调用reject方法
try {
executor(resolve, reject);
} catch (error) {
reject(error);
}
}
Promise
状态只能修改一次
原生功能
- 验证原生
Promise
let p = new Promise((resolve, reject) => {
resolve("success");
reject("failed");
});
console.log(p);
- 结果:
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "success"
- 结论
Promise
状态只能修改一次,所以要么是从 "pending" -> "fulfilled", 要么是 "pending" -> "rejected"。之后就能修改了。
代码模拟实现
function Promise(executor) {
var _this = this;
this.PromiseState = "pending";
this.PromiseResult = undefined;
function resolve(data) {
// 如果不是'pending'才修改,如果是'pending'说明已经修改过了,就忽略
if (_this.PromiseState != 'pending') return;
_this.PromiseState = "fulfilled";
_this.PromiseResult = data;
}
function reject(data) {
// 如果不是'pending'才修改,如果是'pending'说明已经修改过了,就忽略
if (_this.PromiseState != 'pending') return;
_this.PromiseState = "rejected";
_this.PromiseResult = data;
}
try {
executor(resolve, reject);
} catch (error) {
resolve(error);
}
}
Promise
对象的then
方法可以获取Promise
结果
原生功能
- 验证原生
Promise
let p = new Promise((resolve, reject) => {
resolve("success");
});
p.then((data) => {
console.log("第一个回调函数");
console.log(data);
}, (error) => {
console.log("第二个回调函数");
console.log(error);
});
- 结果:
第一个回调函数
success
- 结论
如果
Promise
的PromiseState
是fulfilled
,则将PromiseResult
作为实参调用then
函数的第一个函数参数;
- 验证原生
Promise
let p = new Promise((resolve, reject) => {
reject("failed");
});
p.then((data) => {
console.log("第一个回调函数");
console.log(data);
}, (error) => {
console.log("第二个回调函数");
console.log(error);
});
- 结果:
第二个回调函数
failed
- 结论
如果
Promise
的PromiseState
是rejected
,则将PromiseResult
作为实参调用then
函数的第二个函数参数;
代码模拟实现
Promise.prototype.then = function(onFulfilled, onRejected) {
var _this = this;
// 如果Promise的状态是'fulfilled',将结果通过第一个函数参数传递出去,
// 如果Promise的状态是'rejected',将结果通过第二个函数参数传递出去,
if (_this.PromiseState == 'fulfilled') {
onFulfilled(_this.PromiseResult);
} else if (_this.PromiseState == "rejected") {
onRejected(_this.PromiseResult);
}
}
Promise
对象的then
方法接收异步任务的结果
原生功能
- 验证原生
Promise
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("success");
}, 2000);
});
p.then((data) => {
console.log("第一个回调函数");
console.log(data);
}, (error) => {
console.log("第二个回调函数");
console.log(error);
});
- 结果:
<!-- 过了两秒再打印 -->
第一个回调函数
success
- 结论
如果
Promise
执行的是异步任务,即调用then
方法时PromiseState
为pending
,PromiseResult
为undefined
,先不回调结果,等PromiseResult
有值以后再回调结果。
代码模拟实现
实现的逻辑就是如果暂时没有结果,就先把回调函数保存起来,等有结果的时候再执行回调函数。
function Promise(executor) {
var _this = this;
this.PromiseState = "pending";
this.PromiseResult = undefined;
// 定义一个变量保存回调函数
this.thenCbs = {};
function resolve(data) {
_this.PromiseState = "fulfilled";
_this.PromiseResult = data;
// 如果有保存状态未改变时对应的回调函数就调用
if (_this.thenCbs.onFulfilled !== undefined) {
_this.thenCbs.onFulfilled(data);
}
}
function reject(data) {
_this.PromiseState = "rejected";
_this.PromiseResult = data;
if (_this.thenCbs.onRejected !== undefined) {
_this.thenCbs.onRejected(data);
}
}
try {
executor(resolve, reject);
} catch (error) {
reject(error);
}
}
Promise.prototype.then = function(onFulfilled, onRejected) {
var _this = this;
if (_this.PromiseState == 'fulfilled') {
onFulfilled(_this.PromiseResult);
} else if (_this.PromiseState == "rejected") {
onRejected(_this.PromiseResult);
} else if (_this.PromiseState == 'pending') {
// 如果是异步任务,此时还没有结果,只能先保存回调函数,等有结果后再进行函数调用
_this.thenCbs = {
onFulfilled,
onRejected
};
}
}
Promise
对象的then
方法可以多次调用
原生功能
- 验证原生
Promise
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("success");
}, 2000);
});
p.then((data) => {
console.log("第一个回调函数");
console.log(data);
});
p.then(data => {
console.log("第二个回调函数");
console.log(data);
})
- 结果:
<!-- 过了两秒再打印 -->
第一个回调函数
success
第二个回调函数
success
- 结论
对
Promise
多次调用then
方法获取结果,对应的多个回调函数都会执行。
代码模拟实现
同步任务不会有问题,then
调用多次执行多次,主要是异步任务需要修改。
function Promise(executor) {
var _this = this;
this.PromiseState = "pending";
this.PromiseResult = undefined;
// 保存回调函数的变量变为数组
this.thenCbs = [];
function resolve(data) {
_this.PromiseState = "fulfilled";
_this.PromiseResult = data;
// 如果有保存状态未改变时对应的回调函数数组,就遍历调用
_this.thenCbs.forEach((item) => {
if (item.onFulfilled !== undefined) {
item.onFulfilled(data);
}
})
}
function reject(data) {
_this.PromiseState = "rejected";
_this.PromiseResult = data;
// 如果有保存状态未改变时对应的回调函数数组,就遍历调用
_this.thenCbs.forEach((item) => {
if (item.onRejected !== undefined) {
item.onRejected(data);
}
})
}
try {
executor(resolve, reject);
} catch (error) {
reject(error);
}
}
Promise.prototype.then = function(onFulfilled, onRejected) {
var _this = this;
if (_this.PromiseState == 'fulfilled') {
onFulfilled(_this.PromiseResult);
} else if (_this.PromiseState == "rejected") {
onRejected(_this.PromiseResult);
} else if (_this.PromiseState == 'pending') {
// 如果是异步任务,此时还没有结果,只能先保存回调函数,等有结果后再进行函数调用
_this.thenCbs.push({
onFulfilled,
onRejected
});
}
}
Promise
对象的then
方法执行后的返回结果是Promise对象
原生功能
- 验证原生
Promise
let p1 = new Promise((resolve, reject) => {
resolve("success");
});
let res1 = p1.then((data) => {
}, (error) => {})
console.log(res1);
let res2 = p1.then((data) => {
return "normal success again"
})
console.log(res2);
let res3 = p1.then((data) => {
return new Promise((resolve, reject) => {
resolve("promise success again");
});
})
console.log(res3);
let res4 = p1.then((data) => {
return new Promise((resolve, reject) => {
reject("promise fail");
});
})
console.log(res4);
- 结果:
<!--res1-->
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: undefined
<!--res2-->
[PromiseState]]: "fulfilled"
[[PromiseResult]]: "normal success again"
<!--res3-->
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "promise success again"
<!--res4-->
[[PromiseState]]: "rejected"
[[PromiseResult]]: "promise fail"
- 结论
then
方法返回的是一个新的Promise
对象,这个Promise
对象的PromiseResult
由then
指定的回调函数返回值决定的;
p.then((data) => {}, (error) => {})
如果第一个函数(data) => {}
被调用就是这个函数的返回值决定了新的Promise
对象的PromiseResult
和PromiseState
,如果第二个函数(error) => {}
被调用就是这个函数的返回值决定了新的Promise
对象的PromiseResult
和PromiseState
- 如果被调用的函数没有返回值,则新的
Promise
对象的PromiseResult
为undefined
,PromiseState
为fulfilled
;- 如果被调用的函数有返回值但不是Promise,则新的
Promise
对象的PromiseResult
为 函数的返回值,PromiseState
为fulfilled
;- 如果被调用的函数返回值是Promise,则新的
Promise
对象的PromiseResult
为 函数的返回值Promise的PromiseResult
,PromiseState
为 函数的返回值Promise的PromiseState
。
代码模拟实现
Promise.prototype.then = function (onFulfilled, onRejected) {
var _this = this;
// 返回一个新的Promise对象,
return new Promise((resolve, reject) => {
// 定义一个处理then函数返回值的函数,这里就处理 onFulfilled 和 onRejected 两个函数
let handleThenValue = (cb) => {
try {
// 得到成功的函数的返回结果
let result = cb(_this.PromiseResult);
// 如果这个函数的返回结果是Promise对象
if (result instanceof Promise) {
// 通过then获取result这个Promise的结果和状态, 得到的结果就是新的Promise对象的结果和状态
result.then(
(data) => {
resolve(data);
},
(error) => {
reject(error);
}
);
} else {
// 如果不是Promise对象,直接成功,结果为函数的返回值
resolve(result);
}
} catch (error) {
// 执行错误就抛出异常
throw error;
}
};
if (_this.PromiseState == "fulfilled") {
// 处理 执行 onFulfilled 的返回值
handleThenValue(onFulfilled);
} else if (_this.PromiseState == "rejected") {
// 处理 执行 onRejected 的返回值
handleThenValue(onRejected);
} else if (_this.PromiseState == "pending") {
_this.thenCbs.push({
// 需要扩展,所以需要用另外加一层能函数对onFulfilled和onRejected进行封装
onFulfilled: () => {
handleThenValue(onFulfilled)
},
onRejected: () => {
handleThenValue(onRejected)
},
});
}
});
};
Promise
对象的then
链式调用的异常穿透
原生功能
- 验证原生
Promise
<!-- 1 -->
let p1 = new Promise((resolve, reject) => {
reject("error");
});
p1.then((data) => {
console.log(data);
}).catch((error) => {
console.log(error);
});
<!-- 2 -->
let p2 = new Promise((resolve, reject) => {
resolve("success");
})
p2.then((data) => {
throw "error"
}).then((data) => {
console.log(data);
}).catch((e) => {
console.log(e);
})
- 结果:
error
error
- 结论
中间
then
的链式调用过程中如果处理失败的Promise
结果,在链式调用的最后调用catch
方法可以得到第一个出现错误的Promise
的结果。
代码模拟实现
Promise.prototype.then = function (onFulfilled, onRejected) {
var _this = this;
// 如果没传onRejected就创建一个函数抛出异常,由于onRejected抛出异常会被捕获,最后会执行reject(error);
if (typeof onRejected !== "function") {
onRejected = (e) => {
throw e;
};
}
return new Promise((resolve, reject) => {
let handleThenValue = (cb) => {
try {
let result = cb(_this.PromiseResult);
if (result instanceof Promise) {
result.then(
(data) => {
resolve(data);
},
(error) => {
reject(error);
}
);
} else {
resolve(result);
}
} catch (error) {
// 如果抛出异常,或者没传onRejected就会走这里
reject(error);
}
};
if (_this.PromiseState == "fulfilled") {
handleThenValue(onFulfilled);
} else if (_this.PromiseState == "rejected") {
handleThenValue(onRejected);
} else if (_this.PromiseState == "pending") {
_this.thenCbs.push({
onFulfilled: () => {
handleThenValue(onFulfilled)
},
onRejected: () => {
handleThenValue(onRejected)
},
});
}
});
};
// 添加Catch的方法
Promise.prototype.catch = function (onRejected) {
return this.then(undefined, onRejected);
};
Promise
对象的then
的值传递
原生功能
- 验证原生
Promise
let p1 = new Promise((resolve, reject) => {
resolve("success");
});
p1.then()
.then((data) => {
console.log(data);
});
- 结果:
success
- 结论
如果
Promise
的PromiseState
是fulfilled
, 而then
函数没有传成功的函数,则then
函数返回的新Promise
对象的PromiseState
是fulfilled
,新Promise
对象的PromiseResult
是上个Promise的
PromiseResult`。总结:p1.then()返回值 和 p1 的
PromiseResult
和PromiseState
一样。
代码模拟实现
Promise.prototype.then = function (onFulfilled, onRejected) {
// 内容不变省略
// 如果没传值就造一个默认的函数, 把成功的值直接传递下去
if (typeof onFulfilled !== 'function') {
onFulfilled = value => value;
}
return new Promise((resolve, reject) => {
// 内容不变省略
});
};
Promise
的resolve
方法
原生功能
- 验证原生
Promise
let p1 = Promise.resolve("1");
let p2 = Promise.resolve();
let p3 = Promise.resolve(new Promise((resolve, reject) => {
reject("fail");
}));
console.log(p1);
console.log(p2);
console.log(p3);
- 结果:
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "1"
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: undefined
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "fail"
- 结论
Promise.resolve
可以用来构建一个Promise
对象;- 如果传入的参数不是
Promise
对象,则创建的Promise
对象PromiseState
为fulfilled
,
PromiseResult
为传入的参数;
- 如果传入的参数是
Promise
对象,这创建的Promise
对象和参数的属性一致。
代码模拟实现
Promise.resolve = function(params) {
// 返回一个新的Promise对象
return new Promise((resolve, reject) => {
// 如果传入的是Promise对象,则状态和结果和参数一致
if (params instanceof Promise) {
params.then((data) => {
resolve(data);
}, (error) => {
reject(error)
});
} else {
// 如果传入的不是Promise对象,直接成功,成功的结果是传入的参数
resolve(params);
}
});
}
Promise
的reject
方法
原生功能
- 验证原生
Promise
let p1 = Promise.reject("1");
let p2 = Promise.reject();
let p3 = Promise.reject(new Promise((resolve, reject) => {
resolve("success");
}));
console.log(p1);
console.log(p2);
console.log(p3);
- 结果:
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "1"
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: undefined
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: Promise
- 结论
总是返回一个失败的Promise对象,
PromiseResult
为传入的参数
代码模拟实现
Promise.reject = function(params) {
console.log(params.PromiseState);
return new Promise((resolve, reject) => {
reject(params);
});
}
Promise
的all
方法
原生功能
- 验证原生
Promise
let p1 = Promise.resolve("1");
let p2 = Promise.resolve("2");
let p3 = Promise.resolve(new Promise((resolve, reject) => {
resolve("success");
}));
let p4 = Promise.reject("fail");
Promise.all([p1, p2, p3]).then((data) => {
console.log(data);
}, (error) => {
console.warn(error);
});
Promise.all([p1, p2, p4]).then((data) => {
console.log(data);
}, (error) => {
console.warn(error);
});
- 结果:
[1,2,"success"]
fail
- 结论
Promise.all
返回一个新的Promise
对象,Promise
数组参数如果最后状态都变为fulfilled
, 则返回一个数组,新的Promise
对象的PromiseResult
为一个数组,数组中的值是Promise
的PromiseResult
;Promise.all
返回一个新的Promise
对象,Promise
数组参数如果有一个变为rejected
, 则新的Promise
对象PromiseState
变为rejected
,PromiseResult
为失败的Promise
的PromiseResult
;
代码模拟实现
Promise.all = function(arr) {
return new Promise((resolve, reject) => {
try {
let resultArr = [];
let count = 0;
// 遍历Promise对象
arr.forEach((item, index) => {
// 取每个Promise的值
item.then((data) => {
// 成功就记录下来
resultArr[index] = data;
count ++;
// 如果都成功了,就该状态
if (count == arr.length) {
resolve(resultArr);
}
}, (error) => {
// 只要有一个失败就失败
reject(error);
})
});
} catch (error) {
reject(error);
}
});
}
Promise
的race
方法
race
传入一个Promsie
数组,返回一个新的Promsie
对象。新的Promsie
对象的PromiseState
和PromiseResult
由最先完成的那个Promise
决定。
代码模拟实现
Promise.race = function(arr) {
return new Promise((resolve, reject) =>{
try {
// 谁先改变状态谁来决定返回的结果
arr.forEach((item) => {
item.then((data) => {
resolve(data);
}, (error) =>{
reject(error);
})
})
} catch (error) {
reject(error);
}
});
}
Promise
对象的finally
方法
原生功能
- 验证原生
Promise
let p1 = new Promise((resolve, reject) => {
resolve("success");
});
p1.then((data) => {
console.log("success called:", data);
}, (e) => {
console.log(e);
})
.finally((a) => {
console.log("finally called");
})
let p2 = new Promise((resolve, reject) => {
reject("failed");
})
p2.then((data) => {
console.log(data);
}, (e) => {
console.log("error called:", e);
})
.finally((a) => {
console.log("finally called");
})
- 结果:
success called: success
finally called
error called: failed
finally called
- 结论
Promise
无论是成功还是失败,在PromiseState
变化后都会调用finally
方法。
finally
方法的返回值也是值传递。即p.finally()
返回值 和p
的PromiseResult
和PromiseState
一样。
代码模拟实现
Promise.prototype.finally = function(onFinally) {
// 构造两个回调函数,
return this.then(
function(data) {
// 这里先执行onFinally函数,然后返回原来的值
return Promise.resolve(onFinally()).then((data) => data);
},
function(error) {
// 这里先执行onFinally函数,然后抛出错误
return Promise.resolve(onFinally()).then(() => {throw error});
}
)
}
完成
function Promise(executor) {
var _this = this;
this.PromiseState = "pending";
this.PromiseResult = undefined;
this.thenCbs = [];
function resolve(data) {
_this.PromiseState = "fulfilled";
_this.PromiseResult = data;
_this.thenCbs.forEach((item) => {
if (item.onFulfilled !== undefined) {
item.onFulfilled(data);
}
});
}
function reject(data) {
_this.PromiseState = "rejected";
_this.PromiseResult = data;
_this.thenCbs.forEach((item) => {
if (item.onRejected !== undefined) {
item.onRejected(data);
}
});
}
try {
executor(resolve, reject);
} catch (error) {
reject(error);
}
}
Promise.prototype.then = function (onFulfilled, onRejected) {
var _this = this;
if (typeof onRejected !== "function") {
onRejected = (e) => {
throw e;
};
}
if (typeof onFulfilled !== 'function') {
onFulfilled = value => value;
}
return new Promise((resolve, reject) => {
let handleThenValue = (cb) => {
try {
let result = cb(_this.PromiseResult);
if (result instanceof Promise) {
result.then(
(data) => {
resolve(data);
},
(error) => {
reject(error);
}
);
} else {
resolve(result);
}
} catch (error) {
reject(error);
}
};
if (_this.PromiseState == "fulfilled") {
handleThenValue(onFulfilled);
} else if (_this.PromiseState == "rejected") {
handleThenValue(onRejected);
} else if (_this.PromiseState == "pending") {
_this.thenCbs.push({
onFulfilled: () => {
handleThenValue(onFulfilled)
},
onRejected: () => {
handleThenValue(onRejected)
},
});
}
});
};
Promise.prototype.catch = function (onRejected) {
return this.then(undefined, onRejected);
};
Promise.prototype.finally = function(onFinally) {
return this.then(
function(data) {
return Promise.resolve(onFinally()).then((data) => data);
},
function(error) {
return Promise.resolve(onFinally()).then(() => {throw error});
}
)
}
Promise.resolve = function(params) {
return new Promise((resolve, reject) => {
if (params instanceof Promise) {
params.then((data) => {
resolve(data);
}, (error) => {
reject(error)
});
} else {
resolve(params);
}
});
}
Promise.reject = function(params) {
return new Promise((resolve, reject) => {
reject(params);
});
}
Promise.all = function(arr) {
return new Promise((resolve, reject) => {
try {
let resultArr = [];
let count = 0;
arr.forEach((item, index) => {
item.then((data) => {
resultArr[index] = data;
count ++;
if (count == arr.length) {
resolve(resultArr);
}
}, (error) => {
reject(error);
})
});
} catch (error) {
reject(error);
}
});
}