共计 26926 个字符,预计需要花费 68 分钟才能阅读完成。
1. 回调地狱
要了解 Promise 是什么,首先要知道什么是异步编程,常见的异步编程有以下几种:
- nodejs 中 fs 模块操作磁盘文件
- 数据库操作
- ajax 请求
- 定时器
要知道,js 设计之初就是单线程模式,那么遇到异步函数不能等它执行完再执行,所以通常传递一个回调函数。例如:
setTimeout(() => {
console.log('3 秒后打印');
}, 3000)
这种方式有一个明显的问题,就是当异步操作包含异步操作时会形成回调地狱。例如:
setTimeout(() => {
console.log('3 秒后打印');
setTimeout(() => {
console.log('6 秒后打印');
setTimeout(() => {
console.log('9 秒后打印');
}, 3000)
}, 3000);
}, 3000)
当在项目中,大量编写这种代码是不合理的,比如登录成功以后发起请求,获取一系列数据等等。
2. Promise简介
Promise 即承诺的意,正如其名,它承诺未来返回给你一个处理结果。它是一种用于处理异步操作的对象,代表了一个异步操作的最终完成或失败的状态和结果值。Promise 可以让你以更加清晰和可读的方式编写异步代码,避免了回调地狱的问题。
在 Promise 中,有三种状态:
- Pending(进行中):初始状态,既不是成功也不是失败状态。
- Fulfilled(已成功):操作成功完成。
- Rejected(已失败):操作失败。
当一个 Promise 对象被创建的时候,默认就是 Pending
状态。当执行 resolve()
方法时,状态修改为 Fulfilled
;当执行 reject()
方法时或抛出异常时,状态修改为 Rejected
。不同的状态将会执行不同的回调函数:
new Promise((resolve, reject) => {
if(...){
resolve();
}else{
reject();
}
}).then(value => {
console.log(value)
}, reason => {
console.log(value)
})
但是其实一般会这样干,使用 catch
捕获到拒绝状态的 Promise。
new Promise((resolve, reject) => {
if(...){
resolve();
}else{
reject();
}
}).then(value => {
console.log(value)
}).then(value => {
console.log(value)
}).catch((err) => {
console.log(value)
})
使用 Promise 优化上面的代码:
new Promise((resolve, reject) => {
setTimeout(() => {
console.log('3 秒后打印');
resolve()
}, 3000)
}).then(result => {
// 注意:这里需要返回一个 Promise 对象
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('6 秒后打印');
resolve()
}, 3000)
})
}).then(result => {
setTimeout(() => {
console.log('9 秒后打印');
}, 3000)
})
3. Promise方法
3.1 Promise.resolve
Promise.resolve
返回一个已解析(resolved)的 Promise 对象,并带有一个指定的值。无论传递给 Promise.resolve
的值是一个 Promise 对象还是一个普通的值,它都会返回一个 Promise 对象,并以该值解析。
- 如果传递给
Promise.resolve
的是一个 Promise 对象,则它会原封不动地返回这个 Promise 对象:
const originalPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("result");
}, 1000);
});
const resolvedPromise = Promise.resolve(originalPromise);
resolvedPromise.then(result => {
console.log(result); // 输出: Original promise resolved
});
- 如果传递给它的是一个 thenable 对象(即具有
.then
方法的对象),则Promise.resolve
会将其视为一个 Promise 对象,并立即调用其.then
方法:
const thenableObject = {
then: function(resolve, reject) {
resolve("result");
}
};
const resolvedFromThenable = Promise.resolve(thenableObject);
resolvedFromThenable.then(result => {
console.log(result); // 输出: result
});
- 如果传递给它的是一个普通的值(比如数字、字符串等),则
Promise.resolve
会返回一个以该值解析的 Promise 对象:
const resolvedStringPromise = Promise.resolve("result");
resolvedStringPromise.then(result => {
console.log(result); // 输出: result
});
const resolvedNumberPromise = Promise.resolve(42);
resolvedNumberPromise.then(result => {
console.log(result); // 输出: 42
});
3.2 Promise.reject
Promise.reject
返回一个被拒绝(rejected)的 Promise 对象,并带有一个指定的原因(reason)。无论传递给 Promise.reject
的值是什么,它都会返回一个被拒绝的 Promise 对象,并以该值作为拒绝原因。
const reason = "reason";
const rejectedPromise = Promise.reject(reason);
rejectedPromise.catch(error => {
console.error('Error:', error);
});
即使传递的是一个字符串,还是返回一个错误的 Promise。
3.3 Promise.all
Promise.all
接受一个由 Promise 对象组成的可迭代对象(比如数组),并返回一个新的 Promise 对象。这个新的 Promise 对象会在可迭代对象中所有的 Promise 都已经解决(fulfilled)或至少有一个 Promise 被拒绝(rejected)后才会被解决或拒绝。
全部成功的案例:
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'Success-1');
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 200, 'Success-2');
});
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 300, 'Success-3');
});
const promise4 = new Promise((resolve, reject) => {
setTimeout(reject, 150, 'Faild');
});
Promise.all([promise1, promise2, promise3])
.then(values => {
console.log(values); // 输出: ['Success-1', 'Success-2', 'Success-3']
})
.catch(error => {
console.error('Error:', error);
});
Promise.all([promise1, promise2, promise3, promise4])
.then(values => {
console.log(values);
})
.catch(error => {
console.error('Error:', error); // 输出: Error: Faild
});
3.4 Promise.race
Promise.race()
接收一个 Promise 数组作为参数,并返回一个新的 Promise。这个新 Promise 将在数组中的任何一个 Promise 对象解决(resolve)或拒绝(reject)时解决或拒绝,以第一个完成的 Promise 的状态为准。
这意味着,如果传入的 Promise 数组中有一个 Promise 对象先解决(resolve)或拒绝(reject),那么返回的 Promise 将立即采用这个解决值或拒绝原因。而其他的 Promise 对象的状态不会再影响返回的 Promise。
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 500, 'Promise 1');
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 1000, 'Promise 2');
});
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 2000, 'Promise 3');
});
Promise.race([promise1, promise2, promise3])
.then((value) => {
console.log(value); // 输出 "Promise 1",因为它是第一个完成的 Promise
});
4. 手写Promise
- 初始结构搭建
executor
为函数执行器。
// 声明构造函数
function Promise(executor) {
}
// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
}
- resolve 与 reject 结构搭建
函数执行器需要接收两个函数作为参数,所以这两个函数需要在实例中进行定义。
// 声明构造函数
function Promise(executor) {
// resolve 函数
function resolve(data) {
}
// reject 函数
function reject(data) {
}
// 同步调用执行器函数
executor(resolve, reject);
}
// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
}
- resolve 与 reject 代码实现
resolve
和 reject
实现的效果是修改对象的状态和结果值,但是在执行时拿到的 this
将是 Window
对象,而不是 Promise
对象。所以,需要在外面保存Promise
对象的 this
引用。
// 声明构造函数
function Promise(executor) {
this.PromiseState = 'pending';
this.PromiseResult = null;
// 保存实例对象this
const self = this;
// resolve 函数
function resolve(data) {
// 1. 修改对象状态
self.PromiseState = 'fulfilld';
// 2. 修改对象结果值
self.PromiseResult = data;
}
// reject 函数
function reject(data) {
// 1. 修改对象状态
self.PromiseState = 'rejectd';
// 2. 修改对象结果值
self.PromiseResult = data;
}
// 同步调用执行器函数
executor(resolve, reject)
}
// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
}
- throw抛出异常改变状态
// 声明构造函数
function Promise(executor) {
this.PromiseState = 'pending';
this.PromiseResult = null;
// 保存实例对象this
const self = this;
// resolve 函数
function resolve(data) {
// 1. 修改对象状态
self.PromiseState = 'fulfilld';
// 2. 修改对象结果值
self.PromiseResult = data;
}
// reject 函数
function reject(data) {
// 1. 修改对象状态
self.PromiseState = 'rejectd';
// 2. 修改对象结果值
self.PromiseResult = data;
}
try{
// 同步调用执行器函数
executor(resolve, reject);
}catch(e){
reject(e);
}
}
// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
}
- Promise对象状态只能修改一次
执行之前需要判断状态是否改变。
// 声明构造函数
function Promise(executor) {
this.PromiseState = 'pending';
this.PromiseResult = null;
// 保存实例对象this
const self = this;
// resolve 函数
function resolve(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'fulfilld';
// 2. 修改对象结果值
self.PromiseResult = data;
}
// reject 函数
function reject(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'rejectd';
// 2. 修改对象结果值
self.PromiseResult = data;
}
try{
// 同步调用执行器函数
executor(resolve, reject);
}catch(e){
reject(e);
}
}
// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
}
- then方法执行回调
then 方法中传递两个函数,根据 Promise 的状态执行不同的函数。
// 声明构造函数
function Promise(executor) {
this.PromiseState = 'pending';
this.PromiseResult = null;
// 保存实例对象this
const self = this;
// resolve 函数
function resolve(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'fulfilld';
// 2. 修改对象结果值
self.PromiseResult = data;
}
// reject 函数
function reject(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'rejectd';
// 2. 修改对象结果值
self.PromiseResult = data;
}
try{
// 同步调用执行器函数
executor(resolve, reject);
}catch(e){
reject(e);
}
}
// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
// 调用回调函数
if(this.PromiseState === 'fulfilld'){
onResolved(this.PromiseResult);
}
if(this.PromiseState === 'rejectd'){
onRejected(this.PromiseResult);
}
}
- 异步任务回调的执行
Promise 中的代码是同步执行的,如果里面是同步任务,那么此时立刻修改 Promise 状态,那么回调函数可以顺利执行。
如果里面是异步任务,在 then
方法中调用回调函数时,Promise 的 状态还是 pending
。这个时候应该保存一下回调函数,在执行完异步任务时再调用回调函数。
// 声明构造函数
function Promise(executor) {
this.PromiseState = 'pending';
this.PromiseResult = null;
this.callback = {};
// 保存实例对象this
const self = this;
// resolve 函数
function resolve(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'fulfilld';
// 2. 修改对象结果值
self.PromiseResult = data;
// 3. 调用成功的回调函数
if(self.callback.onResolved){
self.callback.onResolved(data);
}
}
// reject 函数
function reject(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'rejectd';
// 2. 修改对象结果值
self.PromiseResult = data;
// 3. 调用失败的回调函数
if(self.callback.onRejected){
self.callback.onRejected(data);
}
}
try{
// 同步调用执行器函数
executor(resolve, reject);
}catch(e){
reject(e);
}
}
// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
// 调用回调函数
if(this.PromiseState === 'fulfilld'){
onResolved(this.PromiseResult);
}
if(this.PromiseState === 'rejectd'){
onRejected(this.PromiseResult);
}
if(this.PromiseState === 'pending'){
// 保存回调函数
this.callback = {
onResolved,
onRejected
}
}
}
- 指定多个回调实现
Promise 对象可以指定多个 then
方法,并且当状态改变时,then
方法都会进行调用。
但是上面的代码实现,只会调用最后一个 then
方法,原因是保存回调函数时,只保存了最后一个 then
方法传递的回调函数。
需要状态改变时,执行多个回调,需要将所有的回调函数都保存。
// 声明构造函数
function Promise(executor) {
this.PromiseState = 'pending';
this.PromiseResult = null;
this.callbacks = [];
// 保存实例对象this
const self = this;
// resolve 函数
function resolve(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'fulfilld';
// 2. 修改对象结果值
self.PromiseResult = data;
// 3. 调用成功的回调函数
self.callbacks.forEach( item => {
item.onResolved(data);
})
}
// reject 函数
function reject(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'rejectd';
// 2. 修改对象结果值
self.PromiseResult = data;
// 3. 调用失败的回调函数
self.callbacks.forEach( item => {
item.onRejected(data);
})
}
try{
// 同步调用执行器函数
executor(resolve, reject);
}catch(e){
reject(e);
}
}
// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
// 调用回调函数
if(this.PromiseState === 'fulfilld'){
onResolved(this.PromiseResult);
}
if(this.PromiseState === 'rejectd'){
onRejected(this.PromiseResult);
}
if(this.PromiseState === 'pending'){
// 保存回调函数
this.callbacks.push({
onResolved,
onRejected
})
}
}
- 同步修改状态then方法结果返回
then
方法可以链式调用,说明有返回值,但是上面的代码回调并没有返回值。
// 声明构造函数
function Promise(executor) {
this.PromiseState = 'pending';
this.PromiseResult = null;
this.callbacks = [];
// 保存实例对象this
const self = this;
// resolve 函数
function resolve(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'fulfilld';
// 2. 修改对象结果值
self.PromiseResult = data;
// 3. 调用成功的回调函数
self.callbacks.forEach( item => {
item.onResolved(data);
})
}
// reject 函数
function reject(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'rejectd';
// 2. 修改对象结果值
self.PromiseResult = data;
// 3. 调用失败的回调函数
self.callbacks.forEach( item => {
item.onRejected(data);
})
}
try{
// 同步调用执行器函数
executor(resolve, reject);
}catch(e){
reject(e);
}
}
// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
// 需要返回一个 Promise
return new Promise((reslove, reject) => {
// 调用回调函数
if(this.PromiseState === 'fulfilld'){
try {
// 获取回调函数的执行结果
let result = onResolved(this.PromiseResult);
if(result instanceof Promise){
result.then(v => {
reslove(v);
}, r => {
reject(r);
})
}else{
resolve(result);
}
} catch (e) {
reject(e);
}
}
if(this.PromiseState === 'rejectd'){
try {
// 获取回调函数的执行结果
let result = onRejected(this.PromiseResult);
if(result instanceof Promise){
result.then(v => {
reslove(v);
}, r => {
reject(r);
})
}else{
resolve(result);
}
} catch (e) {
reject(e);
}
}
if(this.PromiseState === 'pending'){
// 保存回调函数
this.callbacks.push({
onResolved,
onRejected
})
}
})
}
- 异步修改状态then方法结果返回
当执行 then
方法时,如果 Promise 里面执行的是异步任务,此时 Promise 状态还是 pending
。那么执行 then
时,进入 if(this.PromiseState === 'pending')
判断,这里没有进行修改 Promise 的状态。
// 声明构造函数
function Promise(executor) {
this.PromiseState = 'pending';
this.PromiseResult = null;
this.callbacks = [];
// 保存实例对象this
const self = this;
// resolve 函数
function resolve(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'fulfilld';
// 2. 修改对象结果值
self.PromiseResult = data;
// 3. 调用成功的回调函数
self.callbacks.forEach( item => {
item.onResolved(data);
})
}
// reject 函数
function reject(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'rejectd';
// 2. 修改对象结果值
self.PromiseResult = data;
// 3. 调用失败的回调函数
self.callbacks.forEach( item => {
item.onRejected(data);
})
}
try{
// 同步调用执行器函数
executor(resolve, reject);
}catch(e){
reject(e);
}
}
// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
const self = this;
// 需要返回一个 Promise
return new Promise((reslove, reject) => {
// 调用回调函数
if(this.PromiseState === 'fulfilld'){
try {
// 获取回调函数的执行结果
let result = onResolved(this.PromiseResult);
if(result instanceof Promise){
result.then(v => {
reslove(v);
}, r => {
reject(r);
})
}else{
resolve(result);
}
} catch (e) {
reject(e);
}
}
if(this.PromiseState === 'rejectd'){
try {
// 获取回调函数的执行结果
let result = onRejected(this.PromiseResult);
if(result instanceof Promise){
result.then(v => {
reslove(v);
}, r => {
reject(r);
})
}else{
resolve(result);
}
} catch (e) {
reject(e);
}
}
if(this.PromiseState === 'pending'){
// 保存回调函数
this.callbacks.push({
onResolved: function() {
try {
// 执行成功回调函数
let result = onResolved(self.PromiseResult);
if(result instanceof Promise){
result.then(v => {
reslove(v);
}, r => {
reject(r);
})
}else{
reslove();
}
} catch (e) {
reject(e);
}
},
onRejected: function() {
try {
// 执行回调失败函数
let result = onRejected(self.PromiseResult);
if(result instanceof Promise){
result.then(v => {
reslove(v);
}, r => {
reject(r);
})
}else{
reslove();
}
} catch (e) {
reject();
}
}
})
}
})
}
- then方法优化
上面的代码有很多是重复的,需要进行优化。
// 声明构造函数
function Promise(executor) {
this.PromiseState = 'pending';
this.PromiseResult = null;
this.callbacks = [];
// 保存实例对象this
const self = this;
// resolve 函数
function resolve(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'fulfilld';
// 2. 修改对象结果值
self.PromiseResult = data;
// 3. 调用成功的回调函数
self.callbacks.forEach( item => {
item.onResolved(data);
})
}
// reject 函数
function reject(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'rejectd';
// 2. 修改对象结果值
self.PromiseResult = data;
// 3. 调用失败的回调函数
self.callbacks.forEach( item => {
item.onRejected(data);
})
}
try{
// 同步调用执行器函数
executor(resolve, reject);
}catch(e){
reject(e);
}
}
// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
const self = this;
// 需要返回一个 Promise
return new Promise((reslove, reject) => {
function callback(type) {
try {
// 获取回调函数的执行结果
let result = type(self.PromiseResult);
if(result instanceof Promise){
result.then(v => {
reslove(v);
}, r => {
reject(r);
})
}else{
resolve(result);
}
} catch (e) {
reject(e);
}
}
// 调用回调函数
if(this.PromiseState === 'fulfilld'){
callback(onResolved);
}
if(this.PromiseState === 'rejectd'){
callback(onRejected);
}
if(this.PromiseState === 'pending'){
// 保存回调函数
this.callbacks.push({
onResolved: function() {
callback(onResolved);
},
onRejected: function() {
callback(onRejected);
}
})
}
})
}
- catch方法
catch
方法只处理失败的回调函数,所以调用 then
方法即可。
另外,如果 then
方法只传入成功的回调函数,那么失败的时候将执行不到失败的回调函数,提示 onRejected is not a function
。
另外,当 then
方法什么都不传时,默认应该也能够进行值传递,所以 onResolved
应该也需要一个默认方法。
// 声明构造函数
function Promise(executor) {
this.PromiseState = 'pending';
this.PromiseResult = null;
this.callbacks = [];
// 保存实例对象this
const self = this;
// resolve 函数
function resolve(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'fulfilld';
// 2. 修改对象结果值
self.PromiseResult = data;
// 3. 调用成功的回调函数
self.callbacks.forEach( item => {
item.onResolved(data);
})
}
// reject 函数
function reject(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'rejectd';
// 2. 修改对象结果值
self.PromiseResult = data;
// 3. 调用失败的回调函数
self.callbacks.forEach( item => {
item.onRejected(data);
})
}
try{
// 同步调用执行器函数
executor(resolve, reject);
}catch(e){
reject(e);
}
}
// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
const self = this;
// 判断回调函数参数
if(typeof onRejected !== 'function'){
onRejected = reason => {
throw reason;
}
}
// 需要返回一个 Promise
return new Promise((reslove, reject) => {
function callback(type) {
try {
// 获取回调函数的执行结果
let result = type(self.PromiseResult);
if(result instanceof Promise){
result.then(v => {
reslove(v);
}, r => {
reject(r);
})
}else{
resolve(result);
}
} catch (e) {
reject(e);
}
}
// 调用回调函数
if(this.PromiseState === 'fulfilld'){
callback(onResolved);
}
if(this.PromiseState === 'rejectd'){
callback(onRejected);
}
if(this.PromiseState === 'pending'){
// 保存回调函数
this.callbacks.push({
onResolved: function() {
callback(onResolved);
},
onRejected: function() {
callback(onRejected);
}
})
}
})
}
Promise.prototype.catch = function (onRejected) {
return this.then(undefined, onRejected);
}
- resolve方法封装
// 声明构造函数
function Promise(executor) {
this.PromiseState = 'pending';
this.PromiseResult = null;
this.callbacks = [];
// 保存实例对象this
const self = this;
// resolve 函数
function resolve(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'fulfilld';
// 2. 修改对象结果值
self.PromiseResult = data;
// 3. 调用成功的回调函数
self.callbacks.forEach( item => {
item.onResolved(data);
})
}
// reject 函数
function reject(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'rejectd';
// 2. 修改对象结果值
self.PromiseResult = data;
// 3. 调用失败的回调函数
self.callbacks.forEach( item => {
item.onRejected(data);
})
}
try{
// 同步调用执行器函数
executor(resolve, reject);
}catch(e){
reject(e);
}
}
// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
const self = this;
// 判断回调函数参数
if(typeof onRejected !== 'function'){
onRejected = reason => {
throw reason;
}
}
if(typeof onResolved !== 'function'){
onResolved = value => value;
}
// 需要返回一个 Promise
return new Promise((reslove, reject) => {
function callback(type) {
try {
// 获取回调函数的执行结果
let result = type(self.PromiseResult);
if(result instanceof Promise){
result.then(v => {
reslove(v);
}, r => {
reject(r);
})
}else{
resolve(result);
}
} catch (e) {
reject(e);
}
}
// 调用回调函数
if(this.PromiseState === 'fulfilld'){
callback(onResolved);
}
if(this.PromiseState === 'rejectd'){
callback(onRejected);
}
if(this.PromiseState === 'pending'){
// 保存回调函数
this.callbacks.push({
onResolved: function() {
callback(onResolved);
},
onRejected: function() {
callback(onRejected);
}
})
}
})
}
Promise.prototype.catch = function (onRejected) {
return this.then(undefined, onRejected);
}
Promise.prototype.resolve = function (value) {
// 返回 Promise 对象
return new Promise((resolve, reject) => {
if(value instanceof Promise){
value.then(v => {
reslove(v);
}, r => {
reject(r);
})
}else{
resolve(result);
}
})
}
- reject方法封装
// 声明构造函数
function Promise(executor) {
this.PromiseState = 'pending';
this.PromiseResult = null;
this.callbacks = [];
// 保存实例对象this
const self = this;
// resolve 函数
function resolve(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'fulfilld';
// 2. 修改对象结果值
self.PromiseResult = data;
// 3. 调用成功的回调函数
self.callbacks.forEach( item => {
item.onResolved(data);
})
}
// reject 函数
function reject(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'rejectd';
// 2. 修改对象结果值
self.PromiseResult = data;
// 3. 调用失败的回调函数
self.callbacks.forEach( item => {
item.onRejected(data);
})
}
try{
// 同步调用执行器函数
executor(resolve, reject);
}catch(e){
reject(e);
}
}
// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
const self = this;
// 判断回调函数参数
if(typeof onRejected !== 'function'){
onRejected = reason => {
throw reason;
}
}
if(typeof onResolved !== 'function'){
onResolved = value => value;
}
// 需要返回一个 Promise
return new Promise((reslove, reject) => {
function callback(type) {
try {
// 获取回调函数的执行结果
let result = type(self.PromiseResult);
if(result instanceof Promise){
result.then(v => {
reslove(v);
}, r => {
reject(r);
})
}else{
resolve(result);
}
} catch (e) {
reject(e);
}
}
// 调用回调函数
if(this.PromiseState === 'fulfilld'){
callback(onResolved);
}
if(this.PromiseState === 'rejectd'){
callback(onRejected);
}
if(this.PromiseState === 'pending'){
// 保存回调函数
this.callbacks.push({
onResolved: function() {
callback(onResolved);
},
onRejected: function() {
callback(onRejected);
}
})
}
})
}
Promise.prototype.catch = function (onRejected) {
return this.then(undefined, onRejected);
}
Promise.prototype.resolve = function (value) {
// 返回 Promise 对象
return new Promise((resolve, reject) => {
if(value instanceof Promise){
value.then(v => {
reslove(v);
}, r => {
reject(r);
})
}else{
resolve(result);
}
})
}
Promise.prototype.reject = function (reason) {
// 返回 Promise 对象
return new Promise((resolve, reject) => {
reject(reason)
})
}
- all方法封装
// 声明构造函数
function Promise(executor) {
this.PromiseState = 'pending';
this.PromiseResult = null;
this.callbacks = [];
// 保存实例对象this
const self = this;
// resolve 函数
function resolve(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'fulfilld';
// 2. 修改对象结果值
self.PromiseResult = data;
// 3. 调用成功的回调函数
self.callbacks.forEach( item => {
item.onResolved(data);
})
}
// reject 函数
function reject(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'rejectd';
// 2. 修改对象结果值
self.PromiseResult = data;
// 3. 调用失败的回调函数
self.callbacks.forEach( item => {
item.onRejected(data);
})
}
try{
// 同步调用执行器函数
executor(resolve, reject);
}catch(e){
reject(e);
}
}
// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
const self = this;
// 判断回调函数参数
if(typeof onRejected !== 'function'){
onRejected = reason => {
throw reason;
}
}
if(typeof onResolved !== 'function'){
onResolved = value => value;
}
// 需要返回一个 Promise
return new Promise((reslove, reject) => {
function callback(type) {
try {
// 获取回调函数的执行结果
let result = type(self.PromiseResult);
if(result instanceof Promise){
result.then(v => {
reslove(v);
}, r => {
reject(r);
})
}else{
resolve(result);
}
} catch (e) {
reject(e);
}
}
// 调用回调函数
if(this.PromiseState === 'fulfilld'){
callback(onResolved);
}
if(this.PromiseState === 'rejectd'){
callback(onRejected);
}
if(this.PromiseState === 'pending'){
// 保存回调函数
this.callbacks.push({
onResolved: function() {
callback(onResolved);
},
onRejected: function() {
callback(onRejected);
}
})
}
})
}
Promise.prototype.catch = function (onRejected) {
return this.then(undefined, onRejected);
}
Promise.resolve = function (value) {
// 返回 Promise 对象
return new Promise((resolve, reject) => {
if(value instanceof Promise){
value.then(v => {
reslove(v);
}, r => {
reject(r);
})
}else{
resolve(result);
}
})
}
Promise.reject = function (reason) {
// 返回 Promise 对象
return new Promise((resolve, reject) => {
reject(reason)
})
}
Promise.all = function (promises) {
// 返回 Promise 对象
return new Promise((resolve, reject) => {
let count = 0;
let arr = [];
for(let i=0;i<promises.length;i++){
promises[i].then(v => {
// 得知对象的状态是成功
count++;
// 将结果存入数组
arr[i] = value;
// 成功的条件
if(count === promises.length){
resolve();
}
}, r => {
reject(r);
})
}
})
}
- race方法封装
// 声明构造函数
function Promise(executor) {
this.PromiseState = 'pending';
this.PromiseResult = null;
this.callbacks = [];
// 保存实例对象this
const self = this;
// resolve 函数
function resolve(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'fulfilld';
// 2. 修改对象结果值
self.PromiseResult = data;
// 3. 调用成功的回调函数
self.callbacks.forEach( item => {
item.onResolved(data);
})
}
// reject 函数
function reject(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'rejectd';
// 2. 修改对象结果值
self.PromiseResult = data;
// 3. 调用失败的回调函数
self.callbacks.forEach( item => {
item.onRejected(data);
})
}
try{
// 同步调用执行器函数
executor(resolve, reject);
}catch(e){
reject(e);
}
}
// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
const self = this;
// 判断回调函数参数
if(typeof onRejected !== 'function'){
onRejected = reason => {
throw reason;
}
}
if(typeof onResolved !== 'function'){
onResolved = value => value;
}
// 需要返回一个 Promise
return new Promise((reslove, reject) => {
function callback(type) {
try {
// 获取回调函数的执行结果
let result = type(self.PromiseResult);
if(result instanceof Promise){
result.then(v => {
reslove(v);
}, r => {
reject(r);
})
}else{
resolve(result);
}
} catch (e) {
reject(e);
}
}
// 调用回调函数
if(this.PromiseState === 'fulfilld'){
callback(onResolved);
}
if(this.PromiseState === 'rejectd'){
callback(onRejected);
}
if(this.PromiseState === 'pending'){
// 保存回调函数
this.callbacks.push({
onResolved: function() {
callback(onResolved);
},
onRejected: function() {
callback(onRejected);
}
})
}
})
}
Promise.prototype.catch = function (onRejected) {
return this.then(undefined, onRejected);
}
Promise.resolve = function (value) {
// 返回 Promise 对象
return new Promise((resolve, reject) => {
if(value instanceof Promise){
value.then(v => {
reslove(v);
}, r => {
reject(r);
})
}else{
resolve(result);
}
})
}
Promise.reject = function (reason) {
// 返回 Promise 对象
return new Promise((resolve, reject) => {
reject(reason)
})
}
Promise.all = function (promises) {
// 返回 Promise 对象
return new Promise((resolve, reject) => {
let count = 0;
let arr = [];
for(let i=0;i<promises.length;i++){
promises[i].then(v => {
// 得知对象的状态是成功
count++;
// 将结果存入数组
arr[i] = value;
// 成功的条件
if(count === promises.length){
resolve();
}
}, r => {
reject(r);
})
}
})
}
Promise.race = function (promises) {
// 返回 Promise 对象
return new Promise((resolve, reject) => {
for(let i=0;i<promises.length;i++){
promises[i].then(v => {
resolve(v);
}, r => {
reject(r);
})
}
})
}
- then方法回调异步执行
then方法回调是异步执行的。
// 声明构造函数
function Promise(executor) {
this.PromiseState = 'pending';
this.PromiseResult = null;
this.callbacks = [];
// 保存实例对象this
const self = this;
// resolve 函数
function resolve(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'fulfilld';
// 2. 修改对象结果值
self.PromiseResult = data;
setTimeout(() => {
// 3. 调用成功的回调函数
self.callbacks.forEach( item => {
item.onResolved(data);
})
})
}
// reject 函数
function reject(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'rejectd';
// 2. 修改对象结果值
self.PromiseResult = data;
setTimeout(() => {
// 3. 调用失败的回调函数
self.callbacks.forEach( item => {
item.onRejected(data);
})
})
}
try{
// 同步调用执行器函数
executor(resolve, reject);
}catch(e){
reject(e);
}
}
// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){
const self = this;
// 判断回调函数参数
if(typeof onRejected !== 'function'){
onRejected = reason => {
throw reason;
}
}
if(typeof onResolved !== 'function'){
onResolved = value => value;
}
// 需要返回一个 Promise
return new Promise((reslove, reject) => {
function callback(type) {
try {
// 获取回调函数的执行结果
let result = type(self.PromiseResult);
if(result instanceof Promise){
result.then(v => {
reslove(v);
}, r => {
reject(r);
})
}else{
resolve(result);
}
} catch (e) {
reject(e);
}
}
// 调用回调函数
if(this.PromiseState === 'fulfilld'){
setTimeout(() => {
callback(onResolved);
});
}
if(this.PromiseState === 'rejectd'){
setTimeout(() => {
callback(onRejected);
});
}
if(this.PromiseState === 'pending'){
// 保存回调函数
this.callbacks.push({
onResolved: function() {
callback(onResolved);
},
onRejected: function() {
callback(onRejected);
}
})
}
})
}
Promise.prototype.catch = function (onRejected) {
return this.then(undefined, onRejected);
}
Promise.resolve = function (value) {
// 返回 Promise 对象
return new Promise((resolve, reject) => {
if(value instanceof Promise){
value.then(v => {
reslove(v);
}, r => {
reject(r);
})
}else{
resolve(result);
}
})
}
Promise.reject = function (reason) {
// 返回 Promise 对象
return new Promise((resolve, reject) => {
reject(reason)
})
}
Promise.all = function (promises) {
// 返回 Promise 对象
return new Promise((resolve, reject) => {
let count = 0;
let arr = [];
for(let i=0;i<promises.length;i++){
promises[i].then(v => {
// 得知对象的状态是成功
count++;
// 将结果存入数组
arr[i] = value;
// 成功的条件
if(count === promises.length){
resolve();
}
}, r => {
reject(r);
})
}
})
}
Promise.race = function (promises) {
// 返回 Promise 对象
return new Promise((resolve, reject) => {
for(let i=0;i<promises.length;i++){
promises[i].then(v => {
resolve(v);
}, r => {
reject(r);
})
}
})
}
- 封装成class
class Promise{
constructor(executor){
this.PromiseState = 'pending';
this.PromiseResult = null;
this.callbacks = [];
// 保存实例对象this
const self = this;
// resolve 函数
function resolve(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'fulfilld';
// 2. 修改对象结果值
self.PromiseResult = data;
setTimeout(() => {
// 3. 调用成功的回调函数
self.callbacks.forEach( item => {
item.onResolved(data);
})
})
}
// reject 函数
function reject(data) {
if(self.PromiseState !== 'pending') return;
// 1. 修改对象状态
self.PromiseState = 'rejectd';
// 2. 修改对象结果值
self.PromiseResult = data;
setTimeout(() => {
// 3. 调用失败的回调函数
self.callbacks.forEach( item => {
item.onRejected(data);
})
})
}
try{
// 同步调用执行器函数
executor(resolve, reject);
}catch(e){
reject(e);
}
}
then(onResolved, onRejected){
const self = this;
// 判断回调函数参数
if(typeof onRejected !== 'function'){
onRejected = reason => {
throw reason;
}
}
if(typeof onResolved !== 'function'){
onResolved = value => value;
}
// 需要返回一个 Promise
return new Promise((reslove, reject) => {
function callback(type) {
try {
// 获取回调函数的执行结果
let result = type(self.PromiseResult);
if(result instanceof Promise){
result.then(v => {
reslove(v);
}, r => {
reject(r);
})
}else{
resolve(result);
}
} catch (e) {
reject(e);
}
}
// 调用回调函数
if(this.PromiseState === 'fulfilld'){
setTimeout(() => {
callback(onResolved);
});
}
if(this.PromiseState === 'rejectd'){
setTimeout(() => {
callback(onRejected);
});
}
if(this.PromiseState === 'pending'){
// 保存回调函数
this.callbacks.push({
onResolved: function() {
callback(onResolved);
},
onRejected: function() {
callback(onRejected);
}
})
}
})
}
catch(onRejected){
return this.then(undefined, onRejected);
}
static resolve(value){
// 返回 Promise 对象
return new Promise((resolve, reject) => {
if(value instanceof Promise){
value.then(v => {
reslove(v);
}, r => {
reject(r);
})
}else{
resolve(result);
}
})
}
static reject(reason){
// 返回 Promise 对象
return new Promise((resolve, reject) => {
reject(reason)
})
}
static all(promises){
// 返回 Promise 对象
return new Promise((resolve, reject) => {
let count = 0;
let arr = [];
for(let i=0;i<promises.length;i++){
promises[i].then(v => {
// 得知对象的状态是成功
count++;
// 将结果存入数组
arr[i] = value;
// 成功的条件
if(count === promises.length){
resolve();
}
}, r => {
reject(r);
})
}
})
}
static race(){
// 返回 Promise 对象
return new Promise((resolve, reject) => {
for(let i=0;i<promises.length;i++){
promises[i].then(v => {
resolve(v);
}, r => {
reject(r);
})
}
})
}
}
5. async与await
5.1 async
- 函数返回值为 Promise 对象
- Promise 对象的结果值由 async 函数的执行的返回值决定
5.2 await
- await 右侧表达式一般为 Promise 对象,但也可以是其他值
- 如果表达式为 Promise 对象,await 返回的是 Promise 成功的值
- 如果表达式为其它值,直接将此值作为 await 的返回值
5.3 注意
- await 必须写在 async 函数中,但 async 函数中可以没有 await
- 如果 await 的 promise 失败了,就会抛出异常,需要通过
try...catch
捕获处理
提醒:本文发布于232天前,文中所关联的信息可能已发生改变,请知悉!