js手写实现Promise

最新推荐文章于 2024-05-13 02:25:22 发布
最新推荐文章于 2024-05-13 02:25:22 发布
阅读量602 收藏
点赞数
分类专栏： # javascript 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43838488/article/details/122840729
版权

前言

JavaScript 中的 Promise 诞生于 ES2015（ES6），是当下前端开发中特别流行的一种异步操作解决方案，也几乎是前端面试过程中的必考题。如果能够熟练运用 Promise，并深入理解 Promise 的运行原理，想必不论是在实际开发中还是在面试过程中，都能如鱼得水。

本篇文章我们就来一步步分析 Promise 的特征与用法，并最终实现一个包含以下 API 的 Promise:

  • Promise.prototype.then()

  • Promise.prototype.catch()

  • Promise.prototype.finally()

  • Promise.all()

  • Promise.resolve()

  • Promise.reject()

TIPS：

具体实现步骤会在代码中通过注释说明。

为了避免代码重复，下面的每一步的实现过程都会忽略其他步骤的代码，只包含当前步骤的必要代码。

完整代码将会放在最后。

开始之前先回顾一下 Promise 的基本用法

  • 创建 Promise

    let asyncFunc = new Promise((resolve, rejcet) => {
  Math.random() > 0.5 ? resolve('fulfilled') : rejcet('rejected')
})

  • 处理 Promise 返回的状态（完成或者失败）

    asyncFunc.then(
  res => {
    console.log(res)
  },
  err => {
    console.log(err)
  }
)

第一步：声明 Promise 的三种状态

我们知道 Promise 有三种状态，他们不受外界影响，而且一旦状态改变，就不会再变，任何时候都可以得到这个结果。这里先将它们枚举出来，后续会大量用到：

  • 待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。

    const PENDING = 'pending'

  • 已兑现（fulfilled）: 意味着操作成功完成。

    const FULFILLED = 'fulfilled'

  • 已拒绝（rejected）: 意味着操作失败。

    const REJECTED = 'rejected'

第二步：实现 reject() 和 resolve()

ES6 规定，Promise 对象是一个构造函数，用来生成 Promise 实例。它接受一个函数作为参数，该函数的两个参数分别是 resolve 和 reject。它们也是函数。

// 以构造函数的形式实现
class MyPromise {
  constructor(executor) {
    // 利用 try/catch 捕获错误
    try {
      executor(this.resolve, this.reject)
    } catch (error) {
      this.reject(error)
    }
  }
  // 定义 Promise 初始状态为 PENDING
  status = PENDING
  // resolve 后返回的数据
  data = undefined
  // reject 后返回的原因
  reason = undefined
  // 成功
  resolve = data => {
    // 一旦状态改变，就不能再变
    if (this.status !== PENDING) return
    // 更改状态
    this.status = FULFILLED
    // 保存数据
    this.data = data
  }
  // 失败
  reject = reason => {
    // 一旦状态改变，就不能再变
    if (this.status !== PENDING) return
    // 更改状态
    this.status = REJECTED
    // 保存原因
    this.reason = reason
  }
}

第三步：实现 .then()

.then() 方法是 Promise 的核心之一，异步操作的成功或失败，都可以通过 .then() 添加的回调函数进行处理。并且它将继续返回一个 Promise 对象，这样可以通过多次调用 .then() 添加多个回调函数，它们会按照插入的顺序执行，形成链式调用（chaining）。

class MyPromise {
  // resolve 的回调函数列表
  successCallback = []
  // reject 的回调函数列表
  failureCallback = []
  // 成功
  resolve = data => {
    // 依次调用成功回调
    while (this.successCallback.length) {
      this.successCallback.shift()(this.data)
    }
  }
  // 失败
  reject = reason => {
    // 依次调用失败回调
    while (this.failureCallback.length) {
      this.failureCallback.shift()(this.reason)
    }
  }
  // .then()：处理 resolve 和 reject
  then(onResolved = data => data /*设置默认的成功回调 */, onRejected) {
    // 创建一个新的 Promise 并 return，以供链式调用
    let promise = new MyPromise((resolve, reject) => {
      if (this.status === FULFILLED) {
        // 转换为 异步执行，用来获取 新的 promise
        setTimeout(() => {
          try {
            let value = onResolved(this.data)
            // 判断返回值是普通值还是 Promise
            resolvePromise(promise, value, resolve, reject)
          } catch (error) {
            reject(error)
          }
        }, 0)
      } else if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            let value = onRejected(this.reason)
            resolvePromise(promise, value, resolve, reject)
          } catch (error) {
            reject(error)
          }
        }, 0)
      } else {
        // 将回调函数存入数组中等待被执行
        this.successCallback.push(() => {
          setTimeout(() => {
            try {
              let value = onResolved(this.data)
              resolvePromise(promise, value, resolve, reject)
            } catch (error) {
              reject(error)
            }
          }, 0)
        })
        // 将回调函数存入数组中等待被执行
        this.failureCallback.push(() => {
          setTimeout(() => {
            try {
              let value = onRejected(this.reason)
              resolvePromise(promise, value, resolve, reject)
            } catch (error) {
              reject(error)
            }
          }, 0)
        })
      }
    })
    return promise
  }
}

