Promise的使用与原理实现过程详解【附源码】

最新推荐文章于 2023-06-28 22:42:18 发布
最新推荐文章于 2023-06-28 22:42:18 发布
阅读量1.1k 收藏 6
点赞数 1
分类专栏： 前端面试 面试宝典 JavaScript系列 文章标签： js javascript Promise
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XH_jing/article/details/118637036
版权

一、什么是 Promise？

Promise 是目前 JS 异步编程的一种解决方案。

  • 从语法上讲，Promise 是一个对象，从它可以获取异步操作的消息；
  • 从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。

二、Promise 原理简析？

1、Promise 本身相当于一个状态机，拥有三种状态：

  • pending(等待态)
  • fulfiled(成功态)
  • rejected(失败态)

一个 Promise 对象初始化时的状态是 pending，调用了 resolve 后会将 Promise 的状态扭转为 fulfilled，调用 reject 后会将 Promise 的状态扭转为 rejected，这两种扭转一旦发生便不能再扭转该 Promise 到其他状态。

2、Promise 对象原型上有一个 then 方法，then 方法会返回一个新的 Promise 对象，并且将回调函数 return 的结果作为该 Promise resolve 的结果，then 方法会在一个 Promise 状态被扭转为 fulfilled 或 rejected 时被调用。then 方法的参数为两个函数，分别为 Promise 对象的状态被扭转为 fulfilled 和 rejected 对应的回调函数。

三、Promise 的使用？

构造一个 Promise 对象，并将要执行的异步函数传入到 Promise 的参数中执行，并且在异步执行结束后调用 resolve() 函数，就可以在 Promise 的 then 方法中获取到异步函数的执行结果

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve()
  }, 1000)
}).then(
  res => {},
  err => {}
)

同时在 Promise 还为我们实现了很多方便使用的方法：

  • Promise.resolve 方法

    Promise.resolve 返回一个 fulfilled 状态的 Promise

    const a = Promise.resolve(1)
a.then(
  res => {
    // res = 1
  },
  err => {}
)

  • Promise.all 方法

    Promise.all 接收一个 Promise 对象数组作为参数，只有全部的 Promise 都已经变为 fulfilled 状态后才会继续后面的处理。Promise.all 本身返回的也是一个 Promise

    const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise1')
  }, 100)
})
const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise2')
  }, 100)
})
const promises = [promise1, promise2]

Promise.all(promises).then(
  res => {
    // promises 全部变为 fulfilled 状态的处理
  },
  err => {
    // promises 中有一个变为 rejected 状态的处理
  }
)

  • Promise.race 方法

    Promise.race 和 Promise.all 类似，只不过这个函数会在 Promise 中第一个 promise 的状态扭转后就开始后面的处理（fulfilled、rejected 均可）

    const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise1')
  }, 100)
})
const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise2')
  }, 1000)
})
const promises = [promise1, promise2]

Promise.race(promises).then(
  res => {
    // 此时只有 promise1 resolve 了，promise2 仍处于 pending 状态
  },
  err => {}
)

