前言

Promise 是ES6异步编程的一种解决方案：

  • 从语法上讲，promise是一个对象，从它可以获取异步操作的消息；
  • 从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。

promise有三种状态：

  • pending(等待)，
  • fulfiled(成功)，
  • rejected(失败);

状态一旦改变，就不会再变。
创造promise实例后，它会立即执行。

让我们一起实现一款自己的Promise，顺便还可以理解理解源码。

Let’s go

首先打开我们的编辑器，新建一个.js格式的文件。声明Padding、Fulfied、Rejected三种状态，然后创建一个Class，当然你也可以使用构造函数写。
为了方便理解，每行代码都有注释。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//Promise/A+规定的三种状态
const Padding = 'Padding' //等待
const Fulfilled = 'Fulfilled' //成功
const Rejected = 'Rejected' //拒绝

//创建一个名为 MyPromise 的类
class MyPromise {
    //写个构造器方便接受 new 的时候传进来的参数
	// 构造器	
	constructor(executor) {
        // 成功回调的队列
		this.resolveQueue = []		
		// 拒绝/失败的回调队列		             
		this.rejectQueue = []		
		// 储存当前队列的value		  
		this.currentValue = null
     }
}

一、完善构造器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
// 构造器
constructor(executor) {
	// 成功回调的队列
	this.resolveQueue = []
	// 拒绝/失败的回调队列
	this.rejectQueue = []
	// 储存当前队列的value
	this.currentValue = null
	// 判断executor是否是一个函数
	if (typeof executor !== 'function') {
		throw new Error('MyPromise is not a function')
	}
	// 修改状态为Padding
	this.status = Padding
	// 声明reslove 因为箭头函数没有自己的this, 所以这里我们需要使用箭头函数
	let _resolve = value => {
		/*
		    把resolve执行回调的操作封装成一个函数,
		    放进setTimeout里,以兼容executor是同步代码的情况,除了可以使用setTimeout,
		    我们还可以使用MutationObserver
		*/
		let run = () => {
			// 判断并修改状态
			if (this.modifyStatus(Fulfilled)) return
			// 储存当前的value
			this.currentValue = value
			// 判断成功队列是否存在值,存在则进行循环弹出，直到this.resolveQueue为空
			/*
			    这里之所以使用一个队列来储存回调,是为了实现规范要求的< then 方法可以被同一个 promise 调用多次>
			    如果使用一个变量而非队列来储存回调,那么即使多次 then()也只会执行一次回调
			*/
			while (this.resolveQueue.length) {
				// 弹出
				let callback = this.resolveQueue.shift()
				// 执行
				callback(value)
			}
		}
		// 调用
		setTimeout(run);
	}
	// 声明reject 因为箭头函数没有自己的this, 所以这里我们需要使用箭头函数
	let _reject = value => {
		/*
		    把reject执行回调的操作封装成一个函数,
		    放进setTimeout里,以兼容executor是同步代码的情况,除了可以使用setTimeout,
		    我们还可以使用MutationObserver
		*/
		let run = () => {
			// 判断并修改状态
			if (this.modifyStatus(Rejected)) return
			// 储存当前的value
			this.currentValue = value
			// 判断成功队列是否存在值,存在则进行循环弹出，直到this.rejectQueue为空
			/*
			    这里之所以使用一个队列来储存回调,是为了实现规范要求的< catch 方法可以被同一个 promise 调用多次>
			    如果使用一个变量而非队列来储存回调,那么即使多次 catch()也只会执行一次回调
			*/
			while (this.rejectQueue.length) {
				// 弹出
				let callback = this.rejectQueue.shift()
				// 执行
				callback(value)
			}
		}
		// 调用
		setTimeout(run)
	}
	// 执行
	executor(_resolve, _reject)
}

1、 then

