手写 Promise

已于 2022-03-22 13:45:52 修改
阅读量173 收藏
点赞数
文章标签： javascript 前端
于 2022-03-22 01:25:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45196863/article/details/123650641
版权

手写 Promise

需要实现的功能

  • 初始化 & 异步调用

    // Promise 的参数是个函数，函数里有两个参数，一个是成功回调，一个是失败回调
const p1 = new Promise((resolve, reject) => {
  resolve(100)
  // 也支持异步
  // setTimeout(() => {
  //   resolve(100)
  // }, 500)
})

  • then、catch 链式调用

    p.then((data) => {
  return data + 1
}).then((data) => {
  return data + 2
}).catch((err) => {
  console.log(err)
})

// then 也可以传入两个参数
// 一个是成功后的回调，一个是失败后的回调
p.then(fn1, fn2)

// 链式调用本质是每次调用返回一个新的 promise
const p11 = p1.then((data) => {
  return data + 1
})
const p12 = p11.then((data) => {
  return data + 2
})
const p13 = p12.catch((err) => {
  console.log(err)
})

  • API .resolve .reject .all .race

    // 创建一个 resolved 状态的 promise 并附带成功信息
const p2 = Promise.resolve(200)
// 创建一个 rejected 状态的 promise，并附带 rejected 的原因
const p3 = Promise.reject("错误信息...")
// 当所有 promise 都 resolved 后返回数组结果。
// 如果有 rejected 则返回 rejected 状态的 promise 并说明错误原因
const p4 = Promise.all([p1, p2])
// 哪个 promise 先执行完就直接返回，不管是 resolved 或 rejected
const p5 = Promise.race([p1, p2])

1. 构造函数

class MyPromise {
  constructor (fn) {
    this.state = 'pending' // 状态，'pending' 'resolved', 'rejected
    this.value = undefined // 成功后的值
    this.reason = undefined // 失败后的原因

    this.resolveCallbacks = []; // pending 状态下，存储成功的回调
    this.rejectCallbacks = []; // pending 状态下，存储失败的回调

    const resolveHandler = (value) => {
      if (this.state === 'pending') {
        this.state = 'resolved'
        this.value = value
        // 状态变化后，执行存储的回调方法
        this.resolveCallbacks.forEach(fn => fn(this.value))
      }
    }
    const rejectHandler = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected'
        this.reason = reason
        this.rejectCallbacks.forEach(fn => fn(this.reason))
      }
    }
    
    try {
      fn(resolveHandler, rejectHandler)
    } catch (err) {
      rejectHandler(err)
    }
  }

  then(fn1, fn2) {
    // 当 pending 状态下，fn1 fn2 会被存储到 callback 中
  }
    
  // 就是 then 的一个语法糖，简单模式
  catch(fn) {
    return this.then(null, fn)
  }
}

2. then 的链式调用

class MyPromise {
  constructor (fn) {
    this.state = 'pending' // 状态，'pending' 'resolved', 'rejected
    this.value = undefined // 成功后的值
    this.reason = undefined // 失败后的原因

    this.resolveCallbacks = []; // pending 状态下，存储成功的回调
    this.rejectCallbacks = []; // pending 状态下，存储失败的回调

    const resolveHandler = (value) => {
      if (this.state === 'pending') {
        this.state = 'resolved'
        this.value = value
        this.resolveCallbacks.forEach(fn => fn(this.value))
      }
    }
    const rejectHandler = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected'
        this.reason = reason
        this.resolveCallbacks.forEach(fn => fn(this.reason))
      }
    }

    try {
      fn(resolveHandler, rejectHandler)
    } catch (error) {
      rejectHandler(err)
    }
  }

  then(fn1, fn2) {
    // 当 pending 状态下，fn1 fn2 会被存储到 callback 中
    fn1 = typeof fn1 === 'function' ? fn1 : (v) => v
    fn2 = typeof fn2 === 'function' ? fn2 : (v) => v

    if (this.state === 'pending') {
      return new MyPromise((resolve, reject) => {
        // push 进去的函数得等状态为 resolved 的时候才会被执行
        this.resolveCallbacks.push(() => { 
          try {
            const newValue = fn1(this.value);
            resolve(newValue)
          } catch (err) {
            reject(err)
          }
         })

        // push 进去的函数得等状态为 rejected 的时候才会被执行
        this.resolveCallbacks.push(() => { 
          try {
            const newReason = fn2(this.reason);
            reject(newReason )
          } catch (err) {
            reject(err)
          }
         })
      })
    }

    // const p11 = p1.then((data) => {
    //   return data + 1
    // })
    if (this.state === 'resolved') {
      return new MyPromise((resolve, reject) => {
        try {
          // 传入 resolved 的返回值
          const newValue = fn1(this.value)
          resolve(newValue)
        } catch (error) {
          reject(error)
        }
      })
    }

    if (this.state === 'rejected') {
      return new MyPromise((resolve, reject) => {
        try {
          // 传入 rejected 的原因
          const newReason = fn2(this.reason)
          reject(newReason)
        } catch (error) {
          reject(error)
        }
      })
    }
  }
    
  // 就是 then 的一个语法糖，简单模式
  catch(fn) {
    return this.then(null, fn)
  }
}

