深入理解Promise（从功能角度解析promise源码实现）

Evan_鹿喑

已于 2022-07-05 14:57:05 修改

阅读量873

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 vue.js

于 2022-01-06 15:48:17 首次发布

本文链接：https://blog.csdn.net/qq_39077394/article/details/122345291

版权

Promise 异步编程状态管理链式调用 Promise/A+

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、什么是Promise？

Promise 是异步编程的一种解决方案。从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。

一般来说我们会碰到的回调嵌套都不会很多，一般就一到两级，但是某些情况下，回调嵌套很多时，代码就会非常繁琐，会给我们的编程带来很多的麻烦，这种情况俗称回调地狱。

function ajaxA() {
    setTimeout(() => {
        let resultA = 10
        console.log("A请求返回结果===>", resultA)
    }, 1000)
}
function ajaxB() {
    setTimeout(() => {
        let resultB = 20
        console.log("B请求返回结果===>", resultB)
    }, 1000)
}
function ajaxC() {
    setTimeout(() => {
        let resultC = 30
        console.log("C请求返回结果===>", resultC)
    }, 1000)
}
function ajaxD() {
    setTimeout(() => {
        let resultD = 40
        console.log("D请求返回结果===>", resultD)
    }, 1000)
}

//回调嵌套（回调地狱）
setTimeout(() => {
    let resultA = 10
    console.log("A请求返回结果===>", resultA)
    setTimeout(() => {
        let resultB = 20
        console.log("B请求返回结果===>", resultB)
        setTimeout(() => {
            let resultC = 30
            console.log("C请求返回结果===>", resultC)
            setTimeout(() => {
                let resultD = 40
                console.log("D请求返回结果===>", resultD)
                console.log("回调嵌套最终返回结果======>", resultA + resultB + resultC + resultD)
            }, 1000)
        }, 1000)
    }, 1000)
}, 1000)

promise是用来解决两个问题的：

回调地狱，代码难以维护，常常第一个的函数的输出是第二个函数的输入这种现象
promise可以支持多个并发的请求，获取并发请求中的数据
这个promise可以解决异步的问题，本身不能说promise是异步的

function ajaxA() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            let resultA = 10
            console.log("A_请求返回结果===>", resultA)
            resolve(resultA)
        }, 1000)
    })
}
function ajaxB() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            let resultB = 20
            console.log("B_请求返回结果===>", resultB)
            resolve(resultB)
        }, 1000)
    })
}
function ajaxC() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            let resultC = 30
            console.log("C_请求返回结果===>", resultC)
            resolve(resultC)
        }, 1000)
    })
}
function ajaxD() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            let resultD = 40
            console.log("D_请求返回结果===>", resultD)
            resolve(resultD)
        }, 1000)
    })
}

let resultA = 0
let resultB = 0
let resultC = 0
let resultD = 0
ajaxA().then(resA => {
	resultA = resA
	return ajaxB()
}).then(resB => {
	resultB = resB
	return ajaxC()
}).then(resC => {
	resultC = resC
	return ajaxD()
}).then(resD => {
	resultD = resD
	console.log("使用promise最终返回结果======>", resultA + resultB + resultC + resultD)
})

二、什么是 Promise A+ 规范？

看到 A+ 肯定会想到是不是还有 A，事实上确实有。其实 Promise 有多种规范，除了前面的 Promise A、promise A+ 还有 Promise/B，Promise/D。目前我们使用的 Promise 是基于 Promise A+ 规范实现的，感兴趣的移步 promiseA+规范了解一下，这里不赘述。

检验一份手写 Promise 靠不靠谱，通过 Promise A+ 规范自然是基本要求，这里我们可以借助 promises-aplus-tests 来检测我们的代码是否符合规范。

三、手写promise（实现原理）

基础用法

const promise = new Promise((resolve, reject) => {
   resolve('success')
   reject('err')
})
promise.then(res => {
  console.log('resolve', res)
}, err => {
  console.log('reject', err)
})

分析

Promise 是一个类，在执行这个类的时候会传入一个执行器，这个执行器会立即执行
Promise 会有三种状态：Pending(等待)、Fulfilled(完成)、Rejected(失败)
状态只能由 Pending --> Fulfilled 或者 Pending --> Rejected，且一但发生改变便不可二次修改
Promise 中使用 resolve 和 reject 两个函数来更改状态
then 方法内部做的事情就是状态判断：状态成功就调用成功回调函数，状态失败则调用失败回调函数

1、简单实现

新建 MyPromise 类，传入执行器 executor

// myPromise.js
// 先定义三个常量表示状态
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected'

class MyPromise {
	status = PENDING; //status储存状态，初始值是 pending(等待)
	value = null; //value成功后保存成功的结果
	reason = null; //reason失败后保存失败的原因

