Promise的实现

原创 于 2024-02-27 15:29:37 发布 · 986 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #开发语言

部署运行你感兴趣的模型镜像

1. 先来看个例子，看一下Promise有什么特性：

在这里插入图片描述
根据上面例子，我们发现Promise有以下特点：

Promise的四个特点：

  1. 执行了resolve，Promise状态会变成fulfilled；
  2. 执行了reject，Promise状态会变成rejected；
  3. Promise状态不可逆，第一次成功就永久为fulfilled，第一次失败就永远状态为rejected；
  4. Promise中有throw的话，就相当于执行了reject；

2. 实现resolve和reject

  1. Promise的初始状态是pending；

  2. 需要对resolve和reject绑定this：确保resolve和reject的this指向永远指向当前的MyPromise实例，防止随着函数执行环境的改变而改变；

  3. Promise中有throw的话，就相当于执行了reject。这就要使用try catch了

    Promise有三种状态：

    • pending：等待中，是初始状态；
    • fulfilled：成功状态；
    • rejected：失败状态；
      一旦状态从pending变为fulfilled或者rejected，那么此Promise实例的状态就不可以改变了。
class MyPromise {
    // 构造方法
    constructor(executor) {
        // 初始化值
        this.initValue()
        // 初始化this指向
        this.initBind()
        try {
            // 执行传进来的函数
            executor(this.resolve, this.reject)
        } catch (e) {
            // 捕捉到错误直接执行reject
            this.reject(e)
        }
    }

    initBind() {
        // 初始化this
        this.resolve = this.resolve.bind(this)
        this.reject = this.reject.bind(this)
    }

    initValue() {
        // 初始化值
        this.PromiseResult = null // 终值
        this.PromiseState = 'pending' // 状态
    }

    resolve(value) {
        // state是不可变的
        if (this.PromiseState !== 'pending') return
        // 如果执行resolve，状态变为fulfilled
        this.PromiseState = 'fulfilled'
        // 终值为传进来的值
        this.PromiseResult = value
    }

    reject(reason) {
        // state是不可变的
        if (this.PromiseState !== 'pending') return
        // 如果执行reject，状态变为rejected
        this.PromiseState = 'rejected'
        // 终值为传进来的reason
        this.PromiseResult = reason
    }
}

测试如下：

const test1 = new MyPromise((resolve, reject) => {
    resolve('success')
})
console.log(test1) // MyPromise { PromiseState: 'fulfilled', PromiseResult: 'success' }

const test2 = new MyPromise((resolve, reject) => {
    reject('fail')
})
console.log(test2) // MyPromise { PromiseState: 'rejected', PromiseResult: 'fail' }

3. then的使用

// 马上输出 ”success“
const p1 = new Promise((resolve, reject) => {
    resolve('success')
}).then(res => console.log(res), err => console.log(err))

// 1秒后输出 ”fail“
const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject('fail')
    }, 1000)
}).then(res => console.log(res), err => console.log(err))

// 链式调用 输出 200
const p3 = new Promise((resolve, reject) => {
    resolve(100)
}).then(res => 2 * res, err => console.log(err))
  .then(res => console.log(res), err => console.log(err))

根据上述代码可以确定：

  1. then接收两个回调，一个是成功回调，一个是失败回调；
  2. 当Promise状态为fulfilled执行成功回调，为rejected执行失败回调；
  3. 如resolve或reject在定时器里，则定时器结束后再执行then；
  4. then支持链式调用，下一次then执行受上一次then返回值的影响；

4. then的实现

class MyPromise {
  // 构造方法
  constructor(executor) {

      // 初始化值
      this.initValue()
      // 初始化this指向
      this.initBind()
      try {
          // 执行传进来的函数
          executor(this.resolve, this.reject)
      } catch (e) {
          // 捕捉到错误直接执行reject
          this.reject(e)
      }
  }

  initBind() {
      // 初始化this
      this.resolve = this.resolve.bind(this)
      this.reject = this.reject.bind(this)
  }