第四步：实现 .catch()

实现 .then() 之后，.catch() 就会简单很多。事实上，.catch() 只是没有给 fulfilled 状态预留参数位置的 .then() 而已，所以这里我们直接返回一个没有成功回调函数的 .then() 即可。

class MyPromise {
  // .catch()
  catch(onRejected) {
    // 事实上 .catch() 只是没有给 fulfilled 状态预留参数位置的 .then()
    return this.then(undefined, onRejected)
  }
}

第五步：实现 .finally()

有时候我们会在成功或失败执行相同的函数，为了避免了同样的语句需要在中各写一次的情况，所以有了.finally() 方法。也就是说，在 Promise 的结果无论是 fulfilled 或者是 rejected，.finally() 都会执行指定的回调函数。但区别于 .then() 和 .catch()，.finally() 的回调函数中不接收任何参数。

class MyPromise {
  // .finally()
  finally(callback) {
    return this.then(
      data => {
        return MyPromise.resolve(callback().then(() => data))
      },
      err => {
        return MyPromise.resolve(callback()).then(() => {
          throw err
        })
      }
    )
  }
}

第六步：实现 Promise.all()

Promise.all() 方法主要用于集合多个 Promise 的返回结果。

class MyPromise {
  // Promise.all()
  static all(iterable) {
    // 记录执行次数
    let times = 0
    // 保存执行结果
    let result = []
    // Promise.all() 会返回一个 Promise
    return new MyPromise((resolve, reject) => {
      // 记录结果
      function addData(key, value) {
        times++
        result[key] = value
        times === iterable.length && resolve(result)
      }
      // 依次执行，然后将结果保存到数组中
      iterable.forEach((element, index) => {
        // 判断元素是否为 Promise 对象
        element instanceof MyPromise
          ? element.then(
              data => addData(index, data),
              err => reject(err) // 任何一个 Promise 对象的 reject 被执行都会立即 reject()
            )
          : addData(index, element) // 非 promise 的元素将被直接放在返回数组中
      })
    })
  }
}

第七步：实现 Promise.resolve()

Promise.resolve() 方法返回一个以给定值解析后的 Promise 对象。

class MyPromise {
  // Promise.resolve()
  static resolve(value) {
    // 返回一个以给定值解析后的 Promise 对象
    return value instanceof MyPromise
      ? value
      : new MyPromise(resolve => resolve(value))
  }
}

第八步：实现 Promise.reject()

Promise.reject() 方法返回一个带有拒绝原因的 Promise 对象。

class MyPromise {
  // Promise.reject()
  static reject(error) {
    return new MyPromise((resolve, reject) => {
      reject(error)
    })
  }
}

完整代码