	constructor(executor) {
		// executor是一个执行器，通过 new 命令创建对象实例时，自动调用该方法
		// 并传入resolve和reject方法
		executor(this.resolve, this.reject)
	}
	// resolve和reject为什么要用箭头函数？
	// 如果直接调用的话，普通函数this指向的是window或者undefined
	// 用箭头函数就可以让this指向当前实例对象
	// 更改成功后的状态
	resolve = (value) => {
		// 只有状态是等待，才执行状态修改
		if (this.status === PENDING) {
			// 状态修改为成功
			this.status = FULFILLED;
			// 保存成功之后的值
			this.value = value;
		}
	}
	// 更改失败后的状态
	reject = (reason) => {
		// 只有状态是等待，才执行状态修改
		if (this.status === PENDING) {
			// 状态成功为失败
			this.status = REJECTED;
			// 保存失败后的原因
			this.reason = reason;
		}
	}
	// then方法传递两个回调函数作为参数
	then(onFulfilled, onRejected) {
		// 判断状态
		if (this.status === FULFILLED) {
			// 调用成功回调，并且把值返回
			onFulfilled(this.value);
		} else if (this.status === REJECTED) {
			// 调用失败回调，并且把原因返回
			onRejected(this.reason);
		}
	}
}

// 使用 module.exports 对外暴露 MyPromise 类
module.exports = MyPromise;

测试

//test.js
// 引入我们的 MyPromise.js
const MyPromise = require('./MyPromise')
const promise = new MyPromise((resolve, reject) => {
	resolve('success')
	reject('err')
})
promise.then(value => {
	console.log('resolve', value)
}, reason => {
	console.log('reject', reason)
})
// 执行结果
// resolve success

2、异步任务问题

上面执行同步代码时没有问题，但是如果含有异步任务就会出现问题，例如：

//test.js
const MyPromise = require('./MyPromise')
const myPromiseTest = new MyPromise((resolve, reject) => {
    setTimeout(()=>{
		resolve('success')
	},1000)
})
myPromiseTest.then(value => {
	console.log('resolve', value)
}, reason => {
	console.log('reject', reason)
})

//此时不会有打印信息

原因分析：

由于主线程代码立即执行，而 setTimeout 是异步代码，会隔一段时间才执行resolve方法从而去改变promise的状态，所以此时promise的状态为Pending(等待)，但是then方法里面并没有对状态为Pending时的情况做判断。

代码改造：

1、MyPromise 类中新增两个变量分别用于存储成功和失败的回调

// 存储成功回调函数
onFulfilledCallback = null;
// 存储失败回调函数
onRejectedCallback = null;

2、then 方法中对 Pending 状态进行处理

then(onFulfilled, onRejected) {
	// 判断状态
	if (this.status === FULFILLED) {
		// 调用成功回调，并且把值返回
		onFulfilled(this.value);
	} else if (this.status === REJECTED) {
		// 调用失败回调，并且把原因返回
		onRejected(this.reason);
	} else if (this.status === PENDING) {
		// ==== 新增 ====
		// 因为不知道后面状态的变化情况，所以将成功回调和失败回调存储起来
		// 等到执行成功失败函数的时候再传递
		this.onFulfilledCallback = onFulfilled;
		this.onRejectedCallback = onRejected;
	}
}

3、在resolve 与 reject 中调用回调函数

// 更改成功后的状态
resolve = (value) => {
	// 只有状态是等待，才执行状态修改
	if (this.status === PENDING) {
		// 状态修改为成功
		this.status = FULFILLED;
		// 保存成功之后的值
		this.value = value;
		// ==== 新增 ====
		// 判断成功回调是否存在，如果存在就调用
		this.onFulfilledCallback && this.onFulfilledCallback(value);
	}
}
// 更改失败后的状态
reject = (reason) => {
	// 只有状态是等待，才执行状态修改
	if (this.status === PENDING) {
		// 状态成功为失败
		this.status = REJECTED;
		// 保存失败后的原因
		this.reason = reason;
		// ==== 新增 ====
		// 判断失败回调是否存在，如果存在就调用
		this.onRejectedCallback && this.onRejectedCallback(reason)
	}
}

代码测试（处理异步任务）

const MyPromise = require('./MyPromise')
const myPromiseTest = new MyPromise((resolve, reject) => {
	setTimeout(() => {
		resolve('success')
	}, 2000);
})
myPromiseTest.then(value => {
	console.log('resolve', value)
}, reason => {
	console.log('reject', reason)
})

// 等待 2s 输出 resolve success

3、多个异步任务的处理

改造完以后发现可以处理异步任务了，但是由于then方法可以多次调用，按照上面的写法一旦遇到多个异步任务时就会出现问题，例如：

const MyPromise = require('./MyPromise')
const myPromiseTest = new MyPromise((resolve, reject) => {
    //resolve('同步success!')
	setTimeout(() => {
		resolve('异步success!')
	}, 2000);
})
myPromiseTest.then(value => {
  console.log('这是第一个then方法！')
  console.log('resolve', value)
})
myPromiseTest.then(value => {
  console.log('这是第二个then方法！')
  console.log('resolve', value)
})
myPromiseTest.then(value => {
  console.log('这是第三个then方法！')
  console.log('resolve', value)
})
// 执行结果
// 这是第三个then方法！
// resolve success!

