Promise 核心

最新推荐文章于 2022-01-10 11:02:46 发布
最新推荐文章于 2022-01-10 11:02:46 发布
阅读量107 收藏
点赞数
分类专栏： 异步 文章标签： js
原文链接：https://doc.houdunren.com/js/17%20Promise%E6%A0%B8%E5%BF%83.html#race
版权

1.起步构建

首先声明定义类并声明Promise状态与值

  • executor为执行者
  • 当执行者出现异常时触发拒绝状态
  • 使用静态属性保存状态值
  • 状态只能改变一次，所以在resolve与reject添加条件判断
  • 因为 resolve或rejected方法在executor中调用，作用域也是executor作用域，这会造成this指向window，现在我们使用的是class定义，this为undefined。
class HD {
  static PENDING = "pending";
  static FULFILLED = "fulfilled";
  static REJECTED = "rejected";
  constructor(executor) {
    this.status = HD.PENDING;
    this.value = null;
    try {
      executor(this.resolve.bind(this), this.reject.bind(this));
    } catch (error) {
      this.reject(error);
    }
  }
  resolve(value) {
    if (this.status == HD.PENDING) {
      this.status = HD.FULFILLED;
      this.value = value;
    }
  }
  reject(value) {
    if (this.status == HD.PENDING) {
      this.status = HD.REJECTED;
      this.value = value;
    }
  }
}

下面测试一下状态改变

<script src="HD.js"></script>
<script>
  let p = new HD((resolve, reject) => {
    resolve("后盾人");
  });
  console.log(p);
</script>

2.THEN

添加then方法来处理状态的改变,有以下几点说明

  • then可以有两个参数，即成功和错误时的回调函数
  • then的函数参数都不是必须的，所以需要设置默认值为函数，用于处理当没有传递时情况
  • 当执行then传递的函数发生异常时，统一交给onRejected来处理错误

基础构建

  • then可以有两个参数，即成功和错误时的回调函数
  • then的函数参数都不是必须的，所以需要设置默认值为函数，用于处理当没有传递时情况
  • 当执行then传递的函数发生异常时，统一交给onRejected来处理错误
then(onFulfilled, onRejected) {
  if (typeof onFulfilled != "function") {
    onFulfilled = value => value;
  }
  if (typeof onRejected != "function") {
    onRejected = value => value;
  }
  if (this.status == HD.FULFILLED) {
    try {
      onFulfilled(this.value);
    } catch (error) {
      onRejected(error);
    }
  }
  if (this.status == HD.REJECTED) {
    try {
      onRejected(this.value);
    } catch (error) {
      onRejected(error);
    }
  }
}

下面来测试then方法的，结果正常输出后盾人

let p = new HD((resolve, reject) => {
  resolve("后盾人");
}).then(
  value => {
    console.log(value);
  },
  reason => {
    console.log(reason);
  }
);
console.log("houdunren.com");

3.异步任务

但上面的代码产生的Promise并不是异步的，使用setTimeout来将onFulfilled与onRejected做为异步宏任务执行。

then(onFulfilled, onRejected) {
  if (typeof onFulfilled != "function") {
    onFulfilled = value => value;
  }
  if (typeof onRejected != "function") {
    onRejected = value => value;
  }
  if (this.status == HD.FULFILLED) {
    setTimeout(() => {
      try {
        onFulfilled(this.value);
      } catch (error) {
        onRejected(error);
      }
    });
  }
  if (this.status == HD.REJECTED) {
    setTimeout(() => {
      try {
        onRejected(this.value);
      } catch (error) {
        onRejected(error);
      }
    });
  }
}

现在再执行代码，已经有异步效果了，先输出了houdunren.com

let p = new HD((resolve, reject) => {
  resolve("后盾人");
}).then(
  value => {
    console.log(value);
  },
  reason => {
    console.log(reason);
  }
);
console.log("houdunren.com");

PENDING状态

目前then方法无法处理promise为pending时的状态

