手写 promise

心血来潮想手写一下 promise, 浅浅用 js 试一下.

什么是 promise

这部分可以查看 promise a+规范内容, 英文, 非官方中文翻译

也可以想一下平时是怎么使用 promise 的

console.log('start')
const p = new Promise((resolve, reject) => {
  console.log('promise')
  resolve(1)
})
console.log('end')

Promise 的构造函数需要一个函数, 这个函数接受两个函数作为参数, resolve 会将这个 Promise 标记成完成态, 并设置值; reject 会标记成拒绝态, 并设置原因. 可以写出下面这个东西.

初步实现 promise

执行上面的代码, 应该会从上往下打印出来. 说明传进去的函数是同步执行的. 可以写出这样的类.

const FULFILLED = 'fulfilled'
const PENDING = 'pending'
const REJECTED = 'rejected'
class MyPromise {
  #state
  #value
  #setState(state, val) {
    // a+规范中要求fulfilled和reject状态不可改变
    if (this.#state !== PENDING)
      return
    this.#state = state
    this.#value = val
  }

  constructor(executor) {
    const resolve = (val) => {
      this.#setState(FULFILLED, val)
    }
    const reject = (val) => {
      this.#setState(REJECTED, val)
    }
    try {
      executor(resolve, reject)
    }
    catch (error) {
      reject(error)
    }
  }
}

还有一个.then 方法. .then 方法接受两个函数, 一个是完成时执行, 一个是拒绝时执行, .then 本身会返回一个 promise .

这个 then 返回的 promise（记作 p1）在 promise a+规范里有要求：

如果 onFulfilled 或者 onRejected 返回一个值 x, 那 p1 应该 resolve 这个 x
如果 onFulfilled 或者 onRejected 抛出一个异常 err, 那 p1 应该 reject 这个 err

const FULFILLED = 'fulfilled'
const PENDING = 'pending'
const REJECTED = 'rejected'
class MyPromise {
  #state
  #value
  #setState(state, val) {
    // a+规范中要求fulfilled和reject状态不可改变
    if (this.#state !== PENDING)
      return
    this.#state = state
    this.#value = val
  }

  constructor(executor) {
    // 初始为pending状态
    this.#state = PENDING
    const resolve = (val) => {
      this.#setState(FULFILLED, val)
    }
    const reject = (val) => {
      this.#setState(REJECTED, val)
    }
    try {
      executor(resolve, reject)
    }
    catch (error) {
      reject(error)
    }
  }

  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      const callback
				= this.#state === FULFILLED ? onFulfilled : onRejected
      try {
        const res = callback(this.#value)
        resolve(res)
      }
      catch (error) {
        reject(error)
      }
    })
  }
}

可以简单测试一下现在的 MyPromise, 应该有一点简单的功能了.

const p = new MyPromise((resolve, reject) => {
  resolve(1) // 也可以试一下reject
})

p.then(
  (res) => {
    console.log(1)
  },
  (err) => {
    console.log('err', err)
  }
)

如果是 resolve 的话应该会打印出 1, reject 会打印出 err 1. 可以试试把 MyPromise 改成 Promise, 应该是一样的.

不过其实有点问题, 这里的 executor 是同步的, 如果是异步的就不行了.

const p = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(1)
  }, 500)
})

p.then(
  (res) => {
    console.log(1)
  },
  (err) => {
    console.log('err', err)
  }
)

会发现打印出了err undefined, 这是因为执行.then 的时候, 状态还是 pending, #value 是 undefined, 直接进入了 onRejected 里了.

可以把 callback 执行的时机改一下, 改在 #setState 里执行. 只需要先将函数存起来就可以了.

// 这三行不写了
class MyPromise {
  #state
  #value
  #handle // 用来存要执行的函数
  #setState(state, val) {
    // a+规范中要求fulfilled和reject状态不可改变
    if (this.#state !== PENDING)
      return
    this.#state = state
    this.#value = val
    this.#handle()
  }