原因分析：

由于只设置了一个变量用于保存回调函数，所以在多个then方法调用的时候，用于存放回调函数的变量在赋值的时候后面的会把前面的覆盖，导致最终resolve执行取到的回调函数则是最后一个then方法里面的内容。分析下来需要改进的地方就是分别保存每个异步任务的回调。

代码改造：

1、由于可能存在多个异步任务回调，用数组的形式保存

// 存储成功回调函数
// onFulfilledCallback = null;
onFulfilledCallbacks = [];
// 存储失败回调函数
// onRejectedCallback = null;
onRejectedCallbacks = [];

2、回调函数存入数组中

then(onFulfilled, onRejected) {
	// 判断状态
	if (this.status === FULFILLED) {
		// 调用成功回调，并且把值返回
		onFulfilled(this.value);
	} else if (this.status === REJECTED) {
		// 调用失败回调，并且把原因返回
		onRejected(this.reason);
	} else if (this.status === PENDING) {
		// 因为不知道后面状态的变化，这里先将成功回调和失败回调存储起来
		// 等待后续调用
		this.onFulfilledCallbacks.push(onFulfilled);
		this.onRejectedCallbacks.push(onRejected);
	}
}

3、循环调用成功和失败的回调

// 更改成功后的状态
resolve = (value) => {
	// 只有状态是等待，才执行状态修改
	if (this.status === PENDING) {
		// 状态修改为成功
		this.status = FULFILLED;
		// 保存成功之后的值
		this.value = value;
		// resolve里面将所有成功的回调拿出来执行
		while (this.onFulfilledCallbacks.length) {
			// Array.shift() 取出数组第一个元素，然后()调用，shift不是纯函数，取出后，数组将失去该元素，直到数组为空
			this.onFulfilledCallbacks.shift()(value)
		}
	}
}
// 更改失败后的状态
reject = (reason) => {
	// 只有状态是等待，才执行状态修改
	if (this.status === PENDING) {
		// 状态成功为失败
		this.status = REJECTED;
		// 保存失败后的原因
		this.reason = reason;
		// ==== 新增 ====
		// resolve里面将所有失败的回调拿出来执行
		while (this.onRejectedCallbacks.length) {
			this.onRejectedCallbacks.shift()(reason)
		}
	}
}

再次测试运行

const MyPromise = require('./MyPromise')
const myPromiseTest = new MyPromise((resolve, reject) => {
    //resolve('同步success!')
	setTimeout(() => {
		resolve('异步success!')
	}, 2000);
})
myPromiseTest.then(value => {
  console.log('这是第一个then方法！')
  console.log('resolve', value)
})
myPromiseTest.then(value => {
  console.log('这是第二个then方法！')
  console.log('resolve', value)
})
myPromiseTest.then(value => {
  console.log('这是第三个then方法！')
  console.log('resolve', value)
})
// 执行结果
// 这是第一个then方法！
// resolve success!
// 这是第二个then方法！
// resolve success!
// 这是第三个then方法！
// resolve success!

4、then方法链式调用

原生 promise 案例:

const promiseTest = new Promise((resolve, reject) => {
	resolve('success!')
})
promiseTest.then(res => {
	console.log("第一个then返回结果", res)
	return 'other success!'
}).then(res => {
	console.log("第二个then返回结果", res)
})
// 执行结果
// 第一个then返回结果 success!
// 第二个then返回结果 other success!

myPromise 测试：

const myPromiseTest = new MyPromise((resolve, reject) => {
	resolve('success!')
})
myPromiseTest.then(res => {
	console.log("第一个then返回结果",res)
	return 'other success!'
}).then(res=>{
	console.log("第二个then返回结果",res)
})
// 执行结果
// (报错信息) TypeError: Cannot read property 'then' of undefined

then 方法要实现链式调用，就需要方法里面返回一个 Promise 对象。then 方法里面 return 一个返回值作为下一个 then 方法的参数，如果是 return 一个 Promise 对象，那么就需要判断它的状态

代码改造：

class MyPromise {
	//......
	then(onFulfilled, onRejected) {
		// 为了链式调用这里直接创建一个 MyPromise，并在后面 return 出去
		const newPromise = new MyPromise((resolve, reject) => {
			if (this.status === FULFILLED) {
				const x = onFulfilled(this.value);
				resolve(x)
			} else if (this.status === REJECTED) {
				// ......
			} else {
				// ......
			}
		})
		return newPromise;
	}
}

修改后再次测试：

const myPromiseTest = new MyPromise((resolve, reject) => {
	resolve('success!')
})
myPromiseTest.then(res => {
	console.log("第一个then返回结果",res)
	return 'other success!'
}).then(res => {
	console.log("第二个then返回结果",res)
})
// 执行结果
// 第一个then返回结果 success!
// 第二个then返回结果 other success!