  initValue() {
      // 初始化值
      this.PromiseResult = null // 终值
      this.PromiseState = 'pending' // 状态
      this.onFulfilledCallbacks = []
      this.onRejectedCallbacks = []
  }

  resolve(value) {
      // state是不可变的
      if (this.PromiseState !== 'pending') return
      // 如果执行resolve，状态变为fulfilled
      this.PromiseState = 'fulfilled'
      // 终值为传进来的值
      this.PromiseResult = value
      while (this.onFulfilledCallbacks.length){
        this.onFulfilledCallbacks.shift()(this.PromiseResult)
      }
  }

  reject(reason) {
      // state是不可变的
      if (this.PromiseState !== 'pending') return
      // 如果执行reject，状态变为rejected
      this.PromiseState = 'rejected'
      // 终值为传进来的reason
      this.PromiseResult = reason
      while (this.onRejectedCallbacks.length){
        this.onRejectedCallbacks.shift()(this.PromiseResult)
      }
  }

  then(onFulfilled, onRejected){
    onFulfilled = typeof onFulfilled == "function" ? onFulfilled : val => val;
    onRejected = typeof onRejected == "function" ? onRejected : reason => { throw reason };

    if(this.PromiseState == 'fulfilled'){
      onFulfilled(this.PromiseResult)
    }else if(this.PromiseState == 'rejected'){
      onRejected(this.PromiseResult)
    }else if(this.PromiseState == 'pending'){
      this.onFulfilledCallbacks.push(onFulfilled)
      this.onRejectedCallbacks.push(onRejected)
    }
  }
}

5. 链式调用

then支持链式调用，下一次then执行受上一次then返回值的影响，给大家举个例子：

// 链式调用 输出 200
const p3 = new Promise((resolve, reject) => {
  resolve(100)
}).then(res => 2 * res, err => console.log(err))
  .then(res => console.log(res), err => console.log(err))

// 链式调用 输出300
const p4 = new Promise((resolve, reject) => {
  resolve(100)
}).then(res => new Promise((resolve, reject) => resolve(3 * res)), err => console.log(err))
  .then(res => console.log(res), err => console.log(err))

根据上文，可以得到：

  1. then方法本身会返回一个新的Promise对象；
  2. 如果返回值是promise对象，返回值为成功，新promise就是成功；
  3. 如果返回值是promise对象，返回值为失败，新promise就是失败；
  4. 如果返回值非promise对象，新promise对象就是成功，值为此返回值；
class MyPromise {
    // 构造方法
    constructor(executor) {

        // 初始化值
        this.initValue()
        // 初始化this指向
        this.initBind()
        try {
            // 执行传进来的函数
            executor(this.resolve, this.reject)
        } catch (e) {
            // 捕捉到错误直接执行reject
            this.reject(e)
        }
    }

    initBind() {
        // 初始化this
        this.resolve = this.resolve.bind(this)
        this.reject = this.reject.bind(this)
    }

    initValue() {
        // 初始化值
        this.PromiseResult = null // 终值
        this.PromiseState = 'pending' // 状态
        this.onFulfilledCallbacks = [] // 保存成功回调
        this.onRejectedCallbacks = [] // 保存失败回调
    }

    resolve(value) {
        // state是不可变的
        if (this.PromiseState !== 'pending') return
        // 如果执行resolve，状态变为fulfilled
        this.PromiseState = 'fulfilled'
        // 终值为传进来的值
        this.PromiseResult = value
        // 执行保存的成功回调
        while (this.onFulfilledCallbacks.length) {
            this.onFulfilledCallbacks.shift()(this.PromiseResult)
        }
    }

    reject(reason) {
        // state是不可变的
        if (this.PromiseState !== 'pending') return
        // 如果执行reject，状态变为rejected
        this.PromiseState = 'rejected'
        // 终值为传进来的reason
        this.PromiseResult = reason
        // 执行保存的失败回调
        while (this.onRejectedCallbacks.length) {
            this.onRejectedCallbacks.shift()(this.PromiseResult)
        }
    }

