手写Promise

最新推荐文章于 2024-09-14 18:52:56 发布

春风得逸

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量239

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/lhy0728/article/details/123009908

版权

这篇博客详细介绍了如何从头构建一个基本的JavaScript Promise实现。它涵盖了Promise的基本结构，包括状态管理、解决（resolve）和拒绝（reject）函数，以及如何通过then方法处理成功和失败的回调。示例中展示了一个Promise实例的创建和使用过程，演示了异步操作的处理。

摘要由CSDN通过智能技术生成

仅记录下来为自己日后观看。

// 1、基本结构
function myPromise(data) {
  let self = this;
  self.status = "pending"; //状态
  self.value = null; //成功之后返回的数据
  self.reason = null; //失败的原因

  //7.解决异步问题=》 暂存区
  self.onFulffilledCallbacks = [];
  self.onRejectedCallbacks = [];

  function resolve(value) {
    //返回成功的结果
    // 5.1
    if (self.status === "pending") {
      self.value = value; //保存成功的结果
      self.status = "fulfilled"; //将状态改为成功
      // 9.状态改变之后=》去除暂存区的方法
      self.onFulffilledCallbacks.forEach((v) => v(value));
    }
  }
  // 5.2
  function reject(reason) {
    if (self.status === "pending") {
      self.reason = reason; //失败的原因
      self.status = "rejected"; //将状态改为失败
      self.onRejectedCallbacks.forEach((v) => v(reason));
    }
  }

  // 4.立即执行
  data && data(resolve, reject);
}

//2 .then   在原型上添加.then方法 不管成功还是失败都会执行
myPromise.prototype.then = function (onFulffilled, onRejected) {
  // 6.确保传进来的时方法，如果不是，自己定义一个方法
  onFulffilled =
    typeof onFulffilled === "function"
      ? onFulffilled
      : function (data) {
          console.log(resolve());
          resolve(data);
        };

  onRejected =
    typeof onRejected === "function"
      ? onRejected
      : function (err) {
          throw err;
        };

  let self = this;
  if (self.status === "pending") {
    // 8.暂存回调函数
    self.onFulffilledCallbacks.push(onFulffilled);
    self.onRejectedCallbacks.push(onRejected);
  }
};

// 3.初级调用
let demo = new myPromise((resolve, reject) => {
  console.log(2);
  setTimeout(() => {
    resolve(999);
  }, 2000);
});
demo.then((data) => console.log(data));