  constructor(executor) {
    // 初始为pending状态
    this.#state = PENDING
    this.#handle = () => {}
    const resolve = (val) => {
      this.#setState(FULFILLED, val)
    }
    const reject = (val) => {
      this.#setState(REJECTED, val)
    }
    try {
      executor(resolve, reject)
    }
    catch (error) {
      reject(error)
    }
  }

  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      this.#handle = () => {
        const callback
					= this.#state === FULFILLED ? onFulfilled : onRejected
        try {
          const res = callback(this.#value)
          resolve(res)
        }
        catch (error) {
          reject(error)
        }
      }
      // 如果已经完成了, 就立刻执行
      if (this.#state !== PENDING) {
        this.#handle()
      }
    })
  }
}

这样的话, 再执行一次应该就可以正确的打印出 1 了.

不知道大家有没有对一个 promise 用多个.then, 我也是看资料才发现, 平时没用过.

const p = new MyPromise((resolve, reject) => {
  resolve(1)
})

p.then(
  (res) => {
    console.log('第一个then', 1)
  },
  (err) => {
    console.log('err', err)
  }
)

p.then(
  (res) => {
    console.log('第二个then', 1)
  },
  (err) => {
    console.log('err', err)
  }
)

执行上面的代码, 会发现只打印出第二个 then 1, 但是如果使用 Promise 的话应该两个都会打印. 这是因为第二个 then 的时候把#handle 覆盖掉了, 应该用一个数组来存回调函数.

class MyPromise {
  #state
  #value
  #handlers = [] // 存在一个数组里
  #setState(state, val) {
    // a+规范中要求fulfilled和reject状态不可改变
    if (this.#state !== PENDING)
      return
    this.#state = state
    this.#value = val
    this.#runTask()
  }

  // 执行任务
  #runTask() {
    for (const handler of this.#handlers) {
      handler()
    }
    this.#handlers = []
  }

  constructor(executor) {
    // 初始为pending状态
    this.#state = PENDING
    this.#handlers = []
    const resolve = (val) => {
      this.#setState(FULFILLED, val)
    }
    const reject = (val) => {
      this.#setState(REJECTED, val)
    }
    executor(resolve, reject)
  }

  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      this.#handlers.push(() => {
        const callback
					= this.#state === FULFILLED ? onFulfilled : onRejected
        try {
          const res = callback(this.#value)
          resolve(res)
        }
        catch (error) {
          reject(error)
        }
      })
      // 如果已经完成了, 就立刻执行
      if (this.#state !== PENDING) {
        this.#runTask()
      }
    })
  }
}

这里把 handler 的执行写在一个函数里了. 现在再运行一次应该就两个都能打印了.

异步执行任务

可以执行下面的代码

const p = new MyPromise((resolve, reject) => {
  resolve(1)
})

p.then(
  (res) => {
    console.log(1)
  },
  (err) => {
    console.log('err', err)
  }
)
console.log('end')

应该会发现先打印了 1, 然后打印 end. 但是如果换成 Promise 的话, 应该会先打印 end, 再打印 1.

js 有一个任务队列的机制, 它有微队列（一般 promise 会放在这）和一些其它队列( setTimeout, setInterval 之类的) , 在同步代码执行完毕后, js 会从任务队列里取任务, 微队列优先级最高.

在这里应该要把 handlers 里面的函数放在微队列里面执行.

#runTask() {
    queueMicrotask(()=>{
        for (const handler of this.#handlers) {
            handler();
        }
        this.#handlers = [];
    })
}

有一点点兼容性问题, 如果要做的完美的话, 可以这样写:

function runMicroTask(fn) {
  if (typeof queueMicrotask === 'function') {
    queueMicrotask(fn)
  }
  else if (
    typeof process === 'object'
    && typeof process?.nextTick === 'function'
  ) {
    process.nextTick(fn)
  }
  else if (typeof MutationObserver === 'function') {
    const text = document.createTextNode('')
    const observer = new MutationObserver(fn)
    observer.observe(text, {
      characterData: true,
    })
    text.data = '1'
  }
  else {
    setTimeout(fn)
  }
}

这样的话就尽可能地包括了大部分场景了.

再次执行代码, 应该会先打印出 end, 再打印出 1.

.then 的一些细节

onFulfilled 和 onRejected 不是函数的情况

可以试着执行下面的代码

const p = new MyPromise((resolve, reject) => {
  resolve(1)
})

p.then().then((res) => {
  console.log(res)
})

const p1 = new MyPromise((resolve, reject) => {
  reject(2)
})

p1.then().then(undefined, (err) => {
  console.log(err)
})

没意外的话会报错 callback is not a function. 如果换成 Promise 的话应该会正确打印出来. 这是因为现在还没有处理 onFulfilled 或者 onRejected 没传或者不为函数的情况. 下面 promise a+规范说的

记一开始的 promise 为 p, .then 返回的 promise 是 p1

如果 onFulfilled 不是函数（没有传入或传的不是函数）, 且 p 已经完成, 那 p1 应该 resolve p 的值
如果 onRejected 不是函数, 且 p 拒绝了, 那 p1 应该 reject p 的值

修改后:

then(onFulfilled, onReject) {
	return new MyPromise((resolve, reject) => {
		this.#handlers.push(() => {
			const callback =
				this.#state === FULFILLED ? onFulfilled : onReject;
			try {
                // 判断callback是不是函数
                if(typeof callback === 'function') {
                    const res = callback(this.#value);
                    resolve(res);
                } else {
                    // 不是就跟原本的promise保持相同状态, 并给出相同的值
                    this.#state === FULFILLED ? resolve(this.#value) : reject(this.#value)
                }
			} catch (error) {
				reject(error);
			}
		});
		// 如果已经完成了, 就立刻执行
		if (this.#state !== PENDING) {
			this.#runTask();
		}
	});
}

现在再执行代码的话, 应该能正确打印.

promise 的处理

继续阅读规范的话, 会发现, 如果 resolve 的东西 x 是一个 promise 或者像 promise 的东西（thenable）, 就会采用它的状态和值.

这个 thenable 是一个有 then 方法的对象或者函数, 这样子就算返回自定义的 promise 还是 Promise 都有一个统一的行为.

x 为 pending promise 会保持 pending 直到 x 不为 pending
x 为 fulfilled 使用 x resolve 的值 resolve 出去
x 为 rejected 使用 x reject 的值 reject 出去

比如下面这个代码

const p = new MyPromise((resolve, reject) => {
  resolve(
    new Promise((resolve, reject) => {
      resolve(1)
    })
  )
})

p.then(console.log)

const p1 = new Promise((resolve, reject) => {
  resolve(
    new Promise((resolve, reject) => {
      resolve(1)
    })
  )
})

p1.then(console.log)

使用 MyPromise 会打印出 Promise {1} ; Promise 会打印出 1. Promise A+规范要求如果 resolve 的是一个 promise, 应该进行解析

// 类外
function isPromiseLike(obj) {
	return typeof obj?.then === 'function';
}

// 类内
#resolvePromise(x) {
	if (x === this) {
		this.#setState(REJECTED, new Error('TypeError'));
		return;
	}
	if (x instanceof Promise) {
		x.then(
			(res) => {
				this.#setState(FULFILLED, res);
			},
			(err) => {
				this.#setState(REJECTED, err);
			}
		);
		return;
	}
	if (isPromiseLike(x)) {
        // 这一部分基本照着规范写的, 规范里判断了then是不是函数, 我这里isPromiseLike已经判断过就不写了.
		let hasCalled = false;
		try {
			x.then(
				(y) => {
					if (hasCalled) return;
					this.#resolvePromise(y);
					hasCalled = true;
				},
				(r) => {
					if (hasCalled) return;
					this.#setState(REJECTED, r);
					hasCalled = true;
				}
			);
		} catch (error) {
			if (hasCalled) return;
			this.#setState(REJECTED, error);
		}
		return;
	}
	this.#setState(FULFILLED, x);
}