3. Promise-all 和 race

class MyPromise {
  constructor (fn) {
    this.state = 'pending' // 状态，'pending' 'resolved', 'rejected
    this.value = undefined // 成功后的值
    this.reason = undefined // 失败后的原因

    this.resolveCallbacks = []; // pending 状态下，存储成功的回调
    this.rejectCallbacks = []; // pending 状态下，存储失败的回调

    const resolveHandler = (value) => {
      if (this.state === 'pending') {
        this.state = 'resolved'
        this.value = value
        this.resolveCallbacks.forEach(fn => fn(this.value))
      }
    }
    const rejectHandler = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected'
        this.reason = reason
        this.resolveCallbacks.forEach(fn => fn(this.reason))
      }
    }

    try {
      fn(resolveHandler, rejectHandler)
    } catch (error) {
      rejectHandler(error)
    }
  }

  then(fn1, fn2) {
    // 当 pending 状态下，fn1 fn2 会被存储到 callback 中
    fn1 = typeof fn1 === 'function' ? fn1 : (v) => v
    fn2 = typeof fn2 === 'function' ? fn2 : (v) => v

    if (this.state === 'pending') {
      return new MyPromise((resolve, reject) => {
        // push 进去的函数得等状态为 resolved 的时候才会被执行
        this.resolveCallbacks.push(() => { 
          try {
            const newValue = fn1(this.value);
            resolve(newValue)
          } catch (error) {
            reject(error)
          }
         })

        // push 进去的函数得等状态为 rejected 的时候才会被执行
        this.resolveCallbacks.push(() => { 
          try {
            const newReason = fn2(this.reason);
            reject(newReason)
          } catch (error) {
            reject(error)
          }
         })
      })
    }

    // const p11 = p1.then((data) => {
    //   return data + 1
    // })
    if (this.state === 'resolved') {
      return new MyPromise((resolve, reject) => {
        try {
          // 传入 resolved 的返回值
          const newValue = fn1(this.value)
          resolve(newValue)
        } catch (error) {
          reject(error)
        }
      })
    }

    if (this.state === 'rejected') {
      return new MyPromise((resolve, reject) => {
        try {
          // 传入 rejected 的原因
          const newReason = fn2(this.reason)
          reject(newReason)
        } catch (error) {
          reject(error)
        }
      })
    }
  }
    
  // 就是 then 的一个语法糖，简单模式
  catch(fn) {
    return this.then(null, fn)
  }
}

// 全局静态 API
MyPromise.resolve = function(value) {
  return new MyPromise((resolve, reject) => resolve(value))
}

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

MyPromise.all = function (promiseList = []) {
  const p1 = new MyPromise((resolve, reject) => {
    const result = [] // 存储 promiseList 所有的结果
    const length = promiseList.length
    
    let resolvedCount = 0
    promiseList.forEach((p) => {
      p.then(data => {
        result.push(data)
        // resolvedCount 必须在 then 里面做 ++ (then 执行，累加才算数)
        // 不能用 index，因为 promise 里是异步的，index 递增是同步的
        resolvedCount++
        if (resolvedCount === length) {
          // 已经遍历到了最后一个 promise，把数据 resolve 出去
          resolve(result)
        }
      }).catch(err => {
        reject(err)
      })
    })
  })
  return p1
}

