Promise 是 ES6 新增的语法，解决了回调地狱的问题。
一般 Promise 在执行过程中，必然会处于以下几种状态之一。
· 待定（pending）：初始状态，既没有被完成，也没有被拒绝。
· 已完成（fulfilled）：操作成功完成。
· 已拒绝（rejected）：操作失败。
实例：then catch finally
静态：all race resolve reject
· resolve：将其他数据类型转为 Promise 并将状态改为成功态
· reject：将其他数据类型转为 Promise 并将状态改为失败态
· all：参数所有返回结果为成功才返回
· allSettled: 参数不论返回结果是否成功，都返回每个参数执行状态
· any: 参数中只要有一个成功，就返回该成功的执行结果
· race：参数数组中所有 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
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
| const PENDING = 'pending' // 声明一个常量PENDING，表示Promise的初始状态
const FULFILLED = 'fulfilled' // 声明一个常量FULFILLED，表示Promise的成功状态
const REJECTED = 'rejected' // 声明一个常量REJECTED，表示Promise的失败状态
class MyPromise {
constructor(executor) {
this.state = PENDING // 初始化Promise的状态为PENDING
this.value = undefined // 初始化Promise的值为undefined
this.reason = undefined // 初始化Promise的失败原因为undefined
this.onFulfilledCallbacks = [] // 存储Promise成功状态下的回调函数
this.onRejectedCallbacks = [] // 存储Promise失败状态下的回调函数
// 定义resolve函数，用于将Promise状态改为FULFILLED，并执行成功状态下的回调函数
const resolve = (value) => {
if (this.state = PENDING) {
this.state = FULFILLED // 将Promise状态改为FULFILLED
this.value = value // 存储Promise成功时的值
this.onFulfilledCallbacks.forEach(fn => fn()) // 执行所有成功状态下的回调函数
}
}
// 定义reject函数，用于将Promise状态改为REJECTED，并执行失败状态下的回调函数
const reject = (reason) => {
if (this.state === PENDING) {
this.state = REJECTED // 将Promise状态改为REJECTED
this.reason = reason // 存储Promise失败时的原因
this.onRejectedCallbacks.forEach(fn => fn()) // 执行所有失败状态下的回调函数
}
}
try {
executor(resolve, reject) // 执行executor函数，并传入resolve和reject参数
} catch (err) {
reject(err) // 捕获错误，并将Promise状态改为REJECTED
}
}
// 静态方法resolve，返回一个状态为FULFILLED的Promise实例
static resolve(value) {
return new MyPromise((resolve, reject) => {
resolve(value)
})
}
// 静态方法reject，返回一个状态为REJECTED的Promise实例
static reject(reason) {
return new MyPromise((resolve, reject) => {
reject(reason)
})
}
// 静态方法all，接收一个包含多个Promise实例的数组，返回一个新的Promise实例
static all(promises) {
return new Promise((resolve, reject) => {
if (promises.length === 0) {
resolve([]) // 如果传入的数组为空，则直接返回一个状态为FULFILLED的Promise实例
} else {
let result = [] // 存储每个Promise实例的执行结果
let count = 0 // 计数器
for (let i = 0;i < promises.length; i++) {
promises[i].then(
data => {
result[i] = data // 将每个Promise实例的执行结果存入result数组中
count++
if (count === promises.length) {
resolve(result) // 当所有Promise实例都执行完毕时，返回包含所有结果的新的Promise实例
}
},
err => {
// 如果其中一个Promise实例执行失败，则将新的Promise实例的状态改为REJECTED，并返回失败原因
reject(err)
return
}
)
}
}
})
}
// 静态方法race，接收一个包含多个Promise实例的数组，返回一个新的Promise实例
static race(promises) {
return new Promise((resolve, reject) => {
if (promises.length === 0) {
resolve() // 如果传入的数组为空，则直接返回一个状态为FULFILLED的Promise实例
} else {
for (let i = 0; i < promises.length; i++) {
promises[i].then(
data => {
resolve(data) // 返回第一个执行完毕的Promise实例的结果
},
(err) => {
// 如果其中一个Promise实例执行失败，则将新的Promise实例的状态改为REJECTED，并返回失败原因
reject(err)
return
}
)
}
}
})
}
// then方法，用于在Promise的成功和失败状态下执行回调函数，返回一个新的Promise实例
then(onFulfilled, onRejected) {
// 如果onFulfilled不是一个函数，则将其更改为返回接收到的值的函数
if (typeof onFulfilled !== 'function') {
onFulfilled = function (value) {
return value
}
}
// 如果onRejected不是一个函数，则将其更改为抛出接收到的原因的函数
if (typeof onRejected !== 'function') {
onRejected = function (reason) {
throw reason
}
}
let promise2 = new MyPromise((resolve, reject) => {
switch (this.state) {
// 如果Promise当前的状态是PENDING，则将回调函数添加到对应的回调数组中
case PENDING:
this.onFulfilledCallbacks.push(() => {
setTimeout(() => {
try {
const value = onFulfilled(this.value)
if (value instanceof MyPromise) {
value.then(resolve, reject)
} else {
resolve(value)
}
} catch (err) {
reject(err)
}
}, 0)
})
this.onRejectedCallbacks.push(() => {
setTimeout(() => {
try {
const value = onRejected(this.reason)
resolve(value)
} catch (err) {
reject(err)
}
}, 0)
})
break
// 如果Promise当前的状态是FULFILLED，则直接执行成功回调函数
case FULFILLED:
setTimeout(() => {
try {
const value = onFulfilled(this.value)
resolve(value)
} catch (err) {
reject(err)
}
}, 0)
break
// 如果Promise当前的状态是REJECTED，则直接执行失败回调函数
case REJECTED:
setTimeout(() => {
try {
const value = onRejected(this.reason)
resolve(value)
} catch (err) {
reject(err)
}
}, 0)
break
}
})
return promise2
}
// catch方法，用于捕获Promise的失败状态，并执行回调函数
catch(onRejected) {
return this.then(null, onRejected)
}
// finally方法，无论Promise状态是成功还是失败，都会执行回调函数
finally(fn) {
return this.then(
(value) => {
fn()
return value
},
(reason) => {
fn()
throw reason
}
)
}
}
|