手把手教你如何写一个Promise

已于 2023-08-28 14:37:31 修改
阅读量196 收藏
点赞数
分类专栏： 前端开发 文章标签： 前端 javascript
于 2023-08-23 15:56:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36026686/article/details/132434310
版权

Promise是一种用于处理异步操作的机制，它可以将异步操作的结果以同步的方式进行处理和返回。在JavaScript中，Promise是一种内置对象，但我们也可以手动实现一个Promise类来更好地理解其原理和工作方式。

一、Promise的特性

首先，让我们来介绍一下：

  1. Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。初始状态为 pending，当异步操作完成时，可以变为 fulfilled或 rejected。
  2. Promise 具有链式调用的特性。通过then方法可以注册回调函数，在异步操作完成后执行这些回调函数。then方法返回一个新的Promise对象，使得多个异步操作可以按顺序执行。
  3. Promise可以通过resolve方法将状态从pending变为fulfilled，并传递一个值作为成功的结果；也可以通过reject方法将状态从pending变为rejected，并传递一个原因作为失败的结果。
  4. Promise可以通过catch方法捕获错误，并处理错误情况。
  5. Promise还提供了一些静态方法，如resolve、reject、all和race等。其中，resolve方法返回一个已经成功的Promise对象；reject方法返回一个已经失败的Promise对象；all方法接收一个包含多个Promise对象的数组，并在所有Promise对象都成功时返回一个包含所有结果的新Promise对象；race方法接收一个包含多个Promise对象的数组，并在任意一个Promise对象成功或失败时返回相应结果。

接下来，我们从源码角度讲解一下手写的Promise类。

二、手写Promise

定义常量

首先，我们定义了三个常量：PENDING表示promise的初始状态，FULFILLED表示promise成功的状态，REJECTED表示promise失败的状态。

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

定义MyPromise类

接下来，我们定义了一个MyPromise类，该类拥有以下属性：

  • state：表示promise的当前状态，默认为PENDING。
  • value：表示promise成功时的返回值，默认为undefined。
  • reason：表示promise失败时的错误原因，默认为undefined。
  • onFulfilledCallbacks：用于存储成功回调函数的数组。
  • onRejectedCallbacks：用于存储失败回调函数的数组。

构造函数（constructor）中接受一个executor函数作为参数，该函数接受两个参数：resolve和reject。我们在构造函数中定义了resolve和reject函数，并将它们传递给executor函数。如果executor函数执行成功，则调用resolve函数，如果执行失败，则调用reject函数。

class MyPromise {
  constructor(executor) {
    this.state = PENDING
    this.value = undefined
    this.reason = undefined
    this.onFulfilledCallbacks = []
    this.onRejectedCallbacks = []

    const resolve = (value) => {
      if (this.state = PENDING) {
        this.state = FULFILLED
        this.value = value
        this.onFulfilledCallbacks.forEach(fn => fn())
      }
    }

    const reject = (reason) => {
      if (this.state === PENDING) {
        this.state = REJECTED
        this.reason = reason
        this.onRejectedCallbacks.forEach(fn => fn())
      }
    }

    try {
      executor(resolve, reject)
    } catch (err) {
      reject(err)
    }
  }
}
  1. 在resolve函数中，我们首先判断promise的当前状态是否为PENDING。如果是，那么将状态改为FULFILLED并将返回值赋给value属性，并依次调用成功回调数组中的回调函数。
  2. 在reject函数中，同样首先判断promise的当前状态是否为PENDING。如果是，那么将状态改为REJECTED并将错误原因赋给reason属性，并依次调用失败回调数组中的回调函数。
  3. 在构造函数的末尾，通过try-catch语句执行executor函数。如果执行过程中有错误抛出，那么调用reject函数将错误原因赋给reason属性。

resolve和reject

接下来是resolve和reject方法的实现。resolve方法将状态从pending变为fulfilled，并传递一个值作为成功的结果；reject方法将状态从pending变为rejected，并传递一个原因作为失败的结果。

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

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

then

  • 在then方法中，我们创建了一个新的MyPromise实例promise2，并在其构造函数中定义了resolve和reject函数。

  • 根据当前promise的状态，分别处理不同的情况：

    • 如果当前状态是PENDING，那么将onFulfilled和onRejected回调函数分别推入onFulfilledCallbacks和onRejectedCallbacks数组中。
    • 如果当前状态是FULFILLED，那么异步地执行onFulfilled回调，并根据返回值调用resolve或reject函数。
    • 如果当前状态是REJECTED，那么异步地执行onRejected回调，并根据返回值调用resolve或reject函数。

  • 最后，返回promise2实例。

