Promise

Promise 异步处理，提供更优雅的方式（链式调用）解决了 callback hell 的问题，并且更易于处理错误

promise 有三种状态，状态间的转移是不可逆的，只能有 pengding to resolved 或者 pending to rejected 两种变化
- pending
- resolved
- rejected
then 函数接收两个参数，分别是成功回调和失败回调，最终会返回一个 promise，支持链式调用
catch 捕获错误
finally 不论最后是哪种状态，最终都会调用这个回调

function myPromise() {
  new Promise(function (resolve, reject) {
    fetch(url)
      .then((data) => {
        resolve(data);
      })
      .catch();
  });
}
myPromise()
  .then((data) => {})
  .catch();

手写 Promise 可以参考 https://docs.zhouweibin.top/docs/code/promise/

常用方法

Promise.resolve(value) 创建一个 resolved 的 promise
Promise.reject(error) 创建一个 rejected 的 promise
Promise.all(promises)。并行处理 promise 任务，当所有给定的 promise 都 resolve 时，新的 promise 才会 resolve，并且其结果数组（按序）将成为新 promise 的结果。如果有任意一个 promise 被 reject 了，会提前返回这个 reject 的结果
Promise.allSettled(promises)。和 Promise.all 类似，但是不论 promise 被 resolve 还是 reject，都会返回
Promise.race(promises)。和 Promise.all 类似，但只等待第一个 settled 的 promise 并返回其结果（resolve or reject）
Promise.any(promises)。和 Promise.race 类似，区别在于它只等待第一个 fulfilled 的 promise，并将这个 fulfilled 的 promise 返回。如果给出的 promise 都 rejected，那么返回的 promise 会带有 AggregateError（一个特殊的 error 对象，在其 errors 属性中存储着所有 promise error）
Promise.withResolver()。ES2024 新引入的 api，返回一个 Promise 实例和对应的 resolve 和 reject。可以看下面的例子理解一下

这是一个带取消功能的定时器实现，参考自 https://modyqyw.top/blogs/2023/07/promise-with-resolvers

function cancellableTimeout(ms) {
  let cancel;
  const promise = new Promise((resolve, reject) => {
    const timeoutId = setTimeout(resolve, ms);
    cancel = () => {
      clearTimeout(timeoutId);
      reject(new Error("timeout cancelled"));
    };
  });
  return { cancel, promise };
}

可以看到需要到回调里操作 resolve 和 reject，有一定的嵌套，使用体验不是很好，下面用 withResolver 优化下

function cancellableTimeout(ms) {
  const { promise, resolve, reject } = Promise.withResolvers();
  const timeoutId = setTimeout(resolve, ms);
  const cancel = () => {
    clearTimeout(timeoutId);
    reject(new Error("timeout cancelled"));
  };
  return { promise, cancel };
}

常用方法​

常用方法