Promise的实现

最新推荐文章于 2024-07-19 12:58:53 发布
最新推荐文章于 2024-07-19 12:58:53 发布
阅读量856 收藏 5
点赞数 25
分类专栏： 知识点 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhao97/article/details/136322637
版权

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都失败，则报错；
～倩
关注
  • 25
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java promise实现,Promise详解
weixin_39576751的博客
03-13 1308
二、使用promises1、错误捕获如果在执行器内部抛出了错误，那么 Promise 的拒绝处理函数就会被调用。例如：let promise = new Promise(function(resolve, reject) {throw new Error("Explosion!");});promise.catch(function(error) {console.log(error.messag...
java promise实现_基于JAVA的Promise模式实现
weixin_33365844的博客
02-16 4081
Promise模式是一种异步编程模式，即我们可以先开始一个任务，拿到这个任务的凭据而并不需要立即得到这个任务的执行结果才继续往下执行，我们拿着这个凭证可以在之后任何需要的时候去兑换结果。这篇文章主要介绍一种基于JAVA的Promise模式实现并结合一些例子。原始实现为了能够让大家对这个模式有个印象，我举个简单点的例子，假如我们正在做百度百科这个页面，我们需要给前端提供一个服务(下面的代码我们将结果...
Promise 实现原理
热门推荐
weixin_43299180的博客
02-21 2万+
文章目录一、Promise 介绍二、promise 源码实现 一、Promise 介绍 定义 Promise 是异步编程的一种解决方法，比传统的回调函数和事件更合理；它是由社区提出和实现经由 ES6 将其写进语言标准，并在原生提供了 Promise 对象； Promise 可以理解是一个容器，里面保存着某个将来才会结束的事件（异步操作）的结果；从语法上说，Promise 是一个对象通过它可以获取异步操作的消息；Promise 提供了统一的 API ，各种异步操作都可以用同样的方法进行处理。 特点 Pr
js promise实现原理
风烟
01-09 432
简单实现版本 class Promise { callbacks = []; state = 'pending'; value = null; constructor(fn) { fn(this._resolve.bind(this)) } then(onFulfilled) { if (state === 'pending') { this.callbacks.push(onFulfilled);
promise实现红绿灯
小白目的博客
03-25 1636
要使用定时器实现三种灯的等待时间，promise控制异步 function red() { console.log('red'); } function green() { console.log('green'); } function yellow() { console.log('yellow'); } va.
JavaScript 使用 Promise 实现 sleep 休眠
永远相信美好的事情即将发生
03-20 412
以下为代码实现，该代码实现了每隔1秒打印一次当前时间，总共打印5次的功能这里使用了 Promise 异步操作功能，在 Promise 中调用了 setTimeout 方法，并在指定时间后执行回调函数完成 Promise。在外层通过 await 关键字等待 Promise 的完成。这样就实现了一个 sleep 函数了。
promise 实现分批请求
在路上`的博客
02-11 896
promise 分批请求
promise简单实现
qq_39692513的博客
06-16 946
promise简单实现
如何使用Promise实现并发请求数限制
DoubleLift_DSX的博客
04-13 1265
使用Promise实现并发请求数限制
Promise实现sleep功能
maquealone的博客
05-23 2410
async function test() { for (var i = 0; i < 10; i++) { await sleep(1000); console.log(i); } } function sleep(delay) { return new Promise((resolve, reject) => { ...
promise:Python 中的超高性能 Promise 实现
05-30
承诺这是 Python 中 Promise 的一个实现。 它是 Promises/A+ 的超级集，旨在拥有可读、高性能的代码，并仅提供在 Python 中使用 Promise 绝对必要的扩展。 它与完全兼容安装 $ pip install promise用法下面的示例...
promise实现原理
11-13
上述代码展示了基本的Promise实现。需要注意的是，实际的Promise还包含`catch`、`finally`、`async/await`等高级功能，以及错误传播、微任务调度等复杂逻辑。在实现这些功能时，我们需要考虑错误捕获、链式调用中的...
Jquery promise实现一张一张加载图片
10-23
通过jquery promise实现一张一张的连续图片的加载功能，当图片加载错误，超时后会显示加载图片加载失败。对jquery promise实现加载图片的相关资料感兴趣的朋友参考下
js代码-Promise实现
07-16
在JavaScript中，Promise是异步编程的一种解决方案，它用于处理回调地狱问题，使得异步操作更加清晰、...在`main.js`文件中，你可以找到具体的Promise实现，而`README.txt`则提供了关于这段代码的上下文和使用指南。
博客前端项目学习day03——框架页
最新发布
qq_53237241的博客
07-19 191
【代码】博客前端项目学习day03——框架页。
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 985
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
vue快速上手——创建vue项目，vue基本使用方式，路由vue-Router，转态管理vuex
weixin_73582152的博客
07-15 777
Node.js 是一个开源、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8 引擎构建的，它的设计目标是提供一种高效、轻量级的方式来构建可扩展的网络应用程序。事件驱动：Node.js 使用非阻塞 I/O 模型，使其非常适合处理大量并发连接，这使得它在构建实时应用程序（如聊天应用）时非常高效。单线程。
HOW - SVG 图标组件封装（Lucide React）
weixin_58540586的博客
07-18 849
在中我们介绍过 “动态 Fetch CDN SVG 图标”，这种在开发者将需要用到 图标 依次上传到 CDN 再在项目通过请求引入使用的场景。但其实，更常见的做法还是统一维护一组 SVG 图标，然后将其封装成组件，直接在项目中通过 Import 的形式使用。
vue3配置代理
Joe world的博客
07-16 153
【代码】vue3配置代理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值