再执行一次代码, 这时候应该都是打印出 1 了.

.catch 方法和.finally 方法

这两个方法 promise a+里没有给出, 可以查看 MDN 的文档, 在这里

.catch

文档里说等效于.then(undefined, onRejected)

catch(onReject) {
	return this.then(undefined, onReject);
}

.finally

文档里说.finally(onFinally)跟.then(onFinally, onFinally)类似, 不过 onFinally 不接收任何参数, finally 也不会改变原始 promise 的状态. 比如说

const p = new Promise((resolve, reject) => {
  // reject(1)
  resolve(1)
})
  .then(
    () => 2,
    () => 2
  )
  .then(console.log)

const p1 = new Promise((resolve, reject) => {
  resolve(1)
})
  .finally(() => 2)
  .then(console.log)

上面那个会打印出 2, 下面那个会打印出 1.

finally(onFinally) {
	return this.then(
		(res) => {
			onFinally();
			return res;
		},
		(err) => {
			onFinally();
            throw err;
		}
	);
}

到这里 MyPromise 应该已经完成 Promise A+的大部分要求了, 我也不太清楚.

目前为止的完整代码

目前为止的完整 MyPromise

const FULFILLED = 'fulfilled'
const PENDING = 'pending'
const REJECTED = 'rejected'

function runMicroTask(fn) {
  if (typeof queueMicrotask === 'function') {
    queueMicrotask(fn)
  }
  else if (
    typeof process === 'object'
    && typeof process?.nextTick === 'function'
  ) {
    process.nextTick(fn)
  }
  else if (typeof MutationObserver === 'function') {
    const text = document.createTextNode('')
    const observer = new MutationObserver(fn)
    observer.observe(text, {
      characterData: true,
    })
    text.data = '1'
  }
  else {
    setTimeout(fn)
  }
}

function isPromiseLike(obj) {
  return typeof obj?.then === 'function'
}

class MyPromise {
  #state
  #value
  #handlers = []
  constructor(executor) {
    // 初始为pending状态
    this.#state = PENDING
    this.#handlers = []
    const resolve = (val) => {
      this.#resolvePromise(val)
    }
    const reject = (val) => {
      this.#setState(REJECTED, val)
    }
    try {
      executor(resolve, reject)
    }
    catch (error) {
      reject(error)
    }
  }

  #resolvePromise(x) {
    if (x === this) {
      this.#setState(REJECTED, new Error('TypeError'))
      return
    }
    if (x instanceof Promise) {
      x.then(
        (res) => {
          this.#setState(FULFILLED, res)
        },
        (err) => {
          this.#setState(REJECTED, err)
        }
      )
      return
    }
    if (isPromiseLike(x)) {
      let hasCalled = false
      try {
        x.then(
          (y) => {
            if (hasCalled)
              return
            this.#resolvePromise(y)
            hasCalled = true
          },
          (r) => {
            if (hasCalled)
              return
            this.#setState(REJECTED, r)
            hasCalled = true
          }
        )
      }
      catch (error) {
        if (hasCalled)
          return
        this.#setState(REJECTED, error)
      }
      return
    }
    this.#setState(FULFILLED, x)
  }

  #setState(state, val) {
    // a+规范中要求fulfilled和reject状态不可改变
    if (this.#state !== PENDING)
      return
    this.#state = state
    this.#value = val
    this.#runTask()
  }

  #runTask() {
    runMicroTask(() => {
      for (const handler of this.#handlers) {
        handler()
      }
      this.#handlers = []
    })
  }

  then(onFulfilled, onReject) {
    return new MyPromise((resolve, reject) => {
      this.#handlers.push(() => {
        const callback
					= this.#state === FULFILLED ? onFulfilled : onReject
        try {
          if (typeof callback === 'function') {
            const res = callback(this.#value)
            resolve(res)
          }
          else {
            this.#state === FULFILLED
              ? resolve(this.#value)
              : reject(this.#value)
          }
        }
        catch (error) {
          reject(error)
        }
      })
      // 如果已经完成了, 就立刻执行
      if (this.#state !== PENDING) {
        this.#runTask()
      }
    })
  }

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

  finally(onFinally) {
    return this.then(
      (res) => {
        onFinally()
        return res
      },
      (err) => {
        onFinally()
        throw err
      }
    )
  }
}