    then(onFulfilled, onRejected) {
        // 接收两个回调 onFulfilled, onRejected

        // 参数校验，确保一定是函数
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : val => val
        onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason }

		var resolvePromise;
        var thenPromise = new MyPromise((resolve, reject) => {

            resolvePromise = cb => {
                try {
                    const x = cb(this.PromiseResult)
                    if (x === thenPromise) {
                        // 不能返回自身哦
                        throw new Error('不能返回自身。。。')
                    }
                    if (x instanceof MyPromise) {
                        // 如果返回值是Promise
                        // 如果返回值是promise对象，返回值为成功，新promise就是成功
                        // 如果返回值是promise对象，返回值为失败，新promise就是失败
                        // 谁知道返回的promise是失败成功？只有then知道
                        x.then(resolve, reject)
                    } else {
                        // 非Promise就直接成功
                        resolve(x)
                    }
                } catch (err) {
                    // 处理报错
                    reject(err)
                    throw new Error(err)
                }
            }

            if (this.PromiseState === 'fulfilled') {
                // 如果当前为成功状态，执行第一个回调
                resolvePromise(onFulfilled)
            } else if (this.PromiseState === 'rejected') {
                // 如果当前为失败状态，执行第二个回调
                resolvePromise(onRejected)
            } else if (this.PromiseState === 'pending') {
                // 如果状态为待定状态，暂时保存两个回调
                // 如果状态为待定状态，暂时保存两个回调
                this.onFulfilledCallbacks.push(resolvePromise.bind(this, onFulfilled))
                this.onRejectedCallbacks.push(resolvePromise.bind(this, onRejected))
            }
        })

        // 返回这个包装的Promise
        return thenPromise

    }
}

6. 执行顺序

then方法是微任务，这里为了实现类似的功能，使用setTimeout代替（setTimeout为宏任务，此处主要跟在全局上的console对比）
至此，完整的代码为：

class MyPromise {
    // 构造方法
    constructor(executor) {

        // 初始化值
        this.initValue()
        // 初始化this指向
        this.initBind()
        try {
            // 执行传进来的函数
            executor(this.resolve, this.reject)
        } catch (e) {
            // 捕捉到错误直接执行reject
            this.reject(e)
        }
    }

    initBind() {
        // 初始化this
        this.resolve = this.resolve.bind(this)
        this.reject = this.reject.bind(this)
    }

    initValue() {
        // 初始化值
        this.PromiseResult = null // 终值
        this.PromiseState = 'pending' // 状态
        this.onFulfilledCallbacks = [] // 保存成功回调
        this.onRejectedCallbacks = [] // 保存失败回调
    }

    resolve(value) {
        // state是不可变的
        if (this.PromiseState !== 'pending') return
        // 如果执行resolve，状态变为fulfilled
        this.PromiseState = 'fulfilled'
        // 终值为传进来的值
        this.PromiseResult = value
              // 执行保存的成功回调
        while (this.onFulfilledCallbacks.length) {
            this.onFulfilledCallbacks.shift()(this.PromiseResult)
        }
    }

    reject(reason) {
        // state是不可变的
        if (this.PromiseState !== 'pending') return
        // 如果执行reject，状态变为rejected
        this.PromiseState = 'rejected'
        // 终值为传进来的reason
        this.PromiseResult = reason
        // 执行保存的失败回调
        while (this.onRejectedCallbacks.length) {
            this.onRejectedCallbacks.shift()(this.PromiseResult)
        }
    }

    then(onFulfilled, onRejected) {
        // 接收两个回调 onFulfilled, onRejected

        // 参数校验，确保一定是函数
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : val => val
        onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason }

		var resolvePromise
        var thenPromise = new MyPromise((resolve, reject) => {

            resolvePromise = cb => {
              setTimeout(() => {
                try {
                  const x = cb(this.PromiseResult)
                  if (x === thenPromise) {
                    // 不能返回自身哦
                    throw new Error('不能返回自身。。。')
                  }
                  if (x instanceof MyPromise) {
                    // 如果返回值是Promise
                    // 如果返回值是promise对象，返回值为成功，新promise就是成功
                    // 如果返回值是promise对象，返回值为失败，新promise就是失败
                    // 谁知道返回的promise是失败成功？只有then知道
                    x.then(resolve, reject)
                  } else {
                    // 非Promise就直接成功
                    resolve(x)
                  }
                } catch (err) {
                  // 处理报错
                  reject(err)
                  throw new Error(err)
                }
              })
            }

            if (this.PromiseState === 'fulfilled') {
                // 如果当前为成功状态，执行第一个回调
                resolvePromise(onFulfilled)
            } else if (this.PromiseState === 'rejected') {
                // 如果当前为失败状态，执行第二个回调
                resolvePromise(onRejected)
            } else if (this.PromiseState === 'pending') {
                // 如果状态为待定状态，暂时保存两个回调
                // 如果状态为待定状态，暂时保存两个回调
                this.onFulfilledCallbacks.push(resolvePromise.bind(this, onFulfilled))
                this.onRejectedCallbacks.push(resolvePromise.bind(this, onRejected))
            }
        })

        // 返回这个包装的Promise
        return thenPromise

    }
}

测试一下：

const test4 = new MyPromise((resolve, reject) => {
    resolve(1)
}).then(res => console.log(res), err => console.log(err))

console.log(2) // 2 1

7. 其他方法

7.1 all
  • 接收一个Promise数组，数组中如有非Promise项，则此项当做成功;
  • 如果所有Promise都成功，则返回成功结果数组；
  • 如果有一个Promise失败，则返回这个失败结果；
7.2 race
  • 接收一个Promise数组，数组中如有非Promise项，则此项当做成功；
  • 哪个Promise最快得到结果，就返回那个结果，无论成功失败；
7.3 allSettled
  • 接收一个Promise数组，数组中如有非Promise项，则此项当做成功；
  • 把每一个Promise的结果，集合成数组后返回；
7.4 any

与all相反

  • 接收一个Promise数组，数组中如有非Promise项，则此项当做成功；
  • 如果有一个Promise成功，则返回这个成功结果；
  • 如果所有Promise都失败，则报错；

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