then(onFulfilled, onRejected) {
    if (typeof onFulfilled !== 'function') {
      onFulfilled = function (value) {
        return value
      }
    }

    if (typeof onRejected !== 'function') {
      onRejected = function (reason) {
        throw reason
      }
    }

    let promise2 = new MyPromise((resolve, reject) => {
      switch (this.state) {
        case PENDING:
          this.onFulfilledCallbacks.push(() => {
            setTimeout(() => {
              try {
                const value = onFulfilled(this.value)
                resolve(value)
              } catch (err) {
                reject(err)
              }
            }, 0)
          })
          this.onRejectedCallbacks.push(() => {
            setTimeout(() => {
              try {
                const value = onRejected(this.reason)
                resolve(value)
              } catch (err) {
                reject(err)
              }
            }, 0)
          })
          break
        case FULFILLED:
          setTimeout(() => {
            try {
              const value = onFulfilled(this.value)
              resolve(value)
            } catch (err) {
              reject(err)
            }
          }, 0)
          break
        case REJECTED:
          setTimeout(() => {
            try {
              const value = onRejected(this.reason)
              resolve(value)
            } catch (err) {
              reject(err)
            }
          }, 0)
          break
      }
    })
    return promise2
  }

catch和finally

  1. catch方法是then方法的一个语法糖，用于捕获promise链中的错误。它接受一个参数onRejected，表示失败的回调函数，然后调用then方法，并将onRejected作为第二个参数传入。
  2. finally方法是then方法的另一个语法糖，无论promise的状态是成功还是失败，都会执行finally方法中的回调函数。它接受一个参数fn，并在then方法中通过两个回调函数分别调用fn，并根据返回值执行resolve或reject函数
  catch(onRejected) {
    return this.then(null, onRejected)
  }

  finally(fn) {
    return this.then(
      (value) => {
        fn()
        return value
      },
      (reason) => {
        fn()
        throw reason
      }
    )
  }

all和race

  • all方法接受一个promise数组作为参数，返回一个新的MyPromise实例。当所有 promise 都成功时，返回一个包含所有成功值的数组；否则，返回一个包含第一个失败的 promise 的错误原因的新的 MyPromise 实例。
  • race方法接受一个promise数组作为参数，返回一个新的MyPromise实例。当任何一个promise成功时，返回该成功的promise的值；否则，返回第一个失败的promise的错误原因的新的MyPromise实例。
  static all(promises) {
    return new Promise((resolve, reject) => {
      if (promises.length === 0) {
        resolve([])
      } else {
        let result = []
        for (let i = 0;i < promises.length; i++) {
          promises[i].then(
            data => {
              result[i] = data
              if (result.length === promises.length) {
                resolve(result)
              }
            },
            err => {
              reject(err)
              return
            }
          )
        }
      }
    })
  }

  static race(promises) {
    return new Promise((resolve, reject) => {
      if (promises.length === 0) {
        resolve()
      } else {
        for (let i = 0; i < promises.length; i++) {
          promises[i].then(
            data => {
              resolve(data)
            },
            (err) => {
              reject(err)
              return
            }
          )
        }
      }
    })
  }

三、完整版MyPromise

const PENDING = 'pending'  // 声明一个常量PENDING，表示Promise的初始状态
const FULFILLED = 'fulfilled'  // 声明一个常量FULFILLED，表示Promise的成功状态
const REJECTED = 'rejected'  // 声明一个常量REJECTED，表示Promise的失败状态

class MyPromise {
  constructor(executor) {
    this.state = PENDING  // 初始化Promise的状态为PENDING
    this.value = undefined  // 初始化Promise的值为undefined
    this.reason = undefined  // 初始化Promise的失败原因为undefined
    this.onFulfilledCallbacks = []  // 存储Promise成功状态下的回调函数
    this.onRejectedCallbacks = []  // 存储Promise失败状态下的回调函数

    // 定义resolve函数，用于将Promise状态改为FULFILLED，并执行成功状态下的回调函数
    const resolve = (value) => {
      if (this.state = PENDING) {
        this.state = FULFILLED  // 将Promise状态改为FULFILLED
        this.value = value  // 存储Promise成功时的值
        this.onFulfilledCallbacks.forEach(fn => fn())  // 执行所有成功状态下的回调函数
      }
    }

    // 定义reject函数，用于将Promise状态改为REJECTED，并执行失败状态下的回调函数
    const reject = (reason) => {
      if (this.state === PENDING) {
        this.state = REJECTED  // 将Promise状态改为REJECTED
        this.reason = reason  // 存储Promise失败时的原因
        this.onRejectedCallbacks.forEach(fn => fn())  // 执行所有失败状态下的回调函数
      }
    }

    try {
      executor(resolve, reject)  // 执行executor函数，并传入resolve和reject参数
    } catch (err) {
      reject(err)  // 捕获错误，并将Promise状态改为REJECTED
    }
  }