静态方法

resolve

查阅 MDN, 有这样的话

如果参数 x 是 Promise, 那直接返回
如果参数 x 是 thenable, 那调用 then 函数和两个回调函数
如果都不是, 那返回一个 resolve x 的 Promise

static resolve(x) {
	if (x instanceof Promise) {
		return x;
	}
	if (isPromiseLike(x)) {
		return new MyPromise((resolve, reject) => {
			x.then(resolve, reject);
		});
	}
	return new MyPromise((resolve, reject) => {
		resolve(x);
	});
}

reject

返回一个已被拒绝的对象

static reject(x) {
	return new MyPromise((resolve, reject) => {
		reject(x);
	});
}

try

接受一个回调函数和任意个参数

static try(fn, ...args) {
	return new MyPromise((resolve, reject) => {
		try {
			resolve(fn(...args));
		} catch (err) {
			reject(err);
		}
	});
}

all

接受一个 Promise 可迭代对象, 返回一个 Promise, 记作 result. 当所有 Promise 完成时, result 才完成, resolve 其它 Promise resolve 出来的值数组. 有一个失败直接 reject.

先判断一下可迭代对象

function isIterable(obj) {
  return (
    obj !== null
    && obj !== undefined
    && typeof obj[Symbol.iterator] === 'function'
  )
}

下面是 all

static all(promises) {
	if (!isIterable(promises)) {
		throw new Error('TypeError');
	}
	return new MyPromise((resolve, reject) => {
		const arr = Array.from(promises);
		if (arr.length === 0) {
			resolve([]);
		}
		const result = new Array(arr.length);
		let i = 0;
		arr.forEach((p, index) => {
			MyPromise.resolve(p).then((res) => {
				result[index] = res;
				i++;
				if (i === arr.length) {
					resolve(result);
				}
			}, reject);
		});
	});
}

allSettled

跟 all 方法类似, 不同的是即使有一个失败了也会执行全部

static allSettled(promises) {
	if (!isIterable(promises)) {
		throw new Error('TypeError');
	}
	return new MyPromise((resolve, reject) => {
		const arr = Array.from(promises);
		if (arr.length === 0) {
			resolve([]);
		}
		const result = new Array(arr.length);
		let i = 0;
		arr.forEach((p, index) => {
			MyPromise.resolve(p)
				.then(
					(res) => {
						result[index] = {
							value: res,
							status: FULFILLED,
						};
					},
					(err) => {
						result[index] = {
							reason: err,
							status: REJECTED,
						};
					}
				)
				.finally(() => {
					i++;
					if (i === arr.length) {
						resolve(result);
					}
				});
		});
	});
}

any

同样是输入一个 Promise 可迭代对象, 不过这个只要有一个 resolve 了, 直接 resolve; 全部都 reject 的话, reject 一个错误原因数组.

static any(promises) {
	if (!isIterable(promises)) {
		throw new Error('TypeError');
	}
	return new MyPromise((resolve, reject) => {
		const arr = Array.from(promises);
		if (arr.length === 0) {
			resolve([]);
		}
		const result = new Array(arr.length);
			let i = 0;
		arr.forEach((p, index) => {
			MyPromise.resolve(p).then(resolve, (err) => {
				i++;
				result[index] = err;
				if (i === arr.length) {
					reject(result);
				}
			});
		});
	});
}