四、Promise 源码实现？

  1. 首先按照最基本的 Promise 调用方式实现一个简单的 Promise （基于 ES6 规范编写），假设我们有如下调用方式：

    new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1)
  }, 1000)
})
  .then(
    res => {
      console.log(res)
      return 2
    },
    err => {}
  )
  .then(
    res => {
      console.log(res)
    },
    err => {}
  )

    我们首先要实现一个 Promise 的类，这个类的构造函数会传入一个函数作为参数，并且向该函数传入 resolve 和 reject 两个方法。

    初始化 Promise 的状态为 pending。

    class MyPromise {
  constructor(executor) {
    this.executor = executor
    this.value = null
    this.status = 'pending'

    const resolve = value => {
      if (this.status === 'pending') {
        this.value = value 			// 调用 resolve 后记录 resolve 的值
        this.status = 'fulfilled'   // 调用 resolve 扭转 promise 状态
      }
    }

    const reject = value => {
      if (this.status === 'pending') {
        this.value = value          // 调用 reject 后记录 reject 的值
        this.status = 'rejected'    // 调用 reject 扭转 promise 状态
      }
    }

    this.executor(resolve, reject)
}

  2. 接下来要实现 Promise 对象上的 then 方法，then 方法会传入两个函数作为参数，分别作为 Promise 对象 resolve 和 reject 的处理函数。

    这里要注意三点：

    • then 函数需要返回一个新的 Promise 对象；
    • 执行 then 函数的时候这个 Promise 的状态可能还没有被扭转为 fulfilled或 rejected；
    • 一个 Promise 对象可以同时多次调用 then 函数；
    class MyPromise {
  constructor(executor) {
    this.executor = executor
    this.value = null
    this.status = 'pending'
    this.onFulfilledFunctions = []	// 存放这个 promise 注册的 then 函数中传的第一个函数参数
    this.onRejectedFunctions = [] 	// 存放这个 promise 注册的 then 函数中传的第二个函数参数
    
    const resolve = value => {
      if (this.status === 'pending') {
        this.value = value
        this.status = 'fulfilled'
        this.onFulfilledFunctions.forEach(onFulfilled => {
          onFulfilled() 	// 将 onFulfilledFunctions 中的函数拿出来执行
        })
      }
    }
    
    const reject = value => {
      if (this.status === 'pending') {
        this.value = value
        this.status = 'rejected'
        this.onRejectedFunctions.forEach(onRejected => {
          onRejected()		// 将 onRejectedFunctions 中的函数拿出来执行
        })
      }
    }
    
    this.executor(resolve, reject)
  }

  then(onFulfilled, onRejected) {
    const self = this
    if (this.status === 'pending') {
      /**
       * 当 promise 的状态仍然处于 ‘pending’ 状态时，需要将注册 onFulfilled、onRejected 方法放到 promise 的 onFulfilledFunctions、onRejectedFunctions 中备用
       */
      return new MyPromise((resolve, reject) => {
        this.onFulfilledFunctions.push(() => {
          const thenReturn = onFulfilled(self.value)
          resolve(thenReturn)
        })
        this.onRejectedFunctions.push(() => {
          const thenReturn = onRejected(self.value)
          resolve(thenReturn)
        })
      })
    } else if (this.status === 'fulfilled') {
      return new MyPromise((resolve, reject) => {
        const thenReturn = onFulfilled(self.value)
        resolve(thenReturn)
      })
    } else {
      return new MyPromise((resolve, reject) => {
        const thenReturn = onRejected(self.value)
        resolve(thenReturn)
      })
    }
  }
}

    对于以上完成的 MyPromise 进行测试，测试代码如下：

    const mp = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(1)
  }, 1000)
})

mp.then(res => {
  console.log('first then', res)
  return res + 1
}).then(res => {
  console.log('first then', res)
})

mp.then(res => {
  console.log(`second then`, res)
  return res + 1
}).then(res => {
  console.log(`second then`, res)
})

/**
 *  输出结果如下：
 *  first then 1
 *  first then 2
 *  second then 1
 *  second then 2
 */

  3. 在 Promise 相关的内容中，有一点常常被我们忽略，当 then 函数中返回的是一个 Promise 应该如何处理？

    考虑如下代码：

    // 使用正确的 Promise
new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve()
  }, 1000)
})
  .then(res => {
    console.log('外部 promise')
    return new Promise((resolve, reject) => {
      resolve(`内部 promise`)
    })
  })
  .then(res => {
    console.log(res)
  })

/**
 * 输出结果如下：
 * 外部 promise
 * 内部 promise
 */

    通过以上的输出结果不难判断，当 then 函数返回的是一个 Promise 时，Promise 并不会直接将这个 Promise 传递到下一个 then 函数，而是会等待该 Promise resolve 后，将其 resolve 的值，传递给下一个 then 函数，找到我们实现的代码的 then 函数部分，做以下修改：

    then(onFulfilled, onRejected) {
   const self = this
   if (this.status === 'pending') {
       return new MyPromise((resolve, reject) => {
       this.onFulfilledFunctions.push(() => {
           const thenReturn = onFulfilled(self.value)
           if (thenReturn instanceof MyPromise) {
               // 当返回值为 promise 时，等该内部的 promise 状态扭转时，同步扭转外部的 promise 状态
               thenReturn.then(resolve, reject)
           } else {
               resolve(thenReturn)
           }
       })
       this.onRejectedFunctions.push(() => {
           const thenReturn = onRejected(self.value)
           if (thenReturn instanceof MyPromise) {
               // 当返回值为 promise 时，等该内部的 promise 状态扭转时，同步扭转外部的 promise 状态
               thenReturn.then(resolve, reject)
           } else {
               resolve(thenReturn)
           }
       })
       })
   } else if (this.status === 'fulfilled') {
       return new MyPromise((resolve, reject) => {
           const thenReturn = onFulfilled(self.value)
           if (thenReturn instanceof MyPromise) {
               // 当返回值为 promise 时，等该内部的 promise 状态扭转时，同步扭转外部的 promise 状态
               thenReturn.then(resolve, reject)
           } else {
               resolve(thenReturn)
           }
       })
   } else {
       return new MyPromise((resolve, reject) => {
           const thenReturn = onRejected(self.value)
           if (thenReturn instanceof MyPromise) {
               // 当返回值为 promise 时，等该内部的 promise 状态扭转时，同步扭转外部的 promise 状态
               thenReturn.then(resolve, reject)
           } else {
               resolve(thenReturn)
           }
       })
   }
}

  4. 现在的 Promise 实现代码仍然缺少很多细节逻辑，后面我还继续研究，来提供一个相对完整的版本。