let p = new HD((resolve, reject) => {
  setTimeout(() => {
    resolve("后盾人");
  });
})

为了处理以下情况，需要进行几点改动

  1. 在构造函数中添加callbacks来保存pending状态时处理函数，当状态改变时循环调用
constructor(executor) {
	...
  this.callbacks = [];
  ...
}
  1. 将then方法的回调函数添加到 callbacks 数组中，用于异步执行
then(onFulfilled, onRejected) {
  if (typeof onFulfilled != "function") {
    onFulfilled = value => value;
  }
  if (typeof onRejected != "function") {
    onRejected = value => value;
  }
	if (this.status == HD.PENDING) {
    this.callbacks.push({
      onFulfilled: value => {
        try {
          onFulfilled(value);
        } catch (error) {
          onRejected(error);
        }
      },
      onRejected: value => {
        try {
          onRejected(value);
        } catch (error) {
          onRejected(error);
        }
      }
    });
  }
  ...
}

3.resovle与reject中添加处理callback方法的代码

resolve(value) {
  if (this.status == HD.PENDING) {
    this.status = HD.FULFILLED;
    this.value = value;
    this.callbacks.map(callback => {
      callback.onFulfilled(value);
    });
  }
}
reject(value) {
  if (this.status == HD.PENDING) {
    this.status = HD.REJECTED;
    this.value = value;
    this.callbacks.map(callback => {
      callback.onRejected(value);
    });
  }
}

