假如面试官要你手写一个promise

helloworld1024fd

已于 2023-03-01 12:03:42 修改

阅读量338

点赞数

文章标签：前端框架 javascript

于 2023-03-01 12:03:27 首次发布

本文链接：https://blog.csdn.net/helloworld1024fd/article/details/129278593

版权

本文深入探讨了Promise的创建、状态变化及其核心方法then和catch的工作原理。通过逐步解析，介绍了then如何处理成功和失败的情况，以及catch作为then失败回调的便捷形式。文章还讨论了Promise.all()和Promise.race()的用法，强调了在处理多个Promise时的注意事项。

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

promise

在开发中，经常需要用到promise，promise具有很多特性，这一次将对promise特性进行总结，并从零写一个promise。

步骤一

Promise特点
- 1，创建时需要传递一个函数，否则会报错
- 2，会给传入的函数设置两个回调函数
- 3，刚创建的Promise对象状态是pending

class MyPromise {
   
  constructor(handle) {
   
    // 3，刚创建的Promise对象状态是pending
    this.status = "pending";
    // 1，创建时需要传递一个函数，否则会报错
    if (!this._isFunction(handle)) {
   
      throw new Error("请传入一个函数");
    }
    // 2，会给传入的函数设置两个回调函数
    handle(this._resolve.bind(this), this._reject.bind(this))
  }
  _resolve() {
   

  }
  _reject() {
   

  }
  _isFunction(fn) {
   
    return typeof fn === "function";
  }
}

步骤二

Promise特点
- 4，状态一旦发生改变就不可再次改变
- 5，可以通过then来监听状态的改变
  - 5.1，如果创建监听时，状态已经改变，立即执行监听回调
  - 5.2，如果创建监听时，状态未改变，会等状态改变后执行
  - 5.3，同一promise对象可以添加多个then监听，状态改变时按照注册顺序依次执行

// 定义常量保存对象的状态
const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";

class MyPromise {
   
  constructor(handle) {
   
    // 3，刚创建的Promise对象状态是pending
    this.status = PENDING;
    // 成功回调的值
    this.value = undefined;
    // 失败回调的值
    this.reason = undefined;
    // 注册的成功回调
    this.onResolvedCallbacks = [];
    // 注册的失败回调
    this.onRejectedCallbacks = [];
    // 1，创建时需要传递一个函数，否则会报错
    if (!this._isFunction(handle)) {
   
      throw new Error("请传入一个函数");
    }
    // 2，会给传入的函数设置两个回调函数
    handle(this._resolve.bind(this), this._reject.bind(