只需 12 行代码，自己也能写一个方便好用的 Promise 工具库

在前端开发中，我们经常会遇到异步请求的情况，而 Promise 是一个很好的解决方案。但是，每次都要写 Promise 代码很繁琐，而且一些常用的 Promise 操作也需要自己实现。那么，我们可以自己写一个 Promise 工具库，方便自己的日常开发。

手写 Promise

在写 Promise 工具库之前，首先我们需要了解 Promise 的基本用法。下面是一个简单的 Promise 例子。

// javascriptcn.com 代码示例
function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("data");
      // reject(new Error("error"))
    }, 1000);
  });
}

getData().then(console.log).catch(console.error);

通过 new Promise() 创建一个 Promise，并在里面执行异步操作，并通过 resolve 和 reject 方法通知 Promise 状态的改变。在调用时，我们使用 then 方法处理成功情况，使用 catch 方法处理异常情况。这里的 console.log 和 console.error 是一个简单的输出。

手写 Promise 工具库

根据 Promise 的基本用法，我们可以手写一个 Promise 工具库。下面是一个简单的 Promise 工具库例子。

// javascriptcn.com 代码示例
class $Promise {
  constructor(fn) {
    this.state = "pending";
    this.value = null;
    this.err = null;
    this.callbacks = [];

    fn(
      (value) => {
        this.resolve(value);
      },
      (err) => {
        this.reject(err);
      }
    );
  }

  resolve(value) {
    this.state = "resolved";
    this.value = value;
    this.callbacks.forEach((callback) => callback.onResolved(value));
  }

  reject(err) {
    this.state = "rejected";
    this.err = err;
    this.callbacks.forEach((callback) => callback.onRejected(err));
  }

  then(onResolved, onRejected) {
    if (typeof onResolved !== "function") {
      onResolved = (value) => value;
    }
    if (typeof onRejected !== "function") {
      onRejected = (err) => {
        throw err;
      };
    }

    return new $Promise((resolve, reject) => {
      const handle = (callback) => {
        try {
          const result = callback(this.value);
          if (result instanceof $Promise) {
            result.then(resolve, reject);
          } else {
            resolve(result);
          }
        } catch (err) {
          reject(err);
        }
      };

      switch (this.state) {
        case "pending":
          this.callbacks.push({
            onResolved() {
              handle(onResolved);
            },
            onRejected() {
              handle(onRejected);
            },
          });
          break;
        case "resolved":
          handle(onResolved);
          break;
        case "rejected":
          handle(onRejected);
          break;
      }
    });
  }

  catch(onRejected) {
    return this.then(null, onRejected);
  }
}

通过 $Promise 创建一个 Promise，并在 then 方法中处理 resolve 和 reject。我们实现了一些常用的 Promise 操作，比如 then 和 catch。支持链式调用。

使用 Promise 工具库

使用 Promise 工具库非常简单，只需要像使用原生 Promise 一样使用即可。

// javascriptcn.com 代码示例
function getData() {
  return new $Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("data");
      // reject(new Error("error"))
    }, 1000);
  });
}

getData().then(console.log).catch(console.error);

总结

通过这篇文章，我们学习了 Promise 的基本用法和手写 Promise 工具库的方法。通过手写 Promise 工具库，可以方便我们日常的开发，并且深入了解 Promise 的实现。希望这篇文章对你有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6540723f7d4982a6eb9f3448