PENDING异步
执行以下代码发现并不是异步操作，应该先输出 大叔视频 然后是`后盾人

let p = new HD((resolve, reject) => {
  setTimeout(() => {
    resolve("后盾人");
    console.log("大叔视频");
  });
}).then(
  value => {
    console.log(value);
  },
  reason => {
    console.log(reason);
  }
);

解决以上问题，只需要将resolve与reject执行通过setTimeout定义为异步任务

resolve(value) {
  if (this.status == HD.PENDING) {
   	this.status = HD.FULFILLED;
		this.value = value;
    setTimeout(() => {
      this.callbacks.map(callback => {
        callback.onFulfilled(value);
      });
    });
  }
}
reject(value) {
  if (this.status == HD.PENDING) {
  	this.status = HD.REJECTED;
    this.value = value;
    setTimeout(() => {
      this.callbacks.map(callback => {
        callback.onRejected(value);
      });
    });
  }
}

链式操作

Promise中的then是链式调用执行的，所以then也要返回Promise才能实现

  1. then的onReject函数是对前面Promise的rejected的处理
  2. 但该Promise返回状态要为fulfilled，所以在调用onRejected后改变当前promise为fulfilled状态
then(onFulfilled, onRejected) {
  if (typeof onFulfilled != "function") {
    onFulfilled = value => value;
  }
  if (typeof onRejected != "function") {
    onRejected = value => value;
  }
  return new HD((resolve, reject) => {
    if (this.status == HD.PENDING) {
      this.callbacks.push({
        onFulfilled: value => {
          try {
            let result = onFulfilled(value);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        },
        onRejected: value => {
          try {
            let result = onRejected(value);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }
      });
    }
    if (this.status == HD.FULFILLED) {
      setTimeout(() => {
        try {
          let result = onFulfilled(this.value);
          resolve(result);
        } catch (error) {
          reject(error);
        }
      });
    }
    if (this.status == HD.REJECTED) {
      setTimeout(() => {
        try {
          let result = onRejected(this.value);
          resolve(result);
        } catch (error) {
          reject(error);
        }
      });
    }
  });
}

下面执行测试后，链式操作已经有效了

let p = new HD((resolve, reject) => {
  resolve("后盾人");
  console.log("hdcms.com");
})
.then(
  value => {
    console.log(value);
    return "大叔视频";
  },
  reason => {
    console.log(reason);
  }
)
.then(
  value => {
    console.log(value);
  },
  reason => {
    console.log(reason);
  }
);
console.log("houdunren.com");

返回类型

如果then返回的是Promise呢？所以我们需要判断分别处理返回值为Promise与普通值的情况

基本实现

下面来实现不同类型不同处理机制

then(onFulfilled, onRejected) {
  if (typeof onFulfilled != "function") {
    onFulfilled = value => value;
  }
  if (typeof onRejected != "function") {
    onRejected = value => value;
  }
  return new HD((resolve, reject) => {
    if (this.status == HD.PENDING) {
      this.callbacks.push({
        onFulfilled: value => {
          try {
            let result = onFulfilled(value);
            if (result instanceof HD) {
              result.then(resolve, reject);
            } else {
              resolve(result);
            }
          } catch (error) {
            reject(error);
          }
        },
        onRejected: value => {
          try {
            let result = onRejected(value);
            if (result instanceof HD) {
              result.then(resolve, reject);
            } else {
              resolve(result);
            }
          } catch (error) {
            reject(error);
          }
        }
      });
    }
    if (this.status == HD.FULFILLED) {
      setTimeout(() => {
        try {
          let result = onFulfilled(this.value);
          if (result instanceof HD) {
            result.then(resolve, reject);
          } else {
            resolve(result);
          }
        } catch (error) {
          reject(error);
        }
      });
    }
    if (this.status == HD.REJECTED) {
      setTimeout(() => {
        try {
          let result = onRejected(this.value);
          if (result instanceof HD) {
            result.then(resolve, reject);
          } else {
            resolve(result);
          }
        } catch (error) {
          reject(error);
        }
      });
    }
  });
}

代码复用

现在发现pendding、fulfilled、rejected 状态的代码非常相似，所以可以提取出方法Parse来复用

then(onFulfilled, onRejected) {
  if (typeof onFulfilled != "function") {
    onFulfilled = value => value;
  }
  if (typeof onRejected != "function") {
    onRejected = value => value;
  }
  return new HD((resolve, reject) => {
    if (this.status == HD.PENDING) {
      this.callbacks.push({
        onFulfilled: value => {
          this.parse(onFulfilled(this.value), resolve, reject);
        },
        onRejected: value => {
          this.parse(onRejected(this.value), resolve, reject);
        }
      });
    }
    if (this.status == HD.FULFILLED) {
      setTimeout(() => {
        this.parse(onFulfilled(this.value), resolve, reject);
      });
    }
    if (this.status == HD.REJECTED) {
      setTimeout(() => {
        this.parse(onRejected(this.value), resolve, reject);
      });
    }
  });
}
parse(result, resolve, reject) {
  try {
    if (result instanceof HD) {
      result.then(resolve, reject);
    } else {
      resolve(result);
    }
  } catch (error) {
    reject(error);
  }
}

返回约束

then的返回的promise不能是then相同的Promise，下面是原生Promise的示例将产生错误

let promise = new Promise(resolve => {
  setTimeout(() => {
    resolve("后盾人");
  });
});
let p = promise.then(value => {
  return p;
});

解决上面的问题来完善代码，添加当前promise做为parse的第一个参数与函数结果比对

then(onFulfilled, onRejected) {
  if (typeof onFulfilled != "function") {
    onFulfilled = value => value;
  }
  if (typeof onRejected != "function") {
    onRejected = value => value;
  }
  let promise = new HD((resolve, reject) => {
    if (this.status == HD.PENDING) {
      this.callbacks.push({
        onFulfilled: value => {
          this.parse(promise, onFulfilled(this.value), resolve, reject);
        },
        onRejected: value => {
          this.parse(promise, onRejected(this.value), resolve, reject);
        }
      });
    }
    if (this.status == HD.FULFILLED) {
      setTimeout(() => {
        this.parse(promise, onFulfilled(this.value), resolve, reject);
      });
    }
    if (this.status == HD.REJECTED) {
      setTimeout(() => {
        this.parse(promise, onRejected(this.value), resolve, reject);
      });
    }
  });
  return promise;
}
parse(promise, result, resolve, reject) {
  if (promise == result) {
    throw new TypeError("Chaining cycle detected for promise");
  }
  try {
    if (result instanceof HD) {
      result.then(resolve, reject);
    } else {
      resolve(result);
    }
  } catch (error) {
    reject(error);
  }
}

RESOLVE

下面来实现Promise的resolve方法

static resolve(value) {
  return new HD((resolve, reject) => {
    if (value instanceof HD) {
      value.then(resolve, reject);
    } else {
      resolve(value);
    }
  });
}

使用普通值的测试

HD.resolve("后盾人").then(value => {
  console.log(value);
});

使用状态为fulfilled的promise值测试

HD.resolve(
  new HD(resolve => {
    resolve("houdunren.com");
  })
).then(value => {
  console.log(value);
});

使用状态为rejected的Promise测试

HD.resolve(
  new HD((_, reject) => {
    reject("reacted");
  })
).then(
  value => {
    console.log(value);
  },
  reason => {
    console.log(reason);
  }
);

REJEDCT

下面定义Promise的rejecte方法

static reject(reason) {
  return new HD((_, reject) => {
    reject(reason);
  });
}

使用测试

HD.reject("rejected").then(null, reason => {
  console.log(reason);
});

ALL
下面来实现Promise的all方法

static all(promises) {
  let resolves = [];
  return new HD((resolve, reject) => {
    promises.forEach((promise, index) => {
      promise.then(
        value => {
          resolves.push(value);
          if (resolves.length == promises.length) {
            resolve(resolves);
          }
        },
        reason => {
          reject(reason);
        }
      );
    });
  });
}

来对所有Promise状态为fulfilled的测试

let p1 = new HD((resolve, reject) => {
  resolve("后盾人");
});
let p2 = new HD((resolve, reject) => {
  reject("后盾人");
});
let promises = HD.all([p1, p2]).then(
  promises => {
    console.log(promises);
  },
  reason => {
    console.log(reason);
  }
);

使用我们写的resolve进行测试

let p1 = HD.resolve("后盾人");
let p2 = HD.resolve("houdunren.com");
let promises = HD.all([p1, p2]).then(
  promises => {
    console.log(promises);
  },
  reason => {
    console.log(reason);
  }
);

其中一个Promise为rejected时的效果

let p1 = HD.resolve("后盾人");
let p2 = HD.reject("rejected");
let promises = HD.all([p1, p2]).then(
  promises => {
    console.log(promises);
  },
  reason => {
    console.log(reason);
  }
);

RACE
下面实现Promise的race方法

static race(promises) {
  return new HD((resolve, reject) => {
    promises.map(promise => {
      promise.then(value => {
        resolve(value);
      });
    });
  });
}

我们来进行测试

let p1 = HD.resolve("后盾人");
let p2 = HD.resolve("houdunren.com");
let promises = HD.race([p1, p2]).then(
  promises => {
    console.log(promises);
  },
  reason => {
    console.log(reason);
  }
);

使用延迟Promise后的效果

let p1 = new HD(resolve => {
  setInterval(() => {
    resolve("后盾人");
  }, 2000);
});
let p2 = new HD(resolve => {
  setInterval(() => {
    resolve("houdunren.com");
  }, 1000);
});
let promises = HD.race([p1, p2]).then(
  promises => {
    console.log(promises);
  },
  reason => {
    console.log(reason);
  }
);
quitv
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Promise.rar
07-02
首先，Promise的三个状态是Promise的核心特性，它们分别是pending（进行中）、fulfilled（已完成）和rejected（已拒绝）。当Promise被创建时，它的状态是pending，然后可以通过resolve或reject方法改变其状态至...
promise.js
09-08
它的核心是Promise对象，这个对象代表了可能还未完成但最终会完成的异步操作。Promise.js 的设计目标是提供一种更优雅的方式来组织复杂的异步代码流，使得代码更易读、更易于维护。 在JavaScript中，异步操作通常...
Promise核心实现
ting2909的博客
09-30 123
将Promise向外暴露 复制代码 (function (window) { /* Promise构造函数 executor:执行器函数 */ function Promise(executor) { } // 向外暴露Promise window.Promise = Promise })() 复制代码 构造函数实现 复制代码 function MyPromise(exector) { var self = this; self.status = ‘pending’; // 给promise对象指定st
promise核心代码
woyebuzhidao321的博客
10-30 449
手写promise const PENDING = ‘pending’;// 等待 const FULFILLED = ‘fulfilled’ // 成功 const REJECTED = ‘rejected’ // 失败 class MyPromise { constructor(executor) { executor(this.resolve,this.reject) } // promise 状态 status = PENDING // 成功之后的值 value = undefined // 失败之
Promise的深入：实现Promise的核心功能
moreerom的博客
04-11 898
Promise的深入：实现Promise的核心功能 前言 Promise是js中的一个重要模块，它可以方便我们更优雅地管理异步回调问题，彻底解决了回调地狱问题，并且其核心代码很短。了解Promise的运作原理和机制，会有莫大的好处，就算转变了编程语言，只要还有异步这个概念，就可以自己动手封装。 最简易版 Promise核心功能之一就是管理回调任务，在异步任务结束后，通过调用resolve方法，实现调用回调并且传递参数： class MyPromise { constructor(fn) {
深度解析Promise的核心功能并手写实现
CreatorRay的博客
01-10 513
码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。 Promise作为前端目前必不可少的内容，目前对于前端工程师的考察已经不满足于对于Promise的简单使用，中大公司的要求是知道原理，能手写实现 Promise最基本的特性，要提供三个方法，resolve、reject、then。 class Promise { static PENDING = "PENDING"; static FULFILLED = "FULFILLED"; static .
Promise核心原理实现一个简单版promise
前端开发技术
11-26 337
创建Promise类，加入三个最常用的回调函数， class Promise { constructor(executor) { this.onResolved = [] this.onRejected = [] this.state = 'padding' try{ executor(this...
Javascript Promise用法详解
10-18
Promise 的核心在于它的链式调用。`Promise#then` 方法用于添加成功回调，`Promise#catch` 用于捕获错误。例如： ```javascript let promise = new Promise((resolve, reject) => { // 异步操作 }); promise.then...
promise-1.0.0.js
12-01
Promise是JavaScript中的一个核心特性，尤其在ES6中被广泛使用，用于处理异步操作。Promise代表了可能尚未完成但最终会完成的异步操作的结果。这个"promise-1.0.0.js"文件可能是Promise的一个早期实现，稳定版本...
Javascript-Promise原理
03-06
Promise对象必须实现then方法，then是promise规范的核心，而且then方法也必须返回一个Promise对象，同一个Promise对象可以注册多个then方法，并且回调的执行顺序跟它们的注册顺序一致； then方法接受两个回调函数，...
parse_this:只需将可调用对象转换为命令行
05-19
parse_this 使解析任何功能，方法或类方法的命令行参数变得容易。 您刚刚完成了一段很棒的代码，现在进入了无聊的部分：添加命令行解析以实际使用它... 因此，现在您需要使用很棒但很冗长的argparse模块。 对于入口点方法的每个参数，您需要添加名称，帮助消息和/或默认值。 但是，等等...您的参数正确命名了！！ 而且您对该方法有一个很棒的文档字符串。 可能有一种轻松创建ArgumentParser的方法，对吗？ 是的，它称为parse_this ！ 用法 parse_this包含一种从整个类创建命令行界面的简单方法。 为此，您将需要使用parse_class类装饰器。 # script.py from __future__ import print_function from parse_this import Self , create_parser , parse_
promise的三种状态_一.Promise中核心逻辑的实现
weixin_39845613的博客
02-01 344
首先看一下Promise代码：let promise =new Promise((resolve,reject)=>{ resolve('成功'); //reject('失败'); }) promise.then(val=>{ console.log(val); },reason=>{ console.log(reason); }) 我们根据以上的一个简单的用例，得到Pr...
深入ES6中Promise的核心知识,重写实现Promise
webMinStudent的博客
10-13 386
深入讲解ES6中Promise的核心知识,重写Promise ：重写实现Promise 手写Promise： Promise.prototype.then() Promise.prototype.catch() Promise.resolve() Promise.reject() Promise.all() / Promise.race() Promise.prototype.then： function Promise(extceu) { const _this
对Promise的一些理解
ztop_f的博客
06-16 2993
摘取部分脚本之家的描述： Promise核心说明 尽管Promise已经有自己的规范，但目前的各类Promise库，在Promise的实现细节上是有差异的，部分API甚至在意义上完全不同。但Promise的核心内容，是相通的，它就是then方法。在相关术语中，promise指的就是一个有then方法，且该方法能触发特定行为的对象或函数。 Promise可以有不同的实现方式，因此Promise...
htmlparse
weixin_33910385的博客
01-07 165
<html> <head> <style> textarea{ width:800px; height:250px; } </style> <script> ...
解析 Promise 原理，实现一个Promise
weixin_34388207的博客
09-19 476
解析 Promise 原理，实现一个Promise 概述 这篇文章旨在解析 Promise的异步实现原理，并且以 ES6中的 Promise 为蓝本实现一个简单的 Promise。 通过自己动手实现一个 Promise 对象，可以熟悉很多可能不知道的 Promise 细节，同时也能对异步的理解更提升一步。 本文假设读者对 Promise ...
promise 核心封装
Altaird的博客
12-13 745
promise，在项目开发应该大家都不陌生吧，今天我们来看下promise是怎么实现，自己手写一个promise。 首先我们来看封装一个promise需要什么条件 let promise = new Promise((resolve,reject) => {}) console.log(promise) 由上可知，我们看到promise身上有状态，返回值，__proto__上有一些方法，所以我们可以采用class的方式来创建。 // 手写promise class XG { // .
Promise的含义和用法
热门推荐
西鱼的博客
06-02 2万+
含义 Promise是异步编程的一种解决方案。 Promise对象有以下2个特点： 1.对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending(进行中)、Resolved(已完成)和Rejected(已失败)。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其...
手写Promise核心原理，再也不怕面试官问我Promise原理
weixin_43964148的博客
10-21 1461
整体流程的介绍 整体流程的介绍1. 定义整体结构2. 实现Promise构造函数3. 实现then方法3.实现catch方法4. 实现Promise.resolve5.实现Promise...
Promise 源码全
最新发布
11-01
由于Promise源码比较复杂，涉及到很多细节，这里无法一一列举。但是，我们可以简单介绍一下Promise的核心实现原理。 Promise的核心实现原理是基于状态机的思想，它有三种状态：pending（等待中）、fulfilled（已成功）和rejected（已失败）。当Promise对象的状态发生改变时，它会自动调用相应的回调函数。 Promise对象的构造函数接受一个函数作为参数，这个函数叫做executor。executor函数有两个参数，分别是resolve和reject。当executor函数执行成功时，它会调用resolve函数，将Promise对象的状态设置为fulfilled；当executor函数执行失败时，它会调用reject函数，将Promise对象的状态设置为rejected。 Promise对象的then方法接受两个参数，分别是onFulfilled和onRejected。当Promise对象的状态为fulfilled时，它会调用onFulfilled函数；当Promise对象的状态为rejected时，它会调用onRejected函数。then方法返回一个新的Promise对象，这个新的Promise对象的状态由onFulfilled和onRejected函数的返回值决定。 除了then方法之外，Promise对象还有catch方法和finally方法。catch方法用来捕获Promise对象的错误，finally方法用来指定Promise对象无论成功还是失败都要执行的操作。 以上是Promise的核心实现原理的简单介绍，如果你想深入了解Promise的源码，可以参考相关的资料和文献。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值