  // 静态方法resolve，返回一个状态为FULFILLED的Promise实例
  static resolve(value) {
    return new MyPromise((resolve, reject) => {
      resolve(value)
    })
  }

  // 静态方法reject，返回一个状态为REJECTED的Promise实例
  static reject(reason) {
    return new MyPromise((resolve, reject) => {
      reject(reason)
    })
  }

  // 静态方法all，接收一个包含多个Promise实例的数组，返回一个新的Promise实例
  static all(promises) {
    return new Promise((resolve, reject) => {
      if (promises.length === 0) {
        resolve([])  // 如果传入的数组为空，则直接返回一个状态为FULFILLED的Promise实例
      } else {
        let result = []  // 存储每个Promise实例的执行结果
        for (let i = 0;i < promises.length; i++) {
          promises[i].then(
            data => {
              result[i] = data  // 将每个Promise实例的执行结果存入result数组中
              if (result.length === promises.length) {
                resolve(result)  // 当所有Promise实例都执行完毕时，返回包含所有结果的新的Promise实例
              }
            },
            err => {
              reject(err)  // 如果其中一个Promise实例执行失败，则将新的Promise实例的状态改为REJECTED，并返回失败原因
              return
            }
          )
        }
      }
    })
  }

  // 静态方法race，接收一个包含多个Promise实例的数组，返回一个新的Promise实例
  static race(promises) {
    return new Promise((resolve, reject) => {
      if (promises.length === 0) {
        resolve()  // 如果传入的数组为空，则直接返回一个状态为FULFILLED的Promise实例
      } else {
        for (let i = 0; i < promises.length; i++) {
          promises[i].then(
            data => {
              resolve(data)  // 返回第一个执行完毕的Promise实例的结果
            },
            (err) => {
              reject(err)  // 如果其中一个Promise实例执行失败，则将新的Promise实例的状态改为REJECTED，并返回失败原因
              return
            }
          )
        }
      }
    })
  }

  // then方法，用于在Promise的成功和失败状态下执行回调函数，返回一个新的Promise实例
  then(onFulfilled, onRejected) {
    // 如果onFulfilled不是一个函数，则将其更改为返回接收到的值的函数
    if (typeof onFulfilled !== 'function') {
      onFulfilled = function (value) {
        return value
      }
    }

    // 如果onRejected不是一个函数，则将其更改为抛出接收到的原因的函数
    if (typeof onRejected !== 'function') {
      onRejected = function (reason) {
        throw reason
      }
    }

    let promise2 = new MyPromise((resolve, reject) => {
      switch (this.state) {
        // 如果Promise当前的状态是PENDING，则将回调函数添加到对应的回调数组中
        case PENDING:
          this.onFulfilledCallbacks.push(() => {
            setTimeout(() => {
              try {
                const value = onFulfilled(this.value)
                resolve(value)
              } catch (err) {
                reject(err)
              }
            }, 0)
          })
          this.onRejectedCallbacks.push(() => {
            setTimeout(() => {
              try {
                const value = onRejected(this.reason)
                resolve(value)
              } catch (err) {
                reject(err)
              }
            }, 0)
          })
          break
        // 如果Promise当前的状态是FULFILLED，则直接执行成功回调函数
        case FULFILLED:
          setTimeout(() => {
            try {
              const value = onFulfilled(this.value)
              resolve(value)
            } catch (err) {
              reject(err)
            }
          }, 0)
          break
        // 如果Promise当前的状态是REJECTED，则直接执行失败回调函数
        case REJECTED:
          setTimeout(() => {
            try {
              const value = onRejected(this.reason)
              resolve(value)
            } catch (err) {
              reject(err)
            }
          }, 0)
          break
      }
    })
    return promise2
  }

  // catch方法，用于捕获Promise的失败状态，并执行回调函数
  catch(onRejected) {
    return this.then(null, onRejected)
  }

  // finally方法，无论Promise状态是成功还是失败，都会执行回调函数
  finally(fn) {
    return this.then(
      (value) => {
        fn()
        return value
      },
      (reason) => {
        fn()
        throw reason
      }
    )
  }
}