这个是promise的重要点，除了finally、reject不需要，其他的都需要用到他的原理内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
// resolve/then/成功
then(resolvedFn, rejectedFn) {
	/*
	    根据Promise A+规范，如果 then() 接收的参数不是function，那么我们应该忽略它。
	    如果没有忽略，当then()回调不为function时将会抛出异常，导致链式调用中断
	*/
	// 判断resolvedFn是否是一个函数,不是函数则进行报错提醒
	if (resolvedFn && typeof resolvedFn !== 'function') {
		throw new Error('resolver is not a function')
	}
	// 判断rejectedFn是否是一个函数,不是函数则进行报错提醒
	if (rejectedFn && typeof rejectedFn !== 'function') {
		throw new Error('rejecter is not a function')
	}
	// 为了实现.then的链式调用，此时需要返回一个promise
	return new MyPromise((resolve, reject) => {
		/*
		    then
		*/
		//把resolvedFn重新包装一下,再push进resolve执行队列,这是为了能够获取回调的返回值进行分类讨论
		let fulfilledFn = value => {
			try {
				//执行第一个(当前的)Promise的成功回调,并获取返回值
				let x = resolvedFn(value)
				//分类讨论返回值,如果是Promise,那么等待Promise状态变更,否则直接resolve
				//这里resolve之后，就能被下一个.then()的回调获取到返回值，从而实现链式调用
				x instanceof MyPromise ? x.then(resolve, reject) : resolve(x)
			} catch (error) {
				reject(error)
			}
		}
		// 设置对列
		this.resolveQueue.push(fulfilledFn)

		/*
		    reject
		    根据设置resolvedFn的原理，设置一下rejectFn
		*/
		//把resolvedFn重新包装一下,再push进resolve执行队列,这是为了能够获取回调的返回值进行分类讨论
		let rejectFn = value => {
			try {
				//执行第一个(当前的)Promise的成功回调,并获取返回值
				let x = rejectedFn(value)
				//分类讨论返回值,如果是Promise,那么等待Promise状态变更,否则直接resolve
				//这里resolve之后，就能被下一个.then()的回调获取到返回值，从而实现链式调用
				x instanceof MyPromise ? x.then(resolve, reject) : resolve(x)
			} catch (error) {
				reject(error)
			}
		}
		// 设置对列
		this.rejectQueue.push(rejectFn)

		/*
		    处理状态为resolve/reject的情况：上边的写法是对应状态为padding的情况，
		    有些时候resolve/reject 在 then() 之前就被执行（比如Promise.resolve().then()），
		    如果这个时候还把then()回调push进resolve/reject的执行队列里，那么回调将不会被执行，
		    因此对于状态已经变为fulfilled或rejected的情况，我们直接执行then回调
		*/
		// 当前状态判断
		switch (this._status) {
			// 当状态为pending时,把resolve和reject回调push进resolve/reject执行队列,等待执行
			case Padding:
				this.resolveQueue.push(fulfilledFn)
				this.rejectQueue.push(rejectFn)
				break;
				// 当状态已经变为resolve/reject时,直接执行then回调
			case Fulfilled:
				fulfilledFn(this.currentValue)
				break;
			case Rejected:
				rejectFn(this.currentValue)
				break;
		}
	})

}

2、 catch

1
2
3
4
5
6
7
// reject/catch 失败
catch (rejectedFn) {
	// 判断是否是一个函数
	if (typeof rejectedFn === 'function') {
		return this.then(null, rejectedFn)
	}
}

3、 resolve

1
2
3
4
5
6
7
8
9
10
11
12
// resolve 
/*
    resolve(resolver)方法返回一个以给定值解析后的Promise 对象。
    如果该值为promise，返回这个promise；如果这个值是thenable（即带有"then" 方法)），
    返回的promise会“跟随”这个thenable的对象，采用它的最终状态；
    否则返回的promise将以此值完成。此函数将类promise对象的多层嵌套展平。
*/
static resolve(resolver) {
	// 根据规范, 如果参数是Promise实例, 直接return这个实例
	if (resolver instanceof MyPromise) return resolver
	return new MyPromise(resolve => resolve(resolver))
}

4、 reject

1
2
3
4
5
// reject
/* reject()方法返回一个带有拒绝原因的Promise对象。 */
static reject(reason) {
	return new MyPromise((resolve, reject) => reject(reason))
}

5、 finally

finally 无论成功失败都会返回，该方法与状态无关