5、判断 then 方法返回的内容

判断当前then回调的的执行结果值是普通对象还是Promise对象

如果是普通值，直接调用resolve
如果是Promise对象，查看Promise对象返回的状态，根据状态决定调用resolve还是reject

代码修改：

class MyPromise {
	......
	then(onFulfilled, onRejected) {
		const newPromise = new MyPromise((resolve, reject) => {
			if (this.status === FULFILLED) {
				const x = onFulfilled(this.value);
				// 将执行结果传入 resolvePromise 集中处理
				resolvePromise(x, resolve, reject);
			} else if (this.status === REJECTED) {
				// ......
			} else if (this.status === PENDING) {
				// ......
			}
		})
		return newPromise;
	}
}
function resolvePromise(x, resolve, reject) {
    // 判断当前then回调的执行结果值是普通对象还是Promise对象
    // 如果是普通值，直接调用resolve
    // 如果是Promise对象，查看Promise对象返回的状态，根据状态决定调用resolve还是reject
	if (x instanceof MyPromise) {
		// 执行 x，调用 then 方法，目的是将其状态变为 fulfilled 或者 rejected
		// x.then(value => resolve(value), reason => reject(reason))
		// 简化之后
		x.then(resolve, reject)
	} else {
        // 普通值
		resolve(x)
	}
}

**注意点：then回调的执行结果返回的promise不可以是它本身，会发生循环调用，这个时候程序就会报错 **

原生 promise 案例:

const promiseTest = new Promise((resolve, reject) => {
	resolve(100)
})
const p1 = promiseTest.then(res => {
	console.log(res)
	return p1
})
// 执行结果
// 100
// (报错信息) Uncaught (in promise) TypeError: Chaining cycle detected for promise #<Promise>

myPromise 实现

class MyPromise {
	......
	then(onFulfilled, onRejected) {
		const newPromise = new MyPromise((resolve, reject) => {
			if (this.status === FULFILLED) {
				const x = onFulfilled(this.value);
				// resolvePromise 集中处理，将 newPromise 传入
				resolvePromise(newPromise, x, resolve, reject);
			} else if (this.status === REJECTED) {
				// ......
			} else if (this.status === PENDING) {
				// ......
			}
		})
		return newPromise;
	}
}
function resolvePromise(newPromise, x, resolve, reject) {
    // 如果返回的 promise 对象是它本身，抛出类型错误
	if (newPromise === x) {
		reject(new TypeError("Chaining cycle detected for promise #<MyPromise>"));
	}
	if (x instanceof MyPromise) {
		x.then(resolve, reject)
	} else {
		resolve(x)
	}
}

运行一下：

const myPromiseTest = new MyPromise((resolve, reject) => {
	resolve(100)
})
const p1 = myPromiseTest.then(res => {
	console.log(res)
	return p1
})
// 执行结果
// 100
// (报错信息) Uncaught ReferenceError: Cannot access 'p1' before initialization

报错信息提示 p1 未初始化，原因在于 resolvePromise(newPromise, x, resolve, reject) 传递的参数 newPromise 此时还未初始化完成，所以这里用一个 宏任务或者微任务 来创建一个异步函数去等待 newPromise 完成初始化

代码修改：

then(onFulfilled, onRejected) {
    // 为了链式调用这里直接创建一个 MyPromise，并在后面 return 出去
    const promise = new MyPromise((resolve, reject) => {
        // 这里的内容在执行器中，会立即执行
        if (this.status === FULFILLED) {
            // 创建一个宏任务(setTimeout)等待 promise 完成初始化
            setTimeout(()=>{
                // 获取成功回调函数的执行结果
                const x = onFulfilled(this.value);
                // 传入 resolvePromise 集中处理
                resolvePromise(promise, x, resolve, reject);
            },0)
        } else if (this.status === REJECTED) {
            // ......
        } else if (this.status === PENDING) {
            // ......
        }
    })
    return promise;
}

修改后重新运行

const myPromiseTest = new MyPromise((resolve, reject) => {
	resolve(100)
})
const p1 = myPromiseTest.then(res => {
	console.log(res)
	return p1
})
// 执行结果和原生promise一致
// 100
// (报错信息) Uncaught (in promise) TypeError: Chaining cycle detected for promise #<Promise>

6、错误捕捉

捕获执行器错误

捕获执行器中的代码，如果执行器中有代码错误，那么 Promise 的状态要变为失败

constructor(executor) {
	try {
         // executor是一个执行器，进入会立即执行
		// 并传入resolve和reject方法
		executor(this.resolve, this.reject)
	} catch (error) {
		// 如果有错误，就直接执行 reject
		this.reject(error)
	}
}

测试：

const myPromiseTest = new MyPromise((resolve, reject) => {
	throw new Error('执行器错误')
})
myPromiseTest.then(res => {
	console.log(res)
},err => {
	console.log(err)
})
// 执行结果
// Error: 执行器错误

then 执行的时错误捕获