MyPromise.race = function (promiseList = []) {
  let resolved = false
  const p1 = new MyPromise((resolve, reject) => {
    promiseList.forEach(p => {
      p.then(data => {
        if (!resolved) {
          resolve(data)
          resolved = true
        }
      }).catch((err) => {
        reject(err)
      })
    })
  })
  return p1
}
John是橘红
关注
专栏目录
深入理解 JavaScript 中的 Promise ：从基础概念到进阶用法、手写promise
Allen-
07-10 3515
Promise是JavaScript中的一种对象，用于表示一个在未来某个时间点才会完成（或失败）的异步操作及其结果。它提供了一种处理异步操作的统一接口，使代码更加简洁和易于理解。与传统的回调函数相比，Promise能够更好地处理异步操作的结果和错误。Promise作为JavaScript中处理异步操作的一种重要机制，极大地简化了代码编写和异步流程控制。
手写Promise（全面）
qq_55269092的博客
02-25 946
手写Promise（包含测试用例） （1）测试用例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale
手写Promise
qq_45517916的博客
03-09 232
//js const PENDING = 'pending'; const RESOLVED = 'resolved'; const REJECTED = 'rejected'; function MyPromise(fn) { // 保存初始化状态 var self = this; // 初始化状态 this...
手写Promise (另附完整demo)
small_white_123的博客
09-05 313
手写PromisePromise常用方法Promise结构封装resolve和reject方法核心难点——封装prototype.then()Promise.resolve和Promise.rejectPromise.allpromise.race 手写Promise之前, 我们先看看Promise有哪些方法需要我们封装: Promise常用方法 详情点击查看链接, 这里只是简单的说明 常用方法 说明 executor(resolve, reject) 执行器, Promise的参数, 包含
Promise_js手写promise_js手写Promise_手写Promise_JS手写Promise_
09-30
在本文中，我们将深入探讨如何使用原生JavaScript手写Promise。 首先，我们需要理解Promise的基本概念。Promise有三种状态：pending（等待中）、fulfilled（已完成）和rejected（已拒绝）。每个Promise实例在其生命...
js代码-手写promise.all
07-16
// 这里将实现手写Promise.all的逻辑 }); } ``` 接下来，我们需要跟踪Promise的状态。我们可以创建一个计数器来记录已解析的Promise数量，以及一个存储结果的数组： ```javascript let resolvedCount = 0; let ...
Promise-A-Plus:纯 TypeScript 手写 Promise A+
05-29
手写 Promise A+ English： 术语 解决（fulfill） 指的是一个 promise 成功时进行的一系列操作，如状态的改变、回调的执行。虽然规范中使用 fulfill 来表示解决，但是目前常用 resolve 来取代。 拒绝（reject） 指的...
JS手写Promise源码
12-19
为什么要手写Promise？1、深入理解Promise的工作原理：手写Promise可以帮助我们更深入地理解Promise的工作原理和内部机制。通过手动实现Promise的核心功能，如异步调用、状态管理和回调处理，我们可以更好地理解...
手写Promise（依次设计，方便理解）
最新发布
weixin_50236973的博客
07-29 320
手写Promise
Promise原理及手写Promise
huangzhin的博客
11-29 677
一、Promise原理： Promise 原理围绕以下三个问题进行解决： （有任何一步不了解的话请先往下看手写Promise，会一步步剖析原理，看完后再继续回顾这里！！） 1. 怎么实现异步？ Promise内部then函数注册后续需要执行的函数，resolve函数执行。需要保证函数在执行前都已注册好， 解決：resolve内部执行函数的代码需要加入延时机制setTimeout...
教你如何手写一个Promise
ose_huang的博客
02-25 9697
promise的进阶，手写一个自己的promise
300秒带你手写一个promise
小陈的博客
05-18 6110
前言 为什么要写这一篇文章？ 加深对promise的理解，以及再实际工作中的灵活运用。 知其然，知其所以然。 面试需要。（重点！！！） 1:声明promise 首先我们先来聊聊promise的几个特性： 一个promise有三种状态：pengding,fulfilled，rejected. promise状态一旦被改变，就不允许被改变了。 new Promise构造函数接受一个函数参数，这个函数有两个参数分别为resole和reject函数。 其实代码很好写，我们就来检验以下resolve的参数是否
30分钟，让你彻底明白Promise原理
weixin_34174105的博客
05-19 884
原文链接 前言 前一阵子记录了promise的一些常规用法，这篇文章再深入一个层次，来分析分析promise的这种规则机制是如何实现的。ps:本文适合已经对promise的用法有所了解的人阅读,如果对其用法还不是太了解，可以移步我的上一篇博文。 本文的promise源码是按照Promise/A+规范来编写的（不想看英文版的移步Promis...
BAT前端经典面试问题：史上最最最详细的手写Promise教程
weixin_34082789的博客
06-27 520
我们工作中免不了运用promise用来解决异步回调问题。平时用的很多库或者插件都运用了promise 例如axios、fetch等等。但是你知道promise是咋写出来的呢？ 别怕～这里有本promisesA+规范，便宜点10元卖给你了。 1、Promise 的声明 首先呢，promise肯定是一个类，我们就用class来声明。 由于new Promise((resolve, reject)=...
用promise手写Ajax请求
alokka的博客
03-01 1021
js： function lajax(options) { options = Object.assign({ url: '', method: 'post', // 默认 post 请求 这个自定义 也可以是 get 也可以在调用的时候传 async: true, // 请求同步还是异步，默认异步 data: null, ...
ES6 - 从Promise入门到深入原理（手写一个自己的Promise）
前端攻城狮Dannis
04-17 5025
事件和回调函数的缺陷 我们习惯于使用传统的回调或者事件处理来解决异步问题 事件: 某个对象的属性是一个函数, 当发生一件事时, 运行该函数 dom.onclick = function() { // ...执行的代码 } 回调：运行某个函数以实现某个功能的时候, 传入一个函数作为参数, 当某个特定的条件下的时候, 就会触发该函数 dom.addEventListner('click', ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值