1
2
3
4
5
6
7
8
9
10
11
// finally 无论成功失败都会返回-该方法与状态无关
finally(finallyFn) {
	return this.then(
		// resolve执行回调,并在then中return结果传递给后面的Promise
		value => MyPromise.resolve(callback()).then(() => value),
		// resolve执行回调,并在then中return结果传递给后面的Promise
		reason => MyPromise.resolve(callback()).then(() => {
			throw reason
		})
	)
}

6、 all

Promise.all方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“完成（resolved）
或参数中不包含 promise 时回调完成（resolve）；如果参数中 promise 有一个失败（rejected），
此实例回调失败（reject），失败原因的是第一个失败 promise 的结果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/*
       Promise.all(iterable)方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“完成（resolved）”
	或参数中不包含 promise 时回调完成（resolve）；如果参数中  promise 有一个失败（rejected），
       此实例回调失败（reject），失败原因的是第一个失败 promise 的结果。
   */
static all(promiseArr) {
	let index = 0
	let result = []
	return new MyPromise((resolve, reject) => {
		promiseArr.forEach((item, itemIndex) => {
			//resolve(item)用于处理传入的值不为Promise的情况
			MyPromise.resolve(item).then(
				val => {
					index++
					result[itemIndex] = value
					//所有then执行后, resolve结果
					if (index === promiseArr.length) {
						resolve(result)
					}
				}
				,
				//有一个Promise被reject时，MyPromise的状态变为reject
				err => reject(err)
			)
		})
	})
}

7、 race

race方法返回一个 promise，
一旦迭代器中的某个promise解决或拒绝，返回的 promise 状态为解决或拒绝。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*
    race(iterable)方法返回一个 promise，
    一旦迭代器中的某个promise解决或拒绝，返回的 promise 状态为解决或拒绝。
*/
static race(promiseArr) {
	return new MyPromise((resolve, reject) => {
		//同时执行Promise,如果有一个Promise的状态发生改变,就变更新MyPromise的状态
		for (let item of promiseArr) {
			MyPromise.resolve(item).then( //resolve(item)用于处理传入值不为Promise的情况
				value => resolve(value),
				err => reject(err)
			)
		}
	})
}

二、 关于修改状态

我这里是把修改状态单独拿出来的，代码如下：

1
2
3
4
5
6
7
8
9
10
// 修改状态
modifyStatus(status) {
	/* 
		因为状态修改过后不可重新修改,所以我们要对当前状态进行判断,不是padding状态直接return出去
		这里return 为true是因为上面通过这个做过状态校验判断
	*/
	if (this.status !== Padding) return true
	// 修改状态
	this.status = status
}

三、 完整代码

不想复制阅读的同学可以点击 -> Promise 原理/实现自己的Promise
进行下载。使用的时候就像我们日常使用Promise那样使用就OK了，只是我们需要导入这个js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
//Promise/A+规定的三种状态
const Padding = 'Padding' //等待
const Fulfilled = 'Fulfilled' //成功
const Rejected = 'Rejected' //拒绝