then(onFulfilled, onRejected) {
    // 为了链式调用这里直接创建一个 MyPromise，并在后面 return 出去
    const promise = new MyPromise((resolve, reject) => {
        // 这里的内容在执行器中，会立即执行
        if (this.status === FULFILLED) {
            // 创建一个宏任务(setTimeout)等待 promise 完成初始化
            setTimeout(() => {
                try {
                    // 获取成功回调函数的执行结果
                    const x = onFulfilled(this.value);
                    // 传入 resolvePromise 集中处理
                    resolvePromise(newPromise, x, resolve, reject);
                } catch (error) {
                    reject(error)
                }
            }, 0)
        } else if (this.status === REJECTED) {
            // ......
        } else if (this.status === PENDING) {
            // ......
        }
    })
    return promise;
}

测试：( 第一个then方法中的错误要在第二个then方法中捕获到 )

const myPromiseTest = new MyPromise((resolve, reject) => {
	resolve("success")
})
myPromiseTest.then(res => {
	console.log("第1个then方法返回结果===>", res)
	throw new Error('error!!!')
}, err => {
	console.log("第1个then方法返回错误信息===>", err)
}).then(res => {
	console.log("第2个then方法返回结果===>", res)
}, err => {
	console.log("第2个then方法返回错误信息===>", err)
})
// 执行结果
// 第1个then方法返回结果===> success
// 第2个then方法返回错误信息===> Error: error!!!

7、其他两个状态进行改造

根据 fulfilled 状态下的处理，对 rejected 和 pending 状态进行改造

then(onFulfilled, onRejected) {
    const newPromise = new MyPromise((resolve, reject) => {
        if (this.status === FULFILLED) {
            setTimeout(() => {
                try {
                    const x = onFulfilled(this.value);
                    resolvePromise(newPromise, x, resolve, reject);
                } catch (error) {
                    reject(error)
                }
            }, 0)
        } else if (this.status === REJECTED) {
            setTimeout(() => {
                try {
                    const x = onRejected(this.reason);
                    resolvePromise(newPromise, x, resolve, reject);
                } catch (error) {
                    reject(error)
                }
            }, 0)
        } else if (this.status === PENDING) {
            this.onFulfilledCallbacks.push(() => {
                setTimeout(() => {
                    try {
                        const x = onFulfilled(this.value);
                        resolvePromise(newPromise, x, resolve, reject);
                    } catch (error) {
                        reject(error)
                    }
                },0)
            });
            this.onRejectedCallbacks.push(() => {
                setTimeout(() => {
                    try {
                        const x = onRejected(this.reason);
                        resolvePromise(newPromise, x, resolve, reject);
                    } catch (error) {
                        reject(error)
                    }
                },0)
            });
        }
    })
    return newPromise;
}

8、then 方法参数变为可选

以上写的都是默认传入 onFulfilled、onRejected 两个回调函数，但是实际上原生 Promise 是可以选择参数的单传或者不传，都不会影响执行。

例如：

new Promise((resolve, reject) => {
  resolve("success")
}).then().then().then().then(res => console.log(res))

// 执行结果  success

then 方法改造

then(onFulfilled, onRejected) {
	// 成功函数处理 忽略函数之外的其他值
	onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value
	// 失败函数处理 忽略函数之外的其他值 抛出异常  实现catch冒泡的关键
	onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason }
	
	// 为了链式调用这里直接创建一个 MyPromise，并在后面 return 出去
	const newPromise = new MyPromise((resolve, reject) => {
		// ......
	})
}

测试：

// 验证resolve
new MyPromise((resolve, reject) => {
	resolve("resolve success")
}).then().then().then().then(res => console.log("结果===>", res))
// 执行结果 
// 结果===> resolve success

// 验证reject
new MyPromise((resolve, reject) => {
	reject("reject error")
}).then().then().then().then(res => console.log("结果===>", res), err => console.log("错误===>", err))
// 执行结果 
// 错误===> reject error

9、实现 resolve 和 reject 的静态调用

原生 promise 案例：

Promise.resolve().then(res => {
	console.log("two")
})
console.log("one")
// 执行结果
// one
// two

Promise.resolve()用于将现有对象转换为Promise对象，从而控制异步流程。

代码实现

// resolve 静态方法
static resolve(value) {
    // 如果是MyPromise 实例 则直接返回
    if (value instanceof MyPromise) return value;
    // 如果是MyPromise 实例 否则返回一个 MyPromise实例
    return new MyPromise((resolve) => resolve(value));
}
// reject 静态方法
static reject(reason) {
    // 如果是MyPromise 实例 则直接返回
    if (reason instanceof MyPromise) return reason;
    // 如果是MyPromise 实例 否则返回一个 MyPromise实例
    return new MyPromise((resolve, reject) => reject(reason));
}

10、其他静态方法

Promise.all：