郑能量！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Promise学习-手写一个promise
水蓝针织
10-09 1557
学习了Promise的A+规范，以及手写一个Promise后，我对Promise学到的结果。 平常也有用到过promise来处理异步，先回顾下promise的用法 const myPromise = new Promise((resolve,reject) => { //写一些异步操作，比如ajax请求 if(window.onError){ reject('页面加载失败'); } setTimeout(() => { resolve('异步返回结果'); }, 1000)
手写Promise的基本实现 （超详细）
qq_48554377的博客
09-22 7002
手写Promise的基本实现 （超详细） 面试必备！ 本文带大家实现一个基本的 promise 过多的边界情况就不在考虐,理解主要实现过程以及逻辑即可 对于一个个出现的问题我会逐步分析原因以及对应的解决思路
【JavaScript】手写Promise
编码世界
05-15 4097
面试中经常会被问到你会手写Promise吗？本文带你手撸Promsie
如何手写一个promise实例
最新发布
BradenHan的专栏
02-14 374
TOC/TOC。
手写Promise
XunLin233的博客
05-30 1892
在index.html中编写如下代码resolve("执行成功");})})创建一个promise.js文件在index.html中引入1. Promise能够通过new的方式调用，所以Promise是构造函数的形式。2. 构造Promise实例的时候传过去了一个函数，使用executor（执行器函数接收这个形参）。3. Promise实例能够调用then方法，所以在构造函数的原型上要添加then方法。4. then方法接收两个函数。// Promsie构造函数// 添加then方法。
Promise
庸人方自扰，自在就好
05-23 839
ECMAscript 6 原生提供了 Promise 对象。 Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。 Promise 对象有以下两个特点: 1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态： pending: 初始状态，不是成功或失败状态。 fulfilled: 意味着操作成功完成。 rejected: 意味着操作失败。 只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英
Promise的多种写法
qq_52242662的博客
03-18 1730
Promise的简化写法，以及all函数的介绍
promise的创建
misikamikirto的博客
06-30 250
同过future和promise来实现线程间的通信，不需要使用互斥量和条件变量等。以上是介绍了主线程与子线程之间的通信，下面介绍子线程与子线程之间的通信。有承诺才有未来，承诺做为一个参数，承诺的东西做完之后，才会有未来。promise（承诺）<------> future（未来）promise像是一个容器，来承接参数。
promise对象
Asrty的博客
10-09 205
什么是promise?
Promise的两种写法
qq_45200669的博客
10-29 2805
第一种 //参数 -> 函数(resolve, reject) //resolve, reject本身也是函数 new Promise(resolve => { setTimeout(() => { resolve("aaa") }, 3000) }).then(res => { console.log(res, '第一次请求的结果') return new Promise(resolve => { .
手把手教你写一个微信小程序
02-24
现在微信小程序越来越火，...先创建一个空文件夹然后打开开发者工具，新建项目，按需选择启动模板，这里选择的是建立普通快速启动模板点击确定后，你的小程序就创建好啦。默认的项目结构关于默认项目结构里的介绍，我
222-手把手带你写一个MiniSpring
05-06
222-手把手带你写一个MiniSpring
手把手教你创造第一个自己的GPTs应用.pdf
11-13
手把手教你创造第一个自己的GPTs应用.pdf
手把手教你写扩展卡尔曼滤波器.pdf
11-22
扩展卡尔曼滤波器的原理以及C语言实现
300秒带你手写一个promise
小陈的博客
05-18 5919
前言 为什么要写这一篇文章？ 加深对promise的理解，以及再实际工作中的灵活运用。 知其然，知其所以然。 面试需要。（重点！！！） 1:声明promise 首先我们先来聊聊promise的几个特性： 一个promise有三种状态：pengding,fulfilled，rejected. promise状态一旦被改变，就不允许被改变了。 new Promise构造函数接受一个函数参数，这个函数有两个参数分别为resole和reject函数。 其实代码很好写，我们就来检验以下resolve的参数是否
简单易懂的Promise基础教程（小白入门）
潮汐未见潮落的博客
06-13 5791
promise的入门基础知识，简单了解promise的三种状态
手写一个简单的Promise
u011393161的博客
11-22 3484
今天突发奇想，想自己写个Promise来玩，一说要写还真反应不过来怎么开始，总之先看看Promise是怎么用的好了。 let pp= new Promise((resolve, reject) =&amp;amp;gt; { resolve('done'); }); pp.then((value) =&amp;amp;gt; { console.log(value); }).catch((e)=&amp;amp;gt;{ cons...
根据PromiseA+手写一个Promise类
wxy270的博客
03-13 619
什么是PromisePromise 是一个构造函数， new Promise 返回一个 promise对象 接收一个excutor执行函数作为参数, excutor有两个函数类型形参resolve reject其用法是let p = new Promise(function (resolve,reject){ resolve("这是promise")     reject("这个不执行")...
手把手教你写一个ios app
07-28
以下是一步一步教你如何编写一个iOS应用的简要指南： 1. 了解基本知识： 在开始编写iOS应用之前，你需要了解一些基本的编程概念和iOS开发环境。学习Objective-C或Swift编程语言、熟悉Xcode集成开发环境以及掌握基本...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值