HUA
首页/文章/javascript

面试官：手写Promise，我瞅瞅

2024-08-06
1345 字约 5 分钟
...
学习

手写 promise

1.Promise 构造函数

  • 参数 构造函数接受一个函数作为参数，该函数有两个参数也是函数
  • resolve 函数用于将 Promise 对象的状态从 pending 变为 fulfilled
  • reject 函数用于将 Promise 对象的状态从 pending 变为 rejected
  • 状态三个：pending、fulfilled 和 rejected，状态不可逆
  • 构造函数： executor 函数中，所以 promise 本身是同步的，then\catch 才是异步

下面是一个Promise构造器的简单实现

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {
    constructor(executor) {
        this.status = PENDING
        this.reason = undefined

        const resolve = (value) => {
            if (this.status !== PENDING) return
            this.status = FULFILLED
            this.reason = value
        }

        const reject = (reason) => {
            if (this.status !== PENDING) return
            this.status = REJECTED
            this.reason = reason
        }

        try {
            executor(resolve, reject)
        } catch (error) {
            reject(error)
        }
    }
}

2.then 方法

  • 参数，分别是 onFulfilled 和 onRejected，这两个参数都是函数
  • 链式调用，因为返回一个新的 Promise 对象，该对象的状态由 onFulfilled 和 onRejected 的返回值决定
  • 微任务，把 onFulfilled、onRejected、resolve、reject 存起来，等到 Promise 的状态改变时，再执行。可以使用数组来存储这些函数，当状态改变时，依次执行这些函数
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {
    #status = PENDING 
    #reason = null 
    #handlers = [] 

    constructor(executor) {
        const resolve = (reason) => {
            this.#changeState(FULFILLED, reason)
        }
        const reject = (reason) => {
            this.#changeState(REJECTED, reason)
        }
        try {
            executor(resolve, reject)
        } catch (error) {
            reject(error)
        }
    }
    then(onFulfilled, onRejected) {
        return new MyPromise((resolve, reject) => {
            this.#handlers.push({
                onFulfilled,
                onRejected,
                resolve,
                reject,
            })
            this.#run()
        })
    }

    
     * promise 状态发生改变时：记录状态及结果，并执行run函数
     * @param {*} state 状态
     * @param {*} reason 结果
     * @returns
     */
    #changeState(state, reason) {
        if (this.#status !== PENDING) return
        this.#status = state
        this.#reason = reason
        this.#run()
    }
    
     * run函数：辅助then函数返回的promise对象有结果时，
     * 遍历执行所有onFulfilled、onRejected 并把结果传递给下一个promise对象
     * @returns
     */
    #run() {
        if (this.#status === PENDING) return
        while (this.#handlers.length) {
            const { onFulfilled, onRejected, resolve, reject } =
                this.#handlers.shift()
            let fn = this.#status === FULFILLED ? onFulfilled : onRejected
            this.#runFn(fn, resolve, reject)
        }
    }
    
     * setTimeout执行模拟微任务的执行环境
     * @param {*} fn onFulfilled | onRejected
     * @param {*} resolve 通过resolve传递给下一个promise对象
     * @param {*} reject
     *
     */
    #runFn(fn, resolve, reject) {
        setTimeout(() => {
            if (typeof fn !== 'function') {
                let settled = this.#status === FULFILLED ? resolve : reject
                settled(this.#reason)
                return
            }
            try {
                const res = fn(this.#reason)
                
                resolve(res)
            } catch (error) {
                reject(error)
            }
        }, 0)
    }
}

const p = new MyPromise((resolve, reject) => {
    console.log('promise')
    setTimeout(() => {
        reject('123')
    }, 1000)
})
p.then(
    (res) => {
        console.log(res)
    },
    (err) => {
        console.log(err, 'err')
    }
)
p.then(
    (res) => {
        console.log(res)
    },
    (err) => {
        console.log(err, 'err2')
    }
)

3.catch 方法

  • catch 方法是状态为 REJECTED 时的处理函数
  • 和 then 不同的是 只接受一个 onRejected 参数 下面是利用 then 实现
catch(onRejected) {
  return this.then(null, onRejected);
}

