详解 Promise
概述
Promise 是一个构造函数，用于创建一个新的 Promise 对象。该构造函数主要用于包装还没有添加 promise 支持的函数。
Promise(resolver : (resolve, reject) => void)Promise 接受一个函数resolver作为参数，包装需要执行的处理程序，当处理结果为成功时，将成功的返回值作为参数调用resolve 方法， 如果失败，则将失败原因作为参数调用reject方法。
示例
const promise = new Promise(function (resolve, reject) {
setTimeout(() => {
// do something
if (Math.random() * 10 > 5) {
resolve({ status: 'success', data: '' })
} else {
reject(new Error('error'))
}
}, 500)
})Promise状态
Promise 创建后，必然处于以下几种状态
pending: 待定状态，既没有被兑现，也没有被拒绝fulfilled: 操作成功。rejected: 操作失败。
当状态从 pending 更新为fulfilled或rejected 后，就再也不能变更为其他状态。
Promise 实例方法
.then(onFulfilled, onRejected)
then() 接收两个函数参数（也可以仅接收一个函数参数 onFulfilled）。
onFulfilled 函数参数，表示当 promise的状态从
pending更新为fulfilled时触发，并将成功的结果 value 作为onFulfilled函数的参数。onRejected 函数参数，表示当promise的状态从
pending更新为rejected时触发，并将失败的原因 reason 作为onRejected函数的参数。then() 方法返回的结果会被包装为一个新的promise实例。
.catch(onRejected)
catch() 可以相当于 .then(null, onRejected)，即仅处理当promise的状态从 pending 更新为rejected 时触发。
.finally(onFinally)
表示promise的状态无论是从pengding更新为fulfilled或rejected，当所有的 then() 和 catch() 执行完成后，最后会执行 finally() 的回调。
由于无法知道promise的最终状态，onFinally 回调函数不接收任何参数，它仅用于无论最终结果如何都要执行的情况。
promise
.then(function (res) {
console.log(res) // { status: 'success', data: '' }
})
.catch(function (reason) {
console.log(reason) // error: error
})
.finally(() => {
// do something
})链式调用
使用Promise的一个优势是，可以链式调用的方式，执行多个then()/catch()方法。 且回调函数允许我们返回任何值，返回的值将会被包装为一个 promise实例，将值传给下一个then()/catch()方法。
promise
.then((res) => {
res.data = { a: 2 }
return res
})
.then((res) => {
console.log(res) // { status: 'success', data: { a: 2 } }
throw new Error('cath error')
})
.catch((reason) => {
console.log(reason) // error: cath error
})Promise代码实现
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
const microtask = globalThis.queueMicrotask || ((cb) => setTimeout(cb, 0))
function LikePromise(resolver) {
if (typeof resolver !== 'function') {
throw new TypeError(`Promise resolver ${resolver} is not a function`)
}
this.state = PENDING
this.value = undefined
this.reason = undefined
this.fulfillQueue = []
this.rejectQueue = []
const that = this
function reject(reason) {
if (that.state === PENDING) {
that.state = REJECTED
that.reason = reason
that.rejectQueue.forEach((cb) => cb(reason))
}
}
function resolve(value) {
if (that.state === PENDING) {
that.state = FULFILLED
that.value = value
that.fulfillQueue.forEach((cb) => cb(value))
}
}
try {
resolver(resolve, reject)
} catch (e) {
reject(e)
}
}
function resolvePromise(promise, x, resolve, reject) {
if (promise === x) {
reject(new TypeError('chaining cycle'))
} else if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
let used = false
try {
const then = x.then
if (typeof then === 'function') {
then.call(
x,
(y) => {
if (used) return
used = true
resolvePromise(promise, y, resolve, reject)
},
(r) => {
if (used) return
used = true
reject(r)
},
)
} else {
if (used) return
used = true
resolve(x)
}
} catch (e) {
if (used) return
used = true
reject(e)
}
} else {
resolve(x)
}
}
LikePromise.prototype.then = function (onFulfilled, onRejected) {
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (value) => value
onRejected =
typeof onRejected === 'function'
? onRejected
: (reason) => {
throw reason
}
const that = this
const promise = new LikePromise((resolve, reject) => {
if (that.state === FULFILLED) {
microtask(() => {
try {
const x = onFulfilled(that.value)
resolvePromise(promise, x, resolve, reject)
} catch (e) {
reject(e)
}
})
} else if (that.state === REJECTED) {
microtask(() => {
try {
const x = onRejected(that.reason)
resolvePromise(promise, x, resolve, reject)
} catch (e) {
reject(e)
}
})
} else {
that.fulfillQueue.push(() => {
microtask(() => {
try {
const x = onFulfilled(that.value)
resolvePromise(promise, x, resolve, reject)
} catch (e) {
reject(e)
}
})
})
that.rejectQueue.push(() => {
microtask(() => {
try {
const x = onRejected(that.reason)
resolvePromise(promise, x, resolve, reject)
} catch (e) {
reject(e)
}
})
})
}
})
return promise
}
LikePromise.prototype.catch = function (onRejected) {
return this.then(null, onRejected)
}
LikePromise.prototype.finally = function (onFinally) {
return this.then(
(value) => LikePromise.resolve(onFinally()).then(() => value),
(reason) =>
LikePromise.resolve(onFinally()).then(() => {
throw reason
}),
)
}
LikePromise.resolve = function (value) {
return new LikePromise((resolve) => resolve(value))
}
LikePromise.reject = function (reason) {
return new LikePromise((_, reject) => reject(reason))
}Promise 静态方法
Promise.resolve(value)
返回一个状态由给定value决定的Promise对象。如果该值是thenable(即，带有then方法的对象)， 返回的Promise对象的最终状态由then方法执行决定；否则的话(该value为空，基本类型或者不带then方法的对象), 返回的Promise对象状态为fulfilled，并且将该value传递给对应的then方法。 通常而言，如果您不知道一个值是否是Promise对象，使用Promise.resolve(value) 来返回一个Promise对象, 这样就能将该value以Promise对象形式使用。
Promise.reject(reason)
返回一个状态为失败的Promise对象，并将给定的失败信息传递给对应的处理方法
Promise.all(promises)
all() 允许传入一组promise实例，并返回一个新的promise实例。
promises并发执行，并且当这组promises的最终状态均更新为fulfilled时，才触发返回的promise实例的onFulfilled， 并将这组promises的执行结果，已promises的定义顺序，以数组的形式传给onFulfilled。 如果其中某个promise的最终状态更新为rejected，则立即触发返回的promise实例的onRejected。
示例
const promises = [
Promise.resolve({ a: 1 }),
new Promise((resolve) => {
setTimeout(() => {
resolve({ b: 1 })
}, 0)
}),
]
Promise.all(promises).then((res) => {
console.log(res) // [ { a: 1}, { b: 1 } ]
})手写Promise.all 实现代码
function promiseAll(promises) {
promises = promises || []
let length = promises.length
if (length === 0) return Promise.resolve([])
let count = 0
const list = []
return new Promise((resolve, reject) => {
const resolveFn = (res, index) => {
list[index] = res
count++
if (count >= length) {
resolve(list)
}
}
promises.forEach((item, i) => {
if (item instanceof Promise) {
item.then((res) => resolveFn(res, i), reject)
} else {
resolveFn(item, i)
}
})
})
}Promise.allSettled
allSettled(promises) 允许传入一组promise实例，并返回一个新的promise对象。
当这组promises的状态从pending 都更新到最终状态、无论最终状态是 fulfilled 或rejected时，触发返回的promise的onfulfilled。
onfulfilled 回调函数，根据promises定义的顺序，将执行结果以 { status: string, [value|reason]: any }[] 的形式作为参数传入。
示例
const promises = [Promise.resolve({ a: 1 }), Promise.reject('reason')]
Promise.allSettled(promises).then((res) => {
console.log(res) // [ { status: 'fulfilled’, value: { a: 1 } }, { status: 'rejected', reason: 'reason' } ]
})手写Promise.allSettled 实现代码
function promiseAllSettled(promises) {
promises = promises || []
let length = promises.length
if (length === 0) return Promise.resolve([])
let count = 0
const list = []
return new Promise((resolve) => {
const resolveFn = (res, index, status) => {
list[index] = { status }
if (status === 'fulfilled') {
list[index].value = res
} else {
list[index].reason = res
}
count++
if (count >= length) {
resolve(list)
}
}
promises.forEach((item, i) => {
if (item instanceof Promise) {
item.then(
(res) => resolveFn(res, i, 'fulfilled'),
(reason) => resolveFn(reason, i, 'rejected'),
)
} else {
resolveFn(item, i, 'fulfilled')
}
})
})
}Promise.race
Promise.race(promises) 接收一组promise实例作为参数，并返回一个新的promise对象。
当这组promises中的任意一个promise的状态从pending更新为fulfilled或rejected时，返回的promise对象将会把该promise的成功返回值或者失败原因 作为参数调用返回的promise的onFulfilled或onRejected
示例
const promises = [
new Promise((resolve) => {
setTimeout(() => {
resolve('timeout')
}, 500)
}),
Promise.resolve('resolve'),
]
Promise.race(promises).then((res) => {
console.log(res) // resolve
})手写Promise.race 实现代码
function promiseRace(array) {
array = array || []
return new Promise((resolve, reject) => {
array.forEach((item) => {
if (item instanceof Promise) {
item.then(resolve, reject)
} else {
resolve(item)
}
})
})
}