参考文章：https://blog.csdn.net/weixin_56134381/article/details/115868041

八了个戒
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Promise的基本实现和使用讲解
08-12
Promise的基本实现和使用讲解
promise详解，手动实现以及上万字笔记.rar
08-16
里面主要是手写的promise实现过程，以及promise的详解笔记，对于初接触promise和进阶的前端人员来说是相当值得一看的
Promise执行顺序详解
qq_41409353的博客
03-08 2537
Promise 的执行顺序详解
Promise基础详解，快速带你了解Promise的各种使用方式及其原理
XuZhiqiang的博客
01-30 1572
本文讲述了 Promise 的用法与方法介绍，详细解剖 Promise 的状态流程以及 Promise 关键问题，下一篇将介绍如何手写Promise
详解Promise使用与原理
weixin_50313248的博客
06-29 1761
详解Promise使用与原理一：Promise的概念二：Promise的生命周期三：如何让创建一个Promise四：编写Promise结果处理程序浅的讲差不多了，深的来了 --> .then 一：Promise的概念 Promise的中文意思是‘承诺’，什么叫承诺？承诺就是现在没有发生，在将来的某个时刻一定会发生的事情。 放在编程语言的环境下，Promise就是异步事件的结果的占位符。我们不用去管异步事件的结果什么时候来，只需要关心异步事件的结果产生的时候，你想要做什么就对了。 二：Promise的生
Promise 实现原理
热门推荐
weixin_43299180的博客
02-21 2万+
文章目录一、Promise 介绍二、promise 源码实现 一、Promise 介绍 定义 Promise 是异步编程的一种解决方法，比传统的回调函数和事件更合理；它是由社区提出和实现经由 ES6 将其写进语言标准，并在原生提供了 Promise 对象； Promise 可以理解是一个容器，里面保存着某个将来才会结束的事件（异步操作）的结果；从语法上说，Promise 是一个对象通过它可以获取异步操作的消息；Promise 提供了统一的 API ，各种异步操作都可以用同样的方法进行处理。 特点 Pr
promise原理和使用方法
qq_59315646的博客
04-13 2029
从本意上讲，它是承诺，承诺它过一段时间会给你一个结果，其实是一个构造函数，自己身上有all、reject、resolve，race这几个方法，原型上有then、catch，finally等方法。1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
promise的原理和几种使用方法
qq_72760247的博客
10-09 3595
promise的原理和几种使用方法
js常见面试题——详解Promise使用与原理及实现过程（附源码）
weixin_56134381的博客
04-19 4134
什么是 Promise promise 是目前 JS 异步编程的主流解决方案，遵循 Promises/A+ 方案。 Promise 原理简析 （1）promise 本身相当于一个状态机，拥有三种状态 pending fulfilled rejected 一个 promise 对象初始化时的状态是 pending，调用了 resolve 后会将 promise 的状态扭转为 fulfilled，调用 reject 后会将 promise 的状态扭转为 rejected，这两种扭转一旦发生便不能再扭转该 pr
Promise Async+await实现原理及案例分析
04-03
Promise Async+await实现原理及案例分析
详解如何构建Promise队列实现异步函数顺序执行
10-17
主要介绍了详解如何构建Promise队列实现异步函数顺序执行，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript中的Promise使用详解
10-24
主要介绍了JavaScript中的Promise使用详解,promise对象是JS进阶学习中的重要知识点,需要的朋友可以参考下
手把手教你实现 Promise的使用方法
10-14
主要介绍了手把手教你实现 Promise的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
面试问 Promise 不会？超级详细的手写Promise原理，带你一步一步写出一个自己的 Promise
秋天，黄叶坠地，凉风有信。
03-12 1485
文章目录Promise 原理 及其 实现一、实现resolve和reject1、resolve与reject2. 状态不可变3. throw二、实现 then1. 实现then2. 定时器情况3. 链式调用4. 微任务三、最后总结 Promise 原理 及其 实现 首先要实现 Promise 就要让我们了解它具体功能 let p1 = new Promise((resolve)=>{ resolve(2) }) console.log(p1); let p2 = new Promise((
Promise原理讲解 && 实现一个Promise对象 (遵循Promise/A+规范)
weixin_34199405的博客
03-13 151
1.什么是Promise? Promise是JS异步编程中的重要概念，异步抽象处理对象，是目前比较流行Javascript异步编程解决方案之一 2.对于几种常见异步编程方案 回调函数 事件监听 发布/订阅（深入了解发布/订阅，可以看我的文章用发布订阅模式编写一个可被其他对象拓展复用的自定义事件系统） Promise对象 这里就拿回调函数说说 (1) 对于回调函数 我们用Jquery的aja...
Promise原理
Ak47a7的博客
03-25 308
Promise原理
Promise 的基本原理
生命不息，挖坑不止
06-28 395
Promise 对象被创建时，其状态为 pending，当我们调用 resolve 函数或 reject 函数时，状态会改变为 fulfilled 或 rejected，并且状态一旦改变，就不能再次改变。2. resolve 函数和 reject 函数是由 JavaScript 引擎提供的，当异步操作成功时，我们调用 resolve 函数来改变 Promise 对象的状态，当异步操作失败时，我们调用 reject 函数来改变 Promise 对象的状态。
promise的优点promise.all(),promise.race(),promise.allSettled()的原理
weixin_43800477的博客
12-24 1329
Promise也是使用回调函数，只不过是把回调封装在了内部，使用上一直通过 then 方法的链式调用，使得多层的回调嵌套看起来变成了同一层的，书写上以及理解上会更直观和简洁一些。Promise出现之前都是通过回调函数来实现，回调函数本身没有问题，但是嵌套层级过深，很容易掉进回调地狱。 1、promise.all() Promise.all()方法接受一个数组作为参数,p1、p2、p3都是 Promise 实例 只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulf...
promise源码实现
最新发布
08-17
Promise的源码实现比较复杂，这里我给你一个简化版的Promise源码示例，以帮助你理解其基本原理： ```javascript // Promise构造函数 function Promise(executor) { var self = this; self.value = null; // Promise的值 self.status = 'pending'; // Promise的状态 self.onResolvedCallbacks = []; // 存储成功回调函数的数组 self.onRejectedCallbacks = []; // 存储失败回调函数的数组 function resolve(value) { if (self.status === 'pending') { self.status = 'resolved'; self.value = value; self.onResolvedCallbacks.forEach(function (callback) { callback(value); }); } } function reject(reason) { if (self.status === 'pending') { self.status = 'rejected'; self.value = reason; self.onRejectedCallbacks.forEach(function (callback) { callback(reason); }); } } try { executor(resolve, reject); } catch (e) { reject(e); } } // then方法 Promise.prototype.then = function (onResolved, onRejected) { var self = this; var promise2; onResolved = typeof onResolved === 'function' ? onResolved : function (value) { return value; }; onRejected = typeof onRejected === 'function' ? onRejected : function (reason) { throw reason; }; if (self.status === 'resolved') { return promise2 = new Promise(function (resolve, reject) { try { var x = onResolved(self.value); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }); } if (self.status === 'rejected') { return promise2 = new Promise(function (resolve, reject) { try { var x = onRejected(self.value); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }); } if (self.status === 'pending') { return promise2 = new Promise(function (resolve, reject) { self.onResolvedCallbacks.push(function (value) { try { var x = onResolved(value); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }); self.onRejectedCallbacks.push(function (reason) { try { var x = onRejected(reason); resolvePromise(promise2, x, resolve, reject); } catch (e) { reject(e); } }); }); } }; // 解析Promise的状态 function resolvePromise(promise, x, resolve, reject) { var then; var thenCalledOrThrow = false; if (promise === x) { return reject(new TypeError('Chaining cycle detected for promise!')); } if (x instanceof Promise) { if (x.status === 'pending') { x.then(function (value) { resolvePromise(promise, value, resolve, reject); }, reject); } else { x.then(resolve, reject); } return; } if ((x !== null) && ((typeof x === 'object') || (typeof x === 'function'))) { try { then = x.then; if (typeof then === 'function') { then.call(x, function rs(y) { if (thenCalledOrThrow) return; thenCalledOrThrow = true; return resolvePromise(promise, y, resolve, reject); }, function rj(r) { if (thenCalledOrThrow) return; thenCalledOrThrow = true; return reject(r); }); } else { resolve(x); } } catch (e) { if (thenCalledOrThrow) return; thenCalledOrThrow = true; return reject(e); } } else { resolve(x); } } ``` 这只是一个简化版的Promise源码实现，真正的Promise实现要考虑更多的细节和边界情况。希望这个示例能帮助你更好地理解Promise的工作原理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值