4.resolve 方法

  • resolve 方法返回一个状态为 FULFILLED 的 promise 对象
  • 接受一个参数 value
  • 如果 value 是一个 promise 对象，则返回该 promise 对象
  • 否则，返回一个状态为 FULFILLED 的 promise 对象，其值为 value
static resolve(value) {
    if (value instanceof MyPromise) return value
  return new MyPromise((resolve, reject) => {
    resolve(value)
  })
}

5.reject 方法

  • reject 方法返回一个状态为 REJECTED 的 promise 对象
  • 接受一个参数 reason
static reject(reason) {
  return new MyPromise((resolve, reject) => {
    reject(reason)
  })
}

6.finally 方法

  • finally 方法接受一个回调函数作为参数
  • 无论 promise 对象的状态是 FULFILLED 还是 REJECTED，都会执行该回调函数
  • finally 方法返回一个 promise 对象，其状态和值与原 promise 对象相同
  • 利用 then, 失败和成功都执行一下回调
finally(onFinally) {
  return this.then(
    value => MyPromise.resolve(onFinally()).then(() => value),
    reason => MyPromise.resolve(onFinally()).then(() => {
      throw reason
    })
  )
}

7.all 方法

  • all 方法接受一个 promise 对象的数组作为参数
  • 返回值：有一个失败，则返回失败，否则返回成功
  • 往往项目中是所有成功或者失败的结果都要，就使用 allSettled
static all(promiseArr) {
    if (typeof promiseArr[Symbol.iterator] !== 'function') {
        throw new Error('参数必须是可迭代对象')
    }
  return new MyPromise((resolve, reject) => {
    let result = []
    let count = 0
    for (let i = 0; i < promiseArr.length; i++) {
      promiseArr[i].then(res => {
        result[i] = res
        count++
        if (count === promiseArr.length) {
          resolve(result)
        }
      }, err => {
        reject(err)
      })
    }
  })
}

8. allSettled 方法

  • allSettled 方法接受一个 promise 对象的数组作为参数
  • 返回值： promise 对象，其状态为 FULFILLED，值为一个数组，数组中的每个元素都是一个对象，表示每个 promise 对象的状态和值
  static allSettled(promiseArr) {
    if (typeof promiseArr[Symbol.iterator] !== 'function') {
      throw new Error('参数必须是可迭代对象')
    }
    return new MyPromise((resolve, reject) => {
      let result = []
      let count = 0
      for (let i = 0; i < promiseArr.length; i++) {
        promiseArr[i].then(res => {
          result[i] = { status: 'fulfilled', value: res }
        }, err => {
          result[i] = { status: 'rejected', reason: err }
        })
      }
    })
  }

9.race 方法

  • race 方法接受一个 promise 对象的数组作为参数
  • 返回值：返回最先执行完的 promise 对象的结果, 无论成功、失败
static race(promiseArr) {
    if (typeof promiseArr[Symbol.iterator] !== 'function') {
      throw new Error('参数必须是可迭代对象')
    }
    return new MyPromise((resolve, reject) => {
      for (let i = 0; i < promiseArr.length; i++) {
        promiseArr[i].then(res => {
          resolve(res) 
        }, err => {
          reject(err) 
        })
      }
    })
  }

10. any

  • any 方法接受一个 promise 对象的数组作为参数
  • 返回值：返回最先成功 promise 对象的结果, 如果全部失败则返回一个失败的 promise 对象
  static any(promiseArr) {
    if (typeof promiseArr[Symbol.iterator] !== 'function') {
      throw new Error('参数必须是可迭代对象')
    }
    return new MyPromise(async(resolve, reject) => {
      const result = []
      for (let i = 0; i < promiseArr.length; i++) {
        try {
          const res = await promiseArr[i]
          resolve(res)
        } catch (error) {
          result[i] = { status: 'rejected', reason: error }
          if (i === promiseArr.length - 1) {
            reject(result)
          }
        }
      }

    })
  }