实现篇：一文搞懂Promise是如何实现的
独立开发，个人小站：ai-bar.cn，网站中还有最近开发得一个写作软件（竹记），欢迎体验交流
04-19 1148
了解原理之Promise完整实现，包括最新的 try 静态方法，一共仅140行代码左右，示例可复制到本地运行
Jquery promise实现一张一张加载图片
10-23
在使用jQuery实现图片连续加载功能的过程中，我们利用了Promise模式来控制异步操作的流程。Promise是一种在现代JavaScript中广泛采用的处理异步操作的模式，它允许开发者以更直观的方式编写非阻塞代码。 Promise...
简单promise的实现
Goodbye_的博客
01-21 365
在实现promise之前，先简单的回顾一下promise Promise 对象有以下两个特点: 1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态： pending: 初始状态，不是成功或失败状态。 fulfilled: 意味着操作成功完成。 rejected: 意味着操作失败。 只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是「承诺」，表示其他手段无法改变。 2、一旦状态改变，就不.
promise简单实现
qq_39692513的博客
06-16 1252
promise简单实现
promise实现原理
11-13
上述代码展示了基本的Promise实现。需要注意的是，实际的Promise还包含`catch`、`finally`、`async/await`等高级功能，以及错误传播、微任务调度等复杂逻辑。在实现这些功能时，我们需要考虑错误捕获、链式调用中的...
掌握异步编程：JavaScript自定义Promise实现与应用
11-04
自定义Promise实现的关键在于理解如何处理异步操作的完成情况，以及如何通过回调函数处理成功或失败的结果。自定义Promise实例可以包含一个处理器数组，用于存储`.then()`方法注册的回调函数。当Promise状态变为...
Promise-tests:一系列测试看哪个Promise实现更快
06-14
Promise-tests项目旨在通过一系列测试比较不同Promise实现的性能，帮助开发者选择最适合他们项目的实现。 Promise的核心在于它有三种状态：pending（等待中）、fulfilled（已成功）和rejected（已失败）。这些状态...
promise-perf-tests:（不再维护）promise 实现的基本性能测试
07-01
此项目不再维护 Promise 实现性能测试 ...npm install安装要测试的promise实现 运行测试： 运行所有测试： npm test 使用节点运行单个测试： node 特定于实现的注释 当.js 使用同步分辨率，从 v1.6.0 开始不
promise的实现
黑黑黑眼圈博客
03-31 388
1.promise的声明 首先promise是一个类，那么就用 class声明。 由于new promise((resolve,reject)=>{}),所以传入一个参数，我们叫它executor，传入立即执行。 resolved、reject可执行，所以都是函数，我们用let声明。 class promise{ constructor(executor){ let resolve...
promise详解 ： 实现promise（附实现代码）
小扣柴扉久
04-19 2741
promise then 的特点 ： then 函数的返回值是一个 promise， 可以继续调用 then 函数 回调函数 resolve 和 reject 的参数 value /reason, 可以传递给 then函数的回调函数， 最终 resolve(res) 的res 传递给了 then(onFulfilled(v)=>{},onrejected(e)=>{}) 中的 v， 而 reject(err) 中的 err 传递给了其中的 e then 函数的回调函数的返回值可以分成 ：
Promise实现
前端学习博客
02-01 621
Promise实现 整体代码 /*自定义Promise函数模块：IIFE */ (function (window) { //Promise构造函数 //executor：执行器函数(同步执行) function Promise(executor) { //将当前promise对象保存起来 const self = this self.PromiseState = 'pending' //给promise对象指定PromiseState属性, 初始值为p
Promise通俗易懂的实现方式
frontend_frank的博客
04-20 609
点击上方“蓝字”带你每天阅读全栈前端精选好文前言Promise 是异步编程的一种解决方案，比传统的解决方案回调函数和事件更合理更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。本篇不注重讲解promise的用法，关于用法，可以看阮一峰老师的ECMAScript 6系列里面的Promise部分：ECMAScript 6 : Promise对象本篇主...
Promise原理及实现
橘猫吃不胖的博客
08-09 3006
Promise原理及实现 1 Promise核心逻辑实现 2 加入异步逻辑 3 then方法添加多次调用逻辑 4 链式调用then方法 5 Promise错误捕获 6 then方法参数设置为可选 7 实现Promise.all 8 实现Promise.resolve 9 实现Promise.race 10 实现finally方法 11 实现catch方法 12 全部代码展示...
Promise的简单实现
qq_40258091的博客
09-10 202
零、前言 1 3状态，pending、fulfiled(resolved)、rejected。3选一！ 任意时刻只能处于其中的一种状态。 2 2过程，只能 pending->resolved 或pending->rejected。不可逆、只能 2选1 ！ 3promise的then方法接收两个可选参数，表示该promise状态改变时的回调(promise.then(onFul...
Promise 的简单实现
技术小屋
04-14 477
前言 在上一篇文章 Promise 学习中了解了 Promise 的使用场景和使用方法， 这篇文章是考虑如何自己实现一个简单 Promise，用以理解 Promise。 需求 实现如下要求： doSomething().then(function(res){ // res 是 doSomething() 的结果 doSomethingElse(res); }); Pro...
promise 实现原理
最新发布
04-01
### Promise 实现原理与 JavaScript 源码解析 #### 一、Promise 的基本概念 Promise 是一种异步编程解决方案，它遵循 Promises/A+ 规范[^1]。其核心在于封装了一个可能具有延迟的结果的操作，并提供了统一的接口来处理这些操作的成功或失败。 #### 二、Promise 的状态管理 Promise 对象有三种主要的状态： - **Pending**: 初始状态，既未完成也未失败。 - **Fulfilled**: 成功状态，表示操作成功完成。 - **Rejected**: 失败状态，表示操作未能完成并抛出了错误。 一旦状态从 Pending 变更为 Fulfilled 或 Rejected，则该状态不可逆[^4]。 #### 三、Promise 的核心方法实现 以下是 Promise 的几个重要方法及其工作原理： ##### 1. `then` 方法 `then` 方法用于注册当 Promise 被解决时要执行的回调函数。它的返回值也是一个新的 Promise 实例，从而支持链式调用[^2]。 ```javascript // 示例代码展示 then 方法的工作机制 new Promise((resolve) => { resolve('你好'); }).then((res) => { console.log(res); // 输出 '你好' }); ``` ##### 2. `catch` 方法 `catch` 方法专门用来捕获 Promise 链中的异常。其实质是对 `then` 方法的一个简化版本，仅接收拒绝回调作为参数[^3]。 ```javascript // catch 方法的核心逻辑 Promise.prototype.catch = function(onRejected) { return this.then(null, onRejected); }; ``` ##### 3. `finally` 方法 无论 Promise 是否被解决或拒绝，`finally` 方法都会被执行。它是基于 `then` 方法的一种扩展，主要用于清理资源或其他无关业务逻辑的任务。 ```javascript // finally 方法模拟实现 Promise.prototype.finally = function(callback) { return this.then( (value) => Promise.resolve(callback()).then(() => value), (reason) => Promise.resolve(callback()).then(() => { throw reason }) ); }; ``` #### 四、静态方法的功能剖析 除了实例方法外，Promise 还提供了一些常用的静态方法： ##### 1. `Promise.resolve(value)` 如果传入的是一个已经存在的 Promise，则直接返回这个 Promise；如果是其他类型的值，则将其转换为已解决的 Promise。 ```javascript const resolvedValue = Promise.resolve(42).then((val) => val); // 返回值为 42 ``` ##### 2. `Promise.reject(reason)` 创建一个带有指定原因的拒绝态 Promise。 ```javascript const rejectedReason = Promise.reject(new Error('Error occurred')); rejectedReason.catch(err => console.error(err.message)); // 打印 'Error occurred' ``` ##### 3. `Promise.all(iterable)` 接受一个可迭代对象（如数组），只有所有的 Promise 都解决了才会继续往下走，否则立即进入 Reject 状态。 ```javascript Promise.all([Promise.resolve(1), Promise.resolve(2)]).then(results => console.log(results)); // 结果为 [1, 2] ``` #### 五、完整的简易版 Promise 实现 下面给出一个简单的 Promise 类实现，涵盖了上述提到的主要功能： ```javascript class MyPromise { constructor(executor) { this.state = 'pending'; this.value = undefined; this.reason = undefined; const resolve = (value) => { if (this.state === 'pending') { this.state = 'fulfilled'; this.value = value; } }; const reject = (reason) => { if (this.state === 'pending') { this.state = 'rejected'; this.reason = reason; } }; try { executor(resolve, reject); } catch (error) { reject(error); } } then(onFulfilled, onRejected) { return new MyPromise((resolve, reject) => { if (this.state === 'fulfilled') { setTimeout(() => { try { resolve(onFulfilled(this.value)); } catch (err) { reject(err); } }, 0); } if (this.state === 'rejected') { setTimeout(() => { try { reject(onRejected(this.reason)); } catch (err) { reject(err); } }, 0); } }); } catch(onRejected) { return this.then(null, onRejected); } } ``` 此代码片段展示了如何手动构建一个符合 Promises/A+ 标准的基础 Promise 架构[^5]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值