Promise.all 可以将多个 Promise 实例包装成一个新的 Promise 实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被 reject 失败状态的值。Promise.all 获得的成功结果的数组里面的数据顺序和 Promise.all 接收到的数组顺序是一致的，即 p1 的结果在前，即便 p1 的结果获取的比 p2 要晚。这带来了一个绝大的好处：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all 毫无疑问可以解决这个问题。

Promise.race

顾名思义，Promse.race 就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3]) 里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。该方法返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。

总结：手写后的学习理解

let p1 = Promise.resolve(42)
p1.then((value) => {
	//第一种情况，返回一个Promise
	return new Promise(function(resolve, rejected) {
		resolve(value + 1)
	})

	//第二种情况，返回一个值
	return value + 2;

	//第三种情况，新建一个promise，使用reslove返回值
	const p2 = new Promise(function(resolve, rejected) {
		resolve(value + 3)
	})

	//第四种情况，新建一个promise，使用return返回值
	const p2 = new Promise(function(resolve, rejected) {
		return (value + 4)
	})

	//第五种情况，没有返回值
	return undefined
}).then((value) => {
	console.log(value)
})

按照学习理解：

第一种情况，新建promise的resolve传出的值将作为then方法返回的promise的resolve的值传递出，console将打印出43

第二种情况，return的值将作为then方法返回的promise的resolve的值传递出，console将打印出44

第三种情况，虽然新建了promise，但对于then方法来说，没有向它返回的promise传递返回值，console将打印出undifined

第四种情况，同第三种情况，

第五种情况，then方法没有返回值，then方法的promise的resolve的值将传递出undifined。

以上三、四、五种情况，其实都是一样的问题，构造then方法的函数没有向then方法返回的promise对象的resolve方法传递值。因此resolve返回的都是undfined

代码：手写 Promise

// 先定义三个常量表示状态
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected'

class MyPromise {
	status = PENDING; //status储存状态，初始值是 pending(等待)
	value = null; //value成功后保存成功的结果
	reason = null; //reason失败后保存失败的原因
	onFulfilledCallbacks = [];// 存储成功回调函数
	onRejectedCallbacks = [];// 存储失败回调函数

	constructor(executor) {
		try {
			// executor是一个执行器，进入会立即执行
			// 并传入resolve和reject方法
			executor(this.resolve, this.reject)
		} catch (error) {
			// 如果有错误，就直接执行 reject
			this.reject(error)
		}
	}
	
	// resolve和reject为什么要用箭头函数？
	// 如果直接调用的话，普通函数this指向的是window或者undefined
	// 用箭头函数就可以让this指向当前实例对象
	
	// 更改成功后的状态
	resolve = (value) => {
		// 只有状态是等待，才执行状态修改
		if (this.status === PENDING) {
			// 状态修改为成功
			this.status = FULFILLED;
			// 保存成功之后的值
			this.value = value;
			// ==== 新增 ====
			// resolve里面将所有成功的回调拿出来执行
			while (this.onFulfilledCallbacks.length) {
				// Array.shift() 取出数组第一个元素，然后()调用，shift不是纯函数，取出后，数组将失去该元素，直到数组为空
				this.onFulfilledCallbacks.shift()(value)
			}
		}
	}
	// 更改失败后的状态
	reject = (reason) => {
		// 只有状态是等待，才执行状态修改
		if (this.status === PENDING) {
			// 状态成功为失败
			this.status = REJECTED;
			// 保存失败后的原因
			this.reason = reason;
			// ==== 新增 ====
			// resolve里面将所有失败的回调拿出来执行
			while (this.onRejectedCallbacks.length) {
				this.onRejectedCallbacks.shift()(reason)
			}
		}
	}
	// then方法传递两个回调函数作为参数
	then(onFulfilled, onRejected) {
		// 成功函数处理 忽略函数之外的其他值
		onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value
		// 失败函数处理 忽略函数之外的其他值 抛出异常  实现catch冒泡的关键
		onRejected = typeof onRejected === 'function' ? onRejected : reason => {
			throw reason
		}

		// 为了链式调用这里直接创建一个 MyPromise，并在后面 return 出去
		const newPromise = new MyPromise((resolve, reject) => {
			// 这里的内容在执行器中，会立即执行
			if (this.status === FULFILLED) {
				// 创建一个宏任务(setTimeout)等待promise完成初始化
				setTimeout(() => {
					try {
						// 获取成功回调函数的执行结果
						const x = onFulfilled(this.value);
						// 传入 resolvePromise 集中处理
						resolvePromise(newPromise, x, resolve, reject);
					} catch (error) {
						reject(error)
					}
				}, 0)
			} else if (this.status === REJECTED) {
				setTimeout(() => {
					try {
						// 获取失败回调函数的执行结果
						const x = onRejected(this.reason);
						// 传入 resolvePromise 集中处理
						resolvePromise(newPromise, x, resolve, reject);
					} catch (error) {
						reject(error)
					}
				}, 0)
			} else if (this.status === PENDING) {
				// 因为不知道后面状态的变化情况，所以将成功回调和失败回调存储起来
				// 等到执行成功失败函数的时候再传递
				this.onFulfilledCallbacks.push(() => {
					setTimeout(() => {
						try {
							// 获取成功回调函数的执行结果
							const x = onFulfilled(this.value);
							// 传入 resolvePromise 集中处理
							resolvePromise(newPromise, x, resolve, reject);
						} catch (error) {
							reject(error)
						}
					}, 0)
				});
				this.onRejectedCallbacks.push(() => {
					setTimeout(() => {
						try {
							// 调用失败回调，并且把原因返回
							const x = onRejected(this.reason);
							// 传入 resolvePromise 集中处理
							resolvePromise(newPromise, x, resolve, reject);
						} catch (error) {
							reject(error)
						}
					}, 0)
				});
			}
		})
		return newPromise;
	}