完整代码

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class MyPromise {
  #status = PENDING; 
  #reason = null; 
  #handlers = []; 

  constructor(executor) {
    const resolve = (reason) => {
      this.#changeState(FULFILLED, reason)
    }
    const reject = (reason) => {
      this.#changeState(REJECTED, reason)
    }
    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }
  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      this.#handlers.push({
        onFulfilled,
        onRejected,
        resolve,
        reject
      });
      this.#run();
    });

  }

  catch(onRejected) {
    return this.then(null, onRejected);
  }
  finally(onFinally) {
    return this.then(
      value => MyPromise.resolve(onFinally()).then(() => value),
      reason => MyPromise.resolve(onFinally()).then(() => {
        throw reason
      })
    )
  }

  static reject(reason) {
    return new MyPromise((resolve, reject) => {
      reject(reason)
    })
  }

  static resolve(value) {
    if (value instanceof MyPromise) return value
    return new MyPromise((resolve, reject) => {
      resolve(value)
    })
  }

  static all(promiseArr) {
    if (typeof promiseArr[Symbol.iterator] !== 'function') {
      throw new Error('参数必须是可迭代对象')
    }
    return new MyPromise((resolve, reject) => {
      let result = []
      let count = 0
      for (let i = 0; i < promiseArr.length; i++) {
        promiseArr[i].then(res => {
          result[i] = res
          count++
          if (count === promiseArr.length) {
            resolve(result)
          }
        }, err => {
          reject(err) 
        })
      }
    })
  }

  static race(promiseArr) {
    if (typeof promiseArr[Symbol.iterator] !== 'function') {
      throw new Error('参数必须是可迭代对象')
    }
    return new MyPromise((resolve, reject) => {
      for (let i = 0; i < promiseArr.length; i++) {
        promiseArr[i].then(res => {
          resolve(res) 
        }, err => {
          reject(err) 
        })
      }
    })
  }

  static allSettled(promiseArr) {
    if (typeof promiseArr[Symbol.iterator] !== 'function') {
      throw new Error('参数必须是可迭代对象')
    }
    return new MyPromise((resolve, reject) => {
      let result = []
      for (let i = 0; i < promiseArr.length; i++) {
        promiseArr[i].then(res => {
          result[i] = { status: 'fulfilled', value: res }
        }, err => {
          result[i] = { status: 'rejected', reason: err }
        })
      }
      resolve(result)
    })
  }

  static any(promiseArr) {
    if (typeof promiseArr[Symbol.iterator] !== 'function') {
      throw new Error('参数必须是可迭代对象')
    }
    return new MyPromise(async (resolve, reject) => {
      const result = []
      for (let i = 0; i < promiseArr.length; i++) {
        try {
          const res = await promiseArr[i]
          resolve(res)
        } catch (error) {
          result[i] = { status: 'rejected', reason: error }
          if (i === promiseArr.length - 1) {
            reject(result)
          }
        }
      }

    })

  }

  
   * promise 状态发生改变时：记录状态及结果，并执行run函数
   * @param {*} state 状态
   * @param {*} reason 结果
   * @returns 
   */
  #changeState(state, reason) {
    if (this.#status !== PENDING) return;
    this.#status = state;
    this.#reason = reason;
    this.#run();
  }
  
   * run函数：辅助then函数返回的promise对象有结果时，
   * 遍历执行所有onFulfilled、onRejected 并把结果传递给下一个promise对象
   * @returns 
   */
  #run() {
    if (this.#status === PENDING) return;
    while (this.#handlers.length) {
      const { onFulfilled, onRejected, resolve, reject } = this.#handlers.shift();
      let fn = this.#status === FULFILLED ? onFulfilled : onRejected;
      this.#runFn(fn, resolve, reject);
    }
  }
  
   * setTimeout执行模拟微任务的执行环境
   * @param {*} fn onFulfilled | onRejected
   * @param {*} resolve 通过resolve传递给下一个promise对象
   * @param {*} reject 
   * 
   */
  #runFn(fn, resolve, reject) {
    setTimeout(() => {
      if (typeof fn !== 'function') {
        let settled = this.#status === FULFILLED ? resolve : reject;
        settled(this.#reason)
        return
      }
      try {
        const res = fn(this.#reason);
        
        resolve(res)
      } catch (error) {
        reject(error)
      }
    }, 0)
  }
}

如果您觉得这篇文章有帮助，请点个赞吧～