// 声明类
class MyPromise {
	// 构造器
	constructor(executor) {
		// 成功回调的队列
		this.resolveQueue = []
		// 拒绝/失败的回调队列
		this.rejectQueue = []
		// 储存当前队列的value
		this.currentValue = null
		// 判断executor是否是一个函数
		if (typeof executor !== 'function') {
			throw new Error('MyPromise is not a function')
		}
		// 修改状态为Padding
		this.status = Padding
		// 声明reslove 因为箭头函数没有自己的this, 所以这里我们需要使用箭头函数
		let _resolve = value => {
			/*
			    把resolve执行回调的操作封装成一个函数,
			    放进setTimeout里,以兼容executor是同步代码的情况,除了可以使用setTimeout,
			    我们还可以使用MutationObserver
			*/
			let run = () => {
				// 判断并修改状态
				if (this.modifyStatus(Fulfilled)) return
				// 储存当前的value
				this.currentValue = value
				// 判断成功队列是否存在值,存在则进行循环弹出，直到this.resolveQueue为空
				/*
				    这里之所以使用一个队列来储存回调,是为了实现规范要求的< then 方法可以被同一个 promise 调用多次>
				    如果使用一个变量而非队列来储存回调,那么即使多次 then()也只会执行一次回调
				*/
				while (this.resolveQueue.length) {
					// 弹出
					let callback = this.resolveQueue.shift()
					// 执行
					callback(value)
				}
			}
			// 调用
			setTimeout(run);
		}
		// 声明reject 因为箭头函数没有自己的this, 所以这里我们需要使用箭头函数
		let _reject = value => {
			/*
			    把reject执行回调的操作封装成一个函数,
			    放进setTimeout里,以兼容executor是同步代码的情况,除了可以使用setTimeout,
			    我们还可以使用MutationObserver
			*/
			let run = () => {
				// 判断并修改状态
				if (this.modifyStatus(Rejected)) return
				// 储存当前的value
				this.currentValue = value
				// 判断成功队列是否存在值,存在则进行循环弹出，直到this.rejectQueue为空
				/*
				    这里之所以使用一个队列来储存回调,是为了实现规范要求的< catch 方法可以被同一个 promise 调用多次>
				    如果使用一个变量而非队列来储存回调,那么即使多次 catch()也只会执行一次回调
				*/
				while (this.rejectQueue.length) {
					// 弹出
					let callback = this.rejectQueue.shift()
					// 执行
					callback(value)
				}
			}
			// 调用
			setTimeout(run)
		}
		// 执行
		executor(_resolve, _reject)
	}
	// resolve/then/成功
	then(resolvedFn, rejectedFn) {
		/*
		    根据规范，如果 then() 接收的参数不是function，那么我们应该忽略它。
		    如果没有忽略，当then()回调不为function时将会抛出异常，导致链式调用中断
		*/
		// 判断resolvedFn是否是一个函数,不是函数则进行报错提醒
		if (resolvedFn && typeof resolvedFn !== 'function') {
			throw new Error('resolver is not a function')
		}
		// 判断rejectedFn是否是一个函数,不是函数则进行报错提醒
		if (rejectedFn && typeof rejectedFn !== 'function') {
			throw new Error('rejecter is not a function')
		}
		// 为了实现.then的链式调用，此时需要返回一个promise
		return new MyPromise((resolve, reject) => {
			/*
			    then
			*/
			//把resolvedFn重新包装一下,再push进resolve执行队列,这是为了能够获取回调的返回值进行分类讨论
			let fulfilledFn = value => {
				try {
					//执行第一个(当前的)Promise的成功回调,并获取返回值
					let x = resolvedFn(value)
					//分类讨论返回值,如果是Promise,那么等待Promise状态变更,否则直接resolve
					//这里resolve之后，就能被下一个.then()的回调获取到返回值，从而实现链式调用
					x instanceof MyPromise ? x.then(resolve, reject) : resolve(x)
				} catch (error) {
					reject(error)
				}
			}
			// 设置对列
			this.resolveQueue.push(fulfilledFn)

			/*
			    reject
			    根据设置resolvedFn的原理，设置一下rejectFn
			*/
			//把resolvedFn重新包装一下,再push进resolve执行队列,这是为了能够获取回调的返回值进行分类讨论
			let rejectFn = value => {
				try {
					//执行第一个(当前的)Promise的成功回调,并获取返回值
					let x = rejectedFn(value)
					//分类讨论返回值,如果是Promise,那么等待Promise状态变更,否则直接resolve
					//这里resolve之后，就能被下一个.then()的回调获取到返回值，从而实现链式调用
					x instanceof MyPromise ? x.then(resolve, reject) : resolve(x)
				} catch (error) {
					reject(error)
				}
			}
			// 设置对列
			this.rejectQueue.push(rejectFn)

			/*
			    处理状态为resolve/reject的情况：上边的写法是对应状态为padding的情况，
			    有些时候resolve/reject 在 then() 之前就被执行（比如Promise.resolve().then()），
			    如果这个时候还把then()回调push进resolve/reject的执行队列里，那么回调将不会被执行，
			    因此对于状态已经变为fulfilled或rejected的情况，我们直接执行then回调
			*/
			// 当前状态判断
			switch (this._status) {
				// 当状态为pending时,把resolve和reject回调push进resolve/reject执行队列,等待执行
				case Padding:
					this.resolveQueue.push(fulfilledFn)
					this.rejectQueue.push(rejectFn)
					break;
					// 当状态已经变为resolve/reject时,直接执行then回调
				case Fulfilled:
					fulfilledFn(this.currentValue)
					break;
				case Rejected:
					rejectFn(this.currentValue)
					break;
			}
		})

	}
	// reject/catch 失败
	catch (rejectedFn) {
		// 判断是否是一个函数
		if (typeof rejectedFn === 'function') {
			return this.then(null, rejectedFn)
		}
	}
	// finally 无论成功失败都会返回-该方法与状态无关
	finally(finallyFn) {
		return this.then(
			// resolve执行回调,并在then中return结果传递给后面的Promise
			value => MyPromise.resolve(callback()).then(() => value),
			// resolve执行回调,并在then中return结果传递给后面的Promise
			reason => MyPromise.resolve(callback()).then(() => {
				throw reason
			})
		)
	}
	// resolve 
	/*
	    resolve(resolver)方法返回一个以给定值解析后的Promise 对象。
	    如果该值为promise，返回这个promise；如果这个值是thenable（即带有"then" 方法)），
	    返回的promise会“跟随”这个thenable的对象，采用它的最终状态；
	    否则返回的promise将以此值完成。此函数将类promise对象的多层嵌套展平。
	*/
	static resolve(resolver) {
		// 根据规范, 如果参数是Promise实例, 直接return这个实例
		if (resolver instanceof MyPromise) return resolver
		return new MyPromise(resolve => resolve(resolver))
	}
	// reject
	/* reject()方法返回一个带有拒绝原因的Promise对象。 */
	static reject(reason) {
		return new MyPromise((resolve, reject) => reject(reason))
	}
	// all
	/*
        Promise.all(iterable)方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“完成（resolved）”
		或参数中不包含 promise 时回调完成（resolve）；如果参数中  promise 有一个失败（rejected），
        此实例回调失败（reject），失败原因的是第一个失败 promise 的结果。
    */
	static all(promiseArr) {
		let index = 0
		let result = []
		return new MyPromise((resolve, reject) => {
			promiseArr.forEach((item, itemIndex) => {
				//resolve(item)用于处理传入的值不为Promise的情况
				MyPromise.resolve(item).then(
					val => {
						index++
						result[itemIndex] = value
						//所有then执行后, resolve结果
						if (index === promiseArr.length) {
							resolve(result)
						}
					}
					,
					//有一个Promise被reject时，MyPromise的状态变为reject
					err => reject(err)
				)
			})
		})
	}
	// race
	/*
	    race(iterable)方法返回一个 promise，
	    一旦迭代器中的某个promise解决或拒绝，返回的 promise 状态为解决或拒绝。
	*/
	static race(promiseArr) {
		return new MyPromise((resolve, reject) => {
			//同时执行Promise,如果有一个Promise的状态发生改变,就变更新MyPromise的状态
			for (let item of promiseArr) {
				MyPromise.resolve(item).then( //resolve(item)用于处理传入值不为Promise的情况
					value => resolve(value),
					err => reject(err)
				)
			}
		})
	}
	// 修改状态
	modifyStatus(status) {
		/* 
			因为状态修改过后不可重新修改,所以我们要对当前状态进行判断,不是padding状态直接return出去
			这里return 为true是因为上面通过这个做过状态校验判断
		*/
		if (this.status !== Padding) return true
		// 修改状态
		this.status = status
	}
}

当你看到这里的时候，相信你已经对promise的原理有了一个浅影响的了解。好了，该进行总结了。

总结

本篇文章记录的内容只记录了手写一个简易的promise过程，真正的promise并不像本篇文章记录的这么简单。但相信爱学习的你，一定能通过本篇手写promise文章进行进一步的了解原生promise，熟练的掌握原生promise的相关技术。

最后，希望本篇文章对你有所帮助！