Promise使用与原理
⏰ 约0min 0字
js
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
class MyPromise {
constructor(executor) {
try {
executor(this.resolve, this.reject)
} catch (error) {
this.reject(error)
}
}
status = PENDING
value = null
reason = null
onFulfilledCallback = []
onRejectedCallback = []
resolve = (value) => {
if (this.status == PENDING) {
this.status = FULFILLED
this.value = value
while (this.onFulfilledCallback.length) {
const cb = this.onFulfilledCallback.shift()
cb(value)
}
}
}
reject = (reason) => {
if (this.status == PENDING) {
this.status = REJECTED
this.reason = reason
while (this.onRejectedCallback.length) {
const cb = this.onRejectedCallback.shift()
cb(reason)
}
}
}
static resolve(param) {
if (param instanceof MyPromise) return param
return new MyPromise((resolve) => resolve(param))
}
static reject(param) {
if (param instanceof MyPromise) return param
return new MyPromise((resolve, reject) => reject(param))
}
then = (onFulfilled, onRejected) => {
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value
onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason }
const _promise = new MyPromise((resolve, reject) => {
if (this.status == FULFILLED) {
queueMicrotask(() => {
try {
const x = onFulfilled(this.value)
resolvePromise(_promise, x, resolve, reject)
} catch (error) {
reject(error)
}
})
} else if (this.status == REJECTED) {
queueMicrotask(() => {
try {
const x = onRejected(this.reason)
resolvePromise(_promise, x, resolve, reject)
} catch (error) {
reject(error)
}
})
} else if (this.status == PENDING) {
// 异步进行缓存回调函数
this.onFulfilledCallback.push(() => {
queueMicrotask(() => {
try {
const x = onFulfilled(this.value)
resolvePromise(_promise, x, resolve, reject)
} catch (error) {
reject(error)
}
})
})
this.onRejectedCallback.push(() => {
queueMicrotask(() => {
try {
const x = onRejected(this.reason)
resolvePromise(_promise, x, resolve, reject)
} catch (error) {
reject(error)
}
})
})
}
})
return _promise
}
}
function resolvePromise(self, x, resolve, reject) {
if (self === x) {
return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
}
if (x instanceof MyPromise) {
try {
x.then(resolve, reject)
} catch (error) {
reject(error)
}
} else {
resolve(x)
}
}
const promise = new MyPromise((resolve, reject) => {
console.log('init Promsie')
setTimeout(() => {
resolve(1)
})
})
promise
.then((v1) => {
console.log(v1)
return 2
})
.then((v2) => {
console.log(v2)
return new MyPromise((resolve) => resolve(3))
})
.then((v) => {
console.log(v)
console.log('end')
}, reason => {
console.log(reason)
})
MyPromise
.resolve(new MyPromise((resolve) => resolve('static resolve')))
.then((v) => {
console.log(v)
console.log('static')
})
MyPromise
.reject(false)
.then(null, err => console.log(err))
MyPromise.resolve().then(() => {
console.log(0);
return MyPromise.resolve(4);
}).then((res) => {
console.log(res)
})
MyPromise.resolve().then(() => {
console.log(1);
}).then(() => {
console.log(2);
}).then(() => {
console.log(3);
}).then(() => {
console.log(5);
}).then(() =>{
console.log(6);
})
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
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
//待更新...