race

接受一个 Promise 可迭代对象, resolve/reject 最快完成或拒绝的 Promise

static race(promises) {
	if (!isIterable(promises)) {
		throw new Error('TypeError');
	}
	return new MyPromise((resolve, reject) => {
		for (const p of promises) {
			MyPromise.resolve(p).then(resolve, reject);
		}
	});
}

withResolvers

static withResolvers() {
    let resolve, reject;
    const promise = new MyPromise((res, rej)=>{
        resolve = res;
        reject = rej;
    })
    return {
        promise,
        resolve,
        reject,
    }
}

写到这里, 应该所有的静态方法都实现了. 如果能写好 promise 的话这个应该不难. 我这里的实现跟实际实现应该会有一些甚至很大的区别, 功能可能也许相差不大, 我不太确定.

完整的 MyPromise

完整代码

const FULFILLED = 'fulfilled'
const PENDING = 'pending'
const REJECTED = 'rejected'

function runMicroTask(fn) {
  if (typeof queueMicrotask === 'function') {
    queueMicrotask(fn)
  }
  else if (
    typeof process === 'object'
    && typeof process?.nextTick === 'function'
  ) {
    process.nextTick(fn)
  }
  else if (typeof MutationObserver === 'function') {
    const text = document.createTextNode('')
    const observer = new MutationObserver(fn)
    observer.observe(text, {
      characterData: true,
    })
    text.data = '1'
  }
  else {
    setTimeout(fn)
  }
}

function isPromiseLike(obj) {
  return typeof obj?.then === 'function'
}

function isIterable(obj) {
  return (
    obj !== null
    && obj !== undefined
    && typeof obj[Symbol.iterator] === 'function'
  )
}

class MyPromise {
  #state
  #value
  #handlers = []
  constructor(executor) {
    // 初始为pending状态
    this.#state = PENDING
    this.#handlers = []
    const resolve = (val) => {
      this.#resolvePromise(val)
    }
    const reject = (val) => {
      this.#setState(REJECTED, val)
    }
    try {
      executor(resolve, reject)
    }
    catch (error) {
      reject(error)
    }
  }