分享文章

相关文章

更多文章 →
javascript2026-02-24
navigator.sendBeacon全指南
在前端开发中，埋点系统是必不可少的一环。我们经常需要在用户 关闭页面 、 刷新 或 跳转路由 时，向服务器发送最后一条统计数据（比如用户停留时长、页面跳出率）。 但这看似简单的需求，在实现时却危机四伏：请求发不出去？页面跳转卡顿？今天我们就来聊聊这个问题的终极解决方案 —— 。 一、 痛点与传统方案的挣扎 场景还原 当用户点击关闭按钮时，浏览器会触发生命周期事件（ 或 ）。如果我们直接使用普通的异步 AJAX ( 或 ) 发送请求，浏览...
学习
javascript2025-11-02
理解浏览器事件系统,从用户点击到事件对象的完整旅程
深入理解浏览器事件系统：从用户点击到事件对象的完整旅程 “当我点击页面按钮时，背后发生了什么？为什么回调函数能收到一个包含丰富信息的event对象？今天，让我们一起揭开浏览器事件系统的神秘面纱。” 一个令人困惑的现象 作为前端开发者，我们每天都在写这样的代码： 这段代码如此熟悉，以至于我们很少停下来思考：​ ​这个 对象到底从哪里来？它为什么能知道点击的精确坐标？为什么能识别是哪个元素被点击了？​ ​ 更神奇的是，当我们手动创建事件时：...
学习
javascript2025-10-01
实现大文件上传全流程详解
在日常开发中，大文件上传是个绕不开的坎——动辄几百 MB 甚至 GB 级的文件，直接上传不仅容易超时，还会让用户体验大打折扣。最近我用 Vue+Express 实现了一套完整的大文件上传方案，支持分片上传、断点续传、秒传和手动中。 一、先看效果：我们要实现什么？ 先上核心功能清单，确保大家明确目标，知道我们要解决哪些实际问题： 大文件分片上传 ：将文件切成固定大小的小片段分批上传，避免单次请求超时 秒传 ：服务器已存在完整文件时，直接返...
学习
javascript2025-09-18
JavaScript 的多线程能力：Worker
如果你写过一些计算量稍大的 JavaScript 代码，比如图像处理、大量数据排序或者复杂的算法，你几乎肯定遇到过浏览器“卡死”的现象。点击页面没反应，动画也停了，就像整个世界都静止了。 这就是主线程被阻塞的典型后果。因为主线程既要负责执行 JavaScript，又要负责渲染页面、响应用户操作，一旦它被繁重的计算任务占满，就无暇顾及其他，用户体验便直线下降。 这个问题的根源，正是“主线程是单线程的”。那么，如何解决呢？ 答案很简单：把这...
学习面试
javascript2025-09-15
一张 8K 海报差点把首屏拖垮
你给后台管理系统加了一个「企业风采」模块，运营同学一口气上传了 200 张 8K 宣传海报。首屏直接飙到 8.3 s，LCP 红得发紫。 老板一句「能不能像朋友圈那样滑到哪看到哪？」——于是你把懒加载重新翻出来折腾了一轮。 解决方案：三条技术路线，你全踩了一遍 1\. 最偷懒：原生 一行代码就能跑，浏览器帮你搞定。 🔍 关键决策点 2020 年后现代浏览器全覆盖，IE 全军覆没。 必须写死 ，否则 CLS 会抖成 PPT。 适用场景...
学习
javascript2025-09-10
🚀 Web Worker让你的应用丝滑
🌟 引言 在日常的前端开发中，你是否遇到过这样的困扰： 大数据处理时页面卡死 ：处理几万条数据时，页面直接卡成PPT，用户点击毫无反应 复杂计算阻塞UI ：图片处理、数据分析等计算密集型任务让整个应用假死 文件上传/下载卡顿 ：大文件操作时，其他功能完全无法使用 实时数据处理性能差 ：WebSocket接收大量数据时，页面渲染严重滞后 今天分享6个Web Worker的核心技巧，让你的应用告别卡顿，用户体验丝滑如德芙！ 💡 核心技巧...
学习

评论

请登录后发表评论

去登录
加载评论中...

目录