	// resolve 静态方法
	static resolve(value) {
		// 如果是MyPromise 实例 则直接返回
		if (value instanceof MyPromise) return value;
		// 如果是MyPromise 实例 否则返回一个 MyPromise实例
		return new MyPromise((resolve) => resolve(value));
	}

	// reject 静态方法
	static reject(reason) {
		// 如果是MyPromise 实例 则直接返回
		if (reason instanceof MyPromise) return reason;
		// 如果是MyPromise 实例 否则返回一个 MyPromise实例
		return new MyPromise((resolve, reject) => reject(reason));
	}
}

function resolvePromise(newPromise, x, resolve, reject) {
    // 判断当前then回调的执行结果值是普通对象还是Promise对象
    // 如果是普通值，直接调用resolve
    // 如果是Promise对象，查看Promise对象返回的状态，根据状态决定调用resolve还是reject
	// 如果return的Promise是它自己，抛出类型错误并返回
	if (newPromise === x) {
        reject(new TypeError("Chaining cycle detected for promise #<MyPromise>"));
	}
	if (x instanceof MyPromise) {
		x.then(resolve, reject)
	} else {
		resolve(x)
	}
}

module.exports = MyPromise;

代码：去除冗余

/*
尽可能还原 Promise 中的每一个 API, 并通过注释的方式描述思路和原理.
*/

// 初始状态
const PENDING = "pending";
// 完成状态
const FULFILLED = "fulfilled";
// 失败状态
const REJECTED = "rejected";

// 异步执行方法封装
function asyncExecFun(fn) {
	setTimeout(() => fn(), 0);
}

// 执行promise resolve功能
function resolvePromise(promise, res, resolve, reject) {
	// 返回同一个promise
	if (promise === res) {
		reject(new TypeError("Chaining cycle detected for promise #<MyPromise>"));
		return;
	}
	// promise结果
	if (res instanceof MyPromise) {
		res.then(resolve, reject);
	} else {
		// 非promise结果
		resolve(res);
	}
}

/**
 * 1. 是个构造函数
 * 2. 传入一个可执行函数 函数的入参第一个为 fullFill函数 第二个为 reject函数；  函数立即执行，  参数函数异步执行
 * 3. 状态一旦更改就不可以变更  只能 pending => fulfilled 或者  pending => rejected
 * 4. then 的时候要处理入参的情况 successCallback 和failCallback 均可能为非函数
 *      默认的 failCallback 一定要将异常抛出， 这样下一个promise便可将其捕获 异常冒泡的目的
 * 5. then 中执行回调的时候要捕获异常 将其传给下一个promise
 *    如果promise状态未变更 则将回调方法添加到对应队列中
 *    如果promise状态已经变更 需要异步处理成功或者失败回调
 *    因为可能出现 回调结果和当前then返回的Promise一致 从而导致死循环问题
 * 6. catch只是then的一种特殊的写法 方便理解和使用
 * 7. finally 特点 1. 不过resolve或者reject都会执行
 *                2. 回调没有参数
 *                3. 返回一个Promise 且值可以穿透到下一个then或者catch
 * 8. Promise.resolve, Promise.reject 根据其参数返回对应的值 或者状态的Promise即可
 * 9. Proise.all 特点  1. 返回一个Promise
 *                    2. 入参是数组 resolve的情况下出参也是数组 且结果顺序和调用顺序一致
 *                    3. 所有的值或者promise都完成才能resolve 所有要计数
 *                    4. 只要有一个为reject 返回的Promise便reject
 * 10. Proise.race 特点 1. 返回一个Promise
 *                    2. 入参是数组 那么出参根据第一个成功或者失败的参数来确定
 *                    3. 只要有一个resolve 或者reject 便更改返回Promise的状态
 *
 *
 */

class MyPromise {
	status = PENDING;
	value = undefined;
	reason = undefined;
	successCallbacks = [];
	failCallbacks = [];
	constructor(exector) {
		// 立即执行传入参数
		// 参数直接写为 this.resolve  会导致函数内 this指向会发生改变
		// 异步执行状态变更
		// 捕获执行器的异常
		try {
			exector(
				(value) => asyncExecFun(() => this.resolve(value)),
				(reason) => asyncExecFun(() => this.reject(reason))
			);
		} catch (e) {
			this.reject(e)
		}
	}