  #resolvePromise(x) {
    if (x === this) {
      this.#setState(REJECTED, new Error('TypeError'))
      return
    }
    if (x instanceof Promise) {
      x.then(
        (res) => {
          this.#setState(FULFILLED, res)
        },
        (err) => {
          this.#setState(REJECTED, err)
        }
      )
      return
    }
    if (isPromiseLike(x)) {
      let hasCalled = false
      try {
        x.then(
          (y) => {
            if (hasCalled)
              return
            this.#resolvePromise(y)
            hasCalled = true
          },
          (r) => {
            if (hasCalled)
              return
            this.#setState(REJECTED, r)
            hasCalled = true
          }
        )
      }
      catch (error) {
        if (hasCalled)
          return
        this.#setState(REJECTED, error)
      }
      return
    }
    this.#setState(FULFILLED, x)
  }

  #setState(state, val) {
    // a+规范中要求fulfilled和reject状态不可改变
    if (this.#state !== PENDING)
      return
    this.#state = state
    this.#value = val
    this.#runTask()
  }

  #runTask() {
    runMicroTask(() => {
      for (const handler of this.#handlers) {
        handler()
      }
      this.#handlers = []
    })
  }

  then(onFulfilled, onReject) {
    return new MyPromise((resolve, reject) => {
      this.#handlers.push(() => {
        const callback
					= this.#state === FULFILLED ? onFulfilled : onReject
        try {
          if (typeof callback === 'function') {
            const res = callback(this.#value)
            resolve(res)
          }
          else {
            this.#state === FULFILLED
              ? resolve(this.#value)
              : reject(this.#value)
          }
        }
        catch (error) {
          reject(error)
        }
      })
      // 如果已经完成了, 就立刻执行
      if (this.#state !== PENDING) {
        this.#runTask()
      }
    })
  }

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

  finally(onFinally) {
    return this.then(
      (res) => {
        onFinally()
        return res
      },
      (err) => {
        onFinally()
        throw err
      }
    )
  }

  static resolve(x) {
    if (x instanceof MyPromise) {
      return x
    }
    if (isPromiseLike(x)) {
      return new MyPromise((resolve, reject) => {
        x.then(resolve, reject)
      })
    }
    return new MyPromise((resolve, reject) => {
      resolve(x)
    })
  }

  static reject(x) {
    return new MyPromise((resolve, reject) => {
      reject(x)
    })
  }

  static try(fn, ...args) {
    return new MyPromise((resolve, reject) => {
      try {
        resolve(fn(...args))
      }
      catch (err) {
        reject(err)
      }
    })
  }

  static all(promises) {
    if (!isIterable(promises)) {
      throw new Error('TypeError')
    }
    return new MyPromise((resolve, reject) => {
      const arr = Array.from(promises)
      if (arr.length === 0) {
        resolve([])
      }
      const result = Array.from({ length: arr.length })
      let i = 0
      arr.forEach((p, index) => {
        MyPromise.resolve(p).then((res) => {
          result[index] = res
          i++
          if (i === arr.length) {
            resolve(result)
          }
        }, reject)
      })
    })
  }

  static allSettled(promises) {
    if (!isIterable(promises)) {
      throw new Error('TypeError')
    }
    return new MyPromise((resolve, reject) => {
      const arr = Array.from(promises)
      if (arr.length === 0) {
        resolve([])
      }
      const result = Array.from({ length: arr.length })
      let i = 0
      arr.forEach((p, index) => {
        MyPromise.resolve(p)
          .then(
            (res) => {
              result[index] = {
                value: res,
                status: FULFILLED,
              }
            },
            (err) => {
              result[index] = {
                reason: err,
                status: REJECTED,
              }
            }
          )
          .finally(() => {
            i++
            if (i === arr.length) {
              resolve(result)
            }
          })
      })
    })
  }

  static any(promises) {
    if (!isIterable(promises)) {
      throw new Error('TypeError')
    }
    return new MyPromise((resolve, reject) => {
      const arr = Array.from(promises)
      if (arr.length === 0) {
        reject([])
      }
      const result = Array.from({ length: arr.length })
      let i = 0
      arr.forEach((p, index) => {
        MyPromise.resolve(p).then(resolve, (err) => {
          i++
          result[index] = err
          if (i === arr.length) {
            reject(result)
          }
        })
      })
    })
  }

  static race(promises) {
    if (!isIterable(promises)) {
      throw new Error('TypeError')
    }
    return new MyPromise((resolve, reject) => {
      for (const p of promises) {
        MyPromise.resolve(p).then(resolve, reject)
      }
    })
  }

  static withResolvers() {
    let resolve, reject
    const promise = new MyPromise((res, rej) => {
      resolve = res
      reject = rej
    })
    return {
      promise,
      resolve,
      reject,
    }
  }
}

:::

感觉还是有一点意义吧, 至少一段时间内不想再看到 Promise 了. 看着文档写的话应该不会很难写, 如果只看着 Promise 用法写的话大概会很折磨吧.

手写 promise ​

什么是 promise ​

初步实现 promise ​

异步执行任务 ​

.then 的一些细节 ​

onFulfilled 和 onRejected 不是函数的情况 ​

promise 的处理 ​

.catch 方法和.finally 方法 ​

.catch ​

.finally ​

目前为止的完整代码 ​

静态方法 ​

resolve ​

reject ​

try ​

all ​

allSettled ​

any ​

race ​

withResolvers ​

完整的 MyPromise ​

::: ​