// 首先，我们声明它的三种状态
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
// 以构造函数的形式实现
class MyPromise {
  constructor(executor) {
    // 利用 try/catch 捕获错误
    try {
      executor(this.resolve, this.reject)
    } catch (error) {
      this.reject(error)
    }
  }
  // 定义 Promise 初始状态为 PENDING
  status = PENDING
  // resolve 后返回的数据
  data = undefined
  // reject 后返回的原因
  reason = undefined
  // resolve 的回调函数列表
  successCallback = []
  // reject 的回调函数列表
  failureCallback = []
  // 成功
  resolve = data => {
    // 一旦状态改变，就不能再变
    if (this.status !== PENDING) return
    // 更改状态
    this.status = FULFILLED
    // 保存数据
    this.data = data
    // 依次调用成功回调
    while (this.successCallback.length) {
      this.successCallback.shift()(this.data)
    }
  }
  // 失败
  reject = reason => {
    // 一旦状态改变，就不能再变
    if (this.status !== PENDING) return
    // 更改状态
    this.status = REJECTED
    // 保存原因
    this.reason = reason
    // 依次调用失败回调
    while (this.failureCallback.length) {
      this.failureCallback.shift()(this.reason)
    }
  }
  // then：处理 resolve 和 reject
  then(onResolved = data => data /*设置默认的成功回调 */, onRejected) {
    // 创建一个新的 Promise 并 return，以供链式调用
    let promise = new MyPromise((resolve, reject) => {
      if (this.status === FULFILLED) {
        // 转换为 异步执行，用来获取 新的 promise
        setTimeout(() => {
          try {
            let value = onResolved(this.data)
            // 判断返回值是普通值还是 Promise
            resolvePromise(promise, value, resolve, reject)
          } catch (error) {
            reject(error)
          }
        }, 0)
      } else if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            let value = onRejected(this.reason)
            resolvePromise(promise, value, resolve, reject)
          } catch (error) {
            reject(error)
          }
        }, 0)
      } else {
        // 将回调函数存入数组
        this.successCallback.push(() => {
          setTimeout(() => {
            try {
              let value = onResolved(this.data)
              resolvePromise(promise, value, resolve, reject)
            } catch (error) {
              reject(error)
            }
          }, 0)
        })
        // 将回调函数存入数组
        this.failureCallback.push(() => {
          setTimeout(() => {
            try {
              let value = onRejected(this.reason)
              resolvePromise(promise, value, resolve, reject)
            } catch (error) {
              reject(error)
            }
          }, 0)
        })
      }
    })
    return promise
  }
  // .catch()
  catch(onRejected) {
    // 事实上 .catch() 只是没有给 fulfilled 状态预留参数位置的 .then()
    return this.then(undefined, onRejected)
  }
  // .finally()
  finally(callback) {
    return this.then(
      data => {
        return MyPromise.resolve(callback().then(() => data))
      },
      err => {
        return MyPromise.resolve(callback()).then(() => {
          throw err
        })
      }
    )
  }
  // Promise.all()
  static all(iterable) {
    // 记录执行次数
    let times = 0
    // 保存执行结果
    let result = []
    // Promise.all() 会返回一个 Promise
    return new MyPromise((resolve, reject) => {
      // 记录结果
      function addData(key, value) {
        times++
        result[key] = value
        times === iterable.length && resolve(result)
      }
      // 依次执行，然后将结果保存到数组中
      iterable.forEach((element, index) => {
        // 判断元素是否为 Promise 对象
        element instanceof MyPromise
          ? element.then(
              data => addData(index, data),
              err => reject(err) // 任何一个 Promise 对象的 reject 被执行都会立即 reject()
            )
          : addData(index, element) // 非 promise 的元素将被直接放在返回数组中
      })
    })
  }
  // Promise.resolve()
  static resolve(value) {
    // 返回一个以给定值解析后的 Promise 对象
    return value instanceof MyPromise
      ? value
      : new MyPromise(resolve => resolve(value))
  }
  // Promise.reject()
  static reject(error) {
    return new MyPromise((resolve, reject) => {
      reject(error)
    })
  }
}
// 判断 Promise 的返回值类型
function resolvePromise(promise, value, resolve, reject) {
  // 循环调用报错
  if (promise === value) {
    return reject(
      new TypeError('Chaining cycle detected for promise #<Promise>')
    )
  }
  // 如果是 Promise 对象
  if (value instanceof MyPromise) {
    value.then(resolve, reject)
  } else {
    resolve(value)
  }
}
module.exports = MyPromise
风如白话
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js中的promise详解
zyf971020的博客
09-23 6万+
js中的promise详解
JS高级 之 Promise 详解
玄鱼殇
08-08 3214
JS高级 之 Promise 详解
js常见面试题——详解Promise使用与原理及实现过程（附源码）_promise原理
最新发布
2401_84544780的博客
05-13 531
/ 为了处理可能的抛错,不得不将 try catch 套在代码外边，// async 函数会返回一个 promise。// 一旦嵌套变多，代码可读性就会急剧下降。
JavaScript——Promise
Corn___的博客
09-29 1458
JavaScript——Promise
js中的Promise详解
11-30 4282
一 概述 Promise是异步编程的一种解决方案，可以替代传统的解决方案–回调函数和事件。ES6统一了用法，并原生提供了Promise对象。作为对象，Promise有一下两个特点： * （1）对象的状态不受外界影响。 * （2）一旦状态改变了就不会在变，也就是说任何时候Promise都只有一种状态。 二 Promise的状态 Promise有三种状态，分别是：**Pending **（进行中）， ** Resolved (已完成)， Rejected ** (已失败)。Promise从Pending状态开始
【JavaScript】Promise 的使用
Superman_H的博客
03-16 4107
Promise 是一套处理异步场景的规范，能避免回调地狱的产生，使代码更清晰简洁。这套规范最早诞生于前端社区，并被命名为 Promise A+ 规范。参数executor称为执行器，为一回调函数调用resolve，Promise 实例的状态会从 pending 变为 fulfilled；调用reject，Promise 实例的状态会从 pending 变为 rejected；如果不调用resolvereject，则 Promise 实例的状态将一直是 pending。调用resolve。
js代码-手写实现promise
07-15
js代码-手写实现promise
JS手写Promise源码
12-19
4、更好地使用第三方Promise库：手写Promise可以帮助我们更好地使用和理解第三方的Promise库，如Bluebird或q.js等。通过手动实现Promise，我们可以更好地理解这些库是如何实现Promise的，并更好地使用它
Promise_js手写promise_js手写Promise_手写Promise_JS手写Promise_
09-30
原生js手写Promise
手写Promise.js
11-13
Promise的手写代码，请配合博客《JavaScprit》异步编程（三）深入浅出Promise使用
JS手写一个自定义Promise操作示例
10-15
在面试中，经常会被要求手写一个简单的Promise实现来理解其工作原理。以下是一个基于class的自定义Promise（命名为MyPromise）的详细解释。 首先，`MyPromise`构造函数接收一个执行器函数`executor`作为参数。这个...
JS系列 (十) - Promise用法的详细解析
qq_44376306的博客
01-29 202
第一，我们需要自己来设计回调函数、回调函数的名称、回调函数的使用等；第二，对于不同的人、不同的框架设计出来的方案是不同的，那么我们必须耐心去看别人的源码或者文档，以便可以理解它这个函数到底怎么用；我们来看一下Promise的API是怎么样的：Promise是一个类，可以翻译成承诺、许诺 、期约；当我们需要给予调用者一个承诺：待会儿我会给你回调数据时，就可以创建一个Promise的对象；在通过new创建Promise对象时，我们需要传入一个回调函数，我们称之为executor。
js的promise用法
weixin_44992737的博客
07-29 6239
js的promise
js-手写Promise
qq_32644987的博客
06-12 984
1、Promise 创建MyPromise.js文件，在里面进行MyPromise逻辑处理 我们先看原生Promise的使用： new Promise((resolve,reject) => { }) 有代码可以看出：原生Promise通过new创建Promise对象，然后传入两个函数resolve、reject参数用于后续执行； 好的，那我们从这方面开始手写MyPromise。 首先，需要通过new创建对象，那就需要在内部实现构造函数 其次构造函数需要传入两个函数作为执行者 Pormi
JavaScript ------ Promise原理及简单实现
qq_23355915的博客
09-01 234
JavaScript ------ Promise原理及简单实现
JavaScript之Promise的实现
weixin_47303886的博客
09-29 761
什么是Promise对象 Promise对象代表了未来将来发生的事件，用来传递异步操作的信息。简单来说，Promise就是用来处理异步操作的。 为什么要使用Promise对象 在没有Promise对象之前，我们是如何
Javascript - Promise的实现过程
qq_42181069的博客
12-16 1154
一、认识Promise Promise是一个类，可以翻译成 承诺、许诺 、期约 当我们需要给予调用者一个承诺:待会儿我会给你回调数据时，就可以创建一个Promise的对象 二、Promise的状态 待定(pending) 完成(fulfilled) 拒绝(rejected) 一旦状态被确定下来，Promise的状态会被 锁死，该Promise的状态是不可更改的 三、其他promise的API建议自己查询文档，本文只注重功能的实现 四、代码实现步骤： 1、代码结构的...
Promise（手动实现）
风起
09-25 804
文章目录1. `Promise`1.1 `Promise` 的 基本使用1.1.1 创建1.1.2 静态方法1.1.3` then`、`catch`1.1.4 `finally`1.2 `Promise`实现1.2.1 确定成员函数和成员变量1.2.2 准备工作1.2.3 定义状态1.2.4 定义`MP`的结构1.2.5 实现`MpPrototype`1.2.5.1 实现`resolve`和`reject`函数1.2.5.2 实现`then`1.2.5.3 进一步完善`resolve`和`reject`函数
js手动实现promise
weixin_34248118的博客
01-09 200
let promise = new Promise((resolve111, reject) => { //这里放入我们要执行的函数，可能是同步，也可能是异步, 这里我们就来写一个异步的执行 setTimeout(() => { resolve111('hello'); }, 100) ...
js手写实现promise.all
08-18
当然，我可以帮你手写实现 `Promise.all`。以下是一个简单的实现示例： ```javascript function promiseAll(promises) { return new Promise((resolve, reject) => { const results = []; let completedPromises...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

风如白话

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值