	resolve(value) {
		// 如果状态已经变更则直接返回
		if (this.status !== PENDING) return;
		this.value = value;
		this.status = FULFILLED;
		// 执行所有成功回调
		while (this.successCallbacks.length) this.successCallbacks.shift()();
	}

	reject(reason) {
		// 如果状态已经变更则直接返回
		if (this.status !== PENDING) return;
		this.reason = reason;
		this.status = REJECTED;
		if (!this.failCallbacks.length) {
			throw '(in MyPromise)'
		}
		// 执行所有失败回调
		while (this.failCallbacks.length) this.failCallbacks.shift()();
	}
	then(successCallback, failCallback) {
		// 成功函数处理 忽略函数之外的其他值
		successCallback = typeof successCallback == "function" ? successCallback : (v) => v;
		// 失败函数处理 忽略函数之外的其他值 抛出异常  实现catch冒泡的关键
		failCallback = typeof failCallback == "function" ? failCallback : (reason) => {
			throw reason
		};

		let promise = new MyPromise((resolve, reject) => {
			// 统一异常处理逻辑
			const execFun = (fn, val) => {
				try {
					let res = fn(val);
					resolvePromise(promise, res, resolve, reject);
				} catch (e) {
					reject(e);
				}
			};
			// 执行成功回调
			const execSuccessCallback = () => execFun(successCallback, this.value);
			// 执行失败回调
			const execFailCallback = () => execFun(failCallback, this.reason);
			// 同步将对应成功或者失败回调事件加入对应回调队列
			if (this.status === PENDING) {
				// 将成功回调加入队列
				this.successCallbacks.push(execSuccessCallback);
				// 讲失败回调加入队列
				this.failCallbacks.push(execFailCallback);
				return;
			}
			// 延迟执行 可以将函数执行结果和当前then 返回的promise 进行比较
			asyncExecFun(() => {
				// 如果已经 fulfilled 可直接调用成功回调方法
				if (this.status === FULFILLED) {
					execSuccessCallback();
					// 如果已经 rejected 可直接调用失败回调方法
				} else if (this.status === REJECTED) {
					execFailCallback();
				}
			});
		});
		return promise;
	}

	catch (failCallback) {
		return this.then(undefined, failCallback)
	} 

	finally(callback) {
		return this.then(
			// 穿透正常值
			(value) => MyPromise.resolve(callback()).then(() => value),
			(reason) =>
			MyPromise.resolve(callback()).then(() => {
				// 穿透异常信息
				throw reason;
			})
		)
	}

	static resolve(value) {
		// 如果是MyPromise 实例 则直接返回
		if (value instanceof MyPromise) return value;
		// 如果是MyPromise 实例 否则返回一个 MyPromise实例
		return new MyPromise((resolve) => resolve(value));
	}
	static reject(reason) {
		// 如果是MyPromise 实例 则直接返回
		if (reason instanceof MyPromise) return reason;
		// 如果是MyPromise 实例 否则返回一个 MyPromise实例
		return new MyPromise((resolve, reject) => reject(reason));
	}

	// all方法
	static all(array) {
		// 存储结果
		let result = [];
		// 存储数组长度
		let len = array.length;
		// 创建返回MyPromise
		let promise = new MyPromise((resolve, reject) => {
			// 定义当前MyPromise的索引
			let index = 0;
			// 添加数据的公用方法
			function addData(key, data) {
				// 赋值
				result[key] = data;
				// 索引递增
				index++;
				// 全部执行完则resolve
				if (index == len) {
					resolve(result);
				}
			}
			// 按顺序变量数组
			for (let i = 0; i < len; i++) {
				let curr = array[i];
				// 如果是MyPromise则 按其规则处理
				if (curr instanceof MyPromise) {
					curr.then((value) => addData(i, value), reject);
				} else {
					// 非MyPromise直接赋值
					addData(i, curr);
				}
			}
		});
		// 返回新的MyPromise实例
		return promise;
	}
	// 只要有一个成功或者失败就返回
	static race(array) {
		let promise = new MyPromise((resolve, reject) => {
			for (let i = 0; i < array.length; i++) {
				let curr = array[i];
				// MyPromise实例 结果处理
				if (curr instanceof MyPromise) {
					curr.then(resolve, reject);
				} else {
					// 非MyPromise实例处理
					resolve(curr);
				}
			}
		});
		return promise;
	}
}

module.exports = MyPromise;

Evan_鹿喑

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
深入理解Promise（从功能角度解析promise源码实现）

一、什么是Promise？Promise 是异步编程的一种解决方案。从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。一般来说我们会碰到的回调嵌套都不会很多，一般就一到两级，但是某些情况下，回调嵌套很多时，代码就会非常繁琐，会给我们的编程带来很多的麻烦，这种情况俗
复制链接

扫一扫

专栏目录