【JavaScript】手写 Promise（静态方法）

最新推荐文章于 2024-07-10 10:56:08 发布
最新推荐文章于 2024-07-10 10:56:08 发布
阅读量711 收藏 22
点赞数 27
分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XiugongHao/article/details/136356365
版权

手写Promise-静态方法resolve

需求:

  1. 返回一个带有成功原因的Promise对象
HMPromise.resolve(new HMPromise((resolve, reject) => {
  // resolve('resolve')
  // reject('reject')
  // throw 'error'
})).then(res => {
  console.log('res:', res)
}, err => {
  console.log('err:', err)
})
HMPromise.resolve('itheima').then(res => {
  console.log(res)
})

核心步骤:

  1. 增加静态方法resolve，根据传入的值返回不同的结果即可
  static resolve(value) {
    // 1. 判断传入值
    if (value instanceof HMPromise) {
      // 2.1 Promise直接返回
      return value
    }
    // 2.2 转为Promise并返回(fulfilled状态)
    // return new HMPromise((resolve, reject) => {
    return new HMPromise((resolve) => {
      resolve(value)
    })
  }
面试回答:

手写Promise-静态方法resolve

  1. 通过static关键字添加静态方法resolve,接收参数value
  2. 内部判断传入的值
    1. 如果是Promise实例,直接返回
    2. 其他的值,创建Promise实例并返回,内部通过resolve(value)传递value

手写Promise-静态方法reject

需求:

  1. 返回一个带有拒绝原因的Promise对象
HMPromise.reject('error').catch(res => {
  console.log(res)
})

核心步骤:

  1. 添加静态方法
  2. 返回rejected状态的Promise
  static reject(value) {
    // 1. 返回rejected状态的Promise
    // new HMPromise((resolve,reject)=>{
    return new HMPromise((undefined, reject) => {
      reject(value)
    })
  }
面试回答

手写Promise-静态方法reject

  1. 添加静态方法reject并接收参数value
  2. 内部返回一个拒绝状态的Promise实例即可

手写Promise-静态方法race

需求:

  1. 接收Promise数组,数组中第一个Promise敲定时,获取成功/失败结果
  2. 传入的参数不是数组,直接报错

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

const p1 = new HMPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(1)
  }, 2000)
})
const p2 = new HMPromise((resolve, reject) => {
  setTimeout(() => {
    reject(2)
  }, 1000)
})
HMPromise.race([p1, p2, 'itheima']).then((res) => {
  console.log('res:', res)
}, err => {
  console.log('err:', err)
})

核心步骤:

  1. 返回Promise
  2. 判断是否未数组,不是直接报错
  3. 等待第一个敲定
  static race(promises) {
    // 1. 返回Promise
    return new HMPromise((resolve, reject) => {
      // 2. 判断是否为数组
      if (!Array.isArray(promises)) {
        return reject(new TypeError('Argument is not iterable'))
      }
      // 3. 等待第一个敲定
      promises.forEach(p => {
        // p.then
        HMPromise.resolve(p).then(res => { resolve(res) }, err => { reject(err) })
      })
    })
  }
面试回答:

手写Promise-静态方法race

  1. 添加静态方法race接收参数promises
  2. 内部返回一个新的Promise实例,在返回的Promise实例中:
    1. 判断参数是否为数组,不是通过reject传递错误
    2. 遍历Promise数组,通过resolve静态方法等待每一个兑现
    3. 任何一个兑现,调用resolve传递兑现结果
    4. 任何一个拒绝,调用reject传递拒绝原因

手写Promise-静态方法all

需求:

  1. 接收Promise数组
    1. 所有Promise都成功时，返回一个成功的Promise对象及成功数组
    2. 任何一个Promise失败，返回一个失败的Promise对象及第一个失败原因
const p1 = HMPromise.resolve(1)
const p2 = new HMPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(2)
    // reject('error')
  }, 1000)
})
const p3 = 3
HMPromise.all([p1, p2, p3]).then(res => {
  console.log('res:', res)
}, err => {
  console.log('err:', err)
})

核心步骤:

  1. 返回Promise
  2. 判断参数是否未数组:
    1. 不是:直接报错
  3. 是:
    1. 空数组直接兑现
  4. 处理全部兑现:记录结果->判断全部兑现
    1. 处理第一个拒绝
static all(promises) {
    // 1. 返回Promise实例
    return new HMPromise((resolve, reject) => {
      // 2. 判断是否为数组
      if (!Array.isArray(promises)) {
        return reject(new TypeError('Argument is not iterable'))
      }
      // 3. 空数组直接兑现
      promises.length === 0 && resolve(promises)
      // 4.1 记录结果
      const results = []
      let count = 0
      promises.forEach((p, index) => {
        HMPromise.resolve(p).then(res => {
          // results.push 无法保证 结果的顺序和Promise数组的顺序一致
          // index 和 Promise实例的索引一致,保证顺序
          results[index] = res
          // 4.2 判断全部兑现
          count++
          count === promises.length && resolve(results)
        }, err => {
          // 5. 处理第一个拒绝
          reject(err)
        })
      })
    })
  }
面试回答:

手写Promise-静态方法all

  1. 添加静态方法all
  2. 内部返回Promise实例,在返回的Promise实例中:
    1. 判断参数是否为数组,不是通过reject传递错误
    2. 空数组直接以空数组为结果进行兑现
    3. 遍历Promise数组,通过resolve静态方法等待结果
      1. 处理全部兑现:
        1. 通过数组记录结果,用索引的方式来添加,目的是保证结果的顺序和Promise数组的顺序一致
        2. 通过兑现次数进行判断,因为是通过索引的方式记录结果,如果第一次兑现的是最后一个,那么数组的长度就已经和Promise数组的长度一致了,所以需要通过兑现次数来进行判断
      2. 任意一个拒绝,调用reject传递拒绝原因

手写Promise-静态方法allSettled

需求:-传送门

  1. 传入Promise数组，当所有对象都已敲定时
  2. 返回一个新的Promise对象及以数组形式保存的结果
const p1 = HMPromise.resolve(1)
const p2 = 2
const p3 = new HMPromise((resolve, reject) => {
  setTimeout(() => {
    reject(3)
  }, 1000)
})
HMPromise.allSettled([p1, p2, p3]).then(res => {
  console.log('res:', res)
}, err => {
  console.log('err:', err)
})

核心步骤:

  1. 返回Promise
  2. 判断是否为数组:
    1. 不是:报错
    2. 是:
      1. 空数组:直接兑现
      2. 等待全部敲定:并记录结果
        1. 处理兑现:{state:FULFILLED,value:'xxx'}
        2. 处理拒绝:{state:REJECTED,reason:'xxx'}
  static allSettled(promises) {
    // 1. 返回Promise
    return new HMPromise((resolve, reject) => {
      // 2. 数组判断
      if (!Array.isArray(promises)) {
        return reject(new TypeError('Argument is not iterable'))
      }
      // 3. 为空直接敲定
      promises.length === 0 && resolve(promises)

      // 4. 等待全部敲定
      // 4.1 记录结果
      const results = []
      let count = 0
      promises.forEach((p, index) => {
        HMPromise.resolve(p).then(res => {
          // 4.2 处理兑现{status:'fulfilled',value:''}
          results[index] = { status: FULFILLED, value: res }
          count++
          count === promises.length && resolve(results)
        }, err => {
          // 4.3 处理拒绝{status:'rejected',reason:''}
          results[index] = { status: REJECTED, reason: err }
          count++
          count === promises.length && resolve(results)
        })
      })
    })
  }
面试回答:

手写Promise-静态方法allSettled

做法和all方法类似,区别是要获取全部敲定的结果(成功/拒绝),以及获取的结果是对象形式

  1. 添加静态方法allSettled
  2. 内部返回Promise实例,在返回的Promise实例中:
    1. 判断参数是否为数组,不是通过reject传递错误
    2. 空数组直接以空数组为结果进行兑现
  3. 遍历Promise数组,通过resolve静态方法等待敲定结果
  4. 等待全部敲定:并记录结果,根据兑现和拒绝将如下格式的内容通过索引的方式的记录到数组中
    1. 处理兑现:{state:FULFILLED,value:'xxx'}
    2. 处理拒绝:{state:REJECTED,reason:'xxx'}
  5. 根据敲定的次数判断是否全部敲定,全部敲定之后,通过resolve传递结果数组

手写Promise-静态方法any

需求:-传送门

  1. 传入Promise数组，
    1. 任何一个Promise对象敲定时，返回一个新的Promise对象，及对应的结果
    2. 所有Promise都被拒绝时，返回一个包含所有拒绝原因的AggregateError错误数组
const p1 = new HMPromise((resolve, reject) => {
  setTimeout(() => {
    reject(1)
  }, 2000)
})
const p2 = 2
const p3 = new HMPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(3)
    // reject(3)
  }, 1000)
})
HMPromise.any([p1, p2, p3]).then(res => {
  console.log('res:', res)
}, err => {
  console.dir(err)
})

核心步骤:

  1. 返回Promise
  2. 判断是否为数组
    1. 不是:报错
    2. 是:
      1. 空数组:直接拒绝
      2. 等待结果:
        1. 第一个兑现
        2. 全部拒绝
  static any(promises) {
    // 1. 返回Promise,数组判断
    return new HMPromise((resolve, reject) => {
      if (!Array.isArray(promises)) {
        return reject(new TypeError('Argument is not iterable'))
      }
      // 2. 空数组直接拒绝
      promises.length === 0 && reject(new AggregateError(promises, 'All promises were rejected'))

      // 3. 等待结果
      const errors = []
      let count = 0
      promises.forEach((p, index) => {
        HMPromise.resolve(p).then(res => {
          // 3.1 第一个兑现
          resolve(res)
        }, err => {
          // 3.2 全部拒绝
          errors[index] = err
          count++
          count === promises.length && reject(new AggregateError(errors, 'All promises were rejected'))
        })
      })
    })
  }
面试回答:

手写Promise-静态方法any

做法和all方法也有点类似,区别是获取第一个兑现,或者是全部拒绝

  1. 添加静态方法any
  2. 内部返回Promise实例,在返回的Promise实例中:
    1. 判断参数是否为数组,不是通过reject传递错误
    2. 空数组直接以空数组为结果进行兑现
  3. 遍历Promise数组,通过resolve静态方法等待结果
    1. 第一个兑现,通过resolve传递兑现结果
    2. 全部拒绝:
      1. 定义数组,保存拒绝原因,通过索引记录,目的是保证顺序和Promise数组一致
      2. 通过次数判断是否全部拒绝,当全部拒绝时,通过reject传递AggregateError类型的错误,并将拒绝原因数组传递进去即可
秀秀_heo
关注
专栏目录
ES6——Promise（一）
fenger_c的博客
08-26 166
Promise是一个对象，它代表了一个异步操作的最终完成或者失败。 本质上Promise是一个函数返回的对象，我们可以在它上面绑定回调函数 Promise 对象的两个特点 1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态： pending: 初始状态，不是成功或失败状态。 fulfilled: 意味着操作成功完成。 rejected: 意味着操作失败。 只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名...
手写Promise内部实现原理
weixin_47342392的博客
09-20 215
手写Promise内部实现原理，分为几个步骤，每个步骤都会详细解释
javascript之手写一个promise
hello，是翠花呀
05-09 673
promise promise 的三个状态：pending（未完成）、fulfilled（完成）、reject（拒绝） 一个常见操作： new Promise((resolve, reject) => { //一些请求 this.$axios .get("/", { params: { id: id } }) .then(res => { resol...
手写Promise
m0_59113449的博客
02-12 554
手写promise过程
手写Promise的静态方法
Sixology的博客
11-06 229
1.手写请求超时方法 let request = ajax('./api'); let timeout = new Promise((resolve,reject)=>{ setTimeout(()=>{ reject('timeout'); },5000) }) Promise.race([ request, timeout ]).then((res)=>{ console.log(res); }).catch((err)=&gt
all方法 手写promise_Promise静态方法(all, race)实现
weixin_32893479的博客
12-21 188
先在浏览器控制台使用下Promise.all看下它干了啥可以看到Promise.all()函数参数是一个promise数组(p1, p2)，返回值也是一个promise。同时返回的promise里resolve的值是参数数组中每个promise的结果组成的数组，而且是参数中所有promise都执行完按序输出（上图中在1100ms后打印出[1, 2]）。同时只要参数数组中其中任何一个promise运...
手写Promise.resolve,Promise.reject, Promise.all
qiansitong的博客
07-07 201
Promise
JS手写Promise.resolve()
Dou_Hua6的博客
03-07 542
实现Promise.resolve() 传参为一个 thenable 对象，返回的 Promise会跟随这个对象，采用它的最终状态作为自己的状态。其他情况，直接返回以该值为成功状态的promise对象。传参为一个 Promise, 则直接返回它。
手写Promise方法（实现Promise A+规范）
Bulijiujiu的博客
12-18 235
[译]Promise/A+ 规范 ] [ https://zhuanlan.zhihu.com/p/143204897 ]旁白：其实这个解决程序才是实现核心Promise最难的一部分。在构造函数执行后，箭头函数可以绑定实例对象的 this 指向。在构造函数执行后，箭头函数可以绑定实例对象的 this 指向。规范：两个参数作为函数第一次调用优先，以后的调用都会被忽略。pending：待定状态。方法执行后才会由 pending 更改为此状态。方法执行后才会由 pending 更改为此状态。
Promise 的实例方法和静态方法有哪些，如何手动实现？
郊眠寺
06-08 2765
导读：Promise 是异步编程的一种解决方案，比传统的回调函数或事件更合理和更灵活。本文主要展示 Promise 提供的方法列表，以及基本的实现原理。通过本文，我们能加深 Promise 方法的理解和场景使用，对 Promise.all、Promise.race、Promise.allSettled 和 Promise.any 四个方法的异同之处也有更深层次的领悟。Promise 的实例方法有 then/catch/finally 三种，静态方法有 all/race/allSettled/any/reso
深入理解 JavaScript 中的 Promise ：从基础概念到进阶用法、手写promise
最新发布
Allen-
07-10 3160
Promise是JavaScript中的一种对象，用于表示一个在未来某个时间点才会完成（或失败）的异步操作及其结果。它提供了一种处理异步操作的统一接口，使代码更加简洁和易于理解。与传统的回调函数相比，Promise能够更好地处理异步操作的结果和错误。Promise作为JavaScript中处理异步操作的一种重要机制，极大地简化了代码编写和异步流程控制。
手写Promise - 实例方法catch、finally
willemwei023的博客
07-17 767
手写Promise - 实现一个基础的Promise 手写Promise - 实例方法catch、finally 手写Promise - 常用静态方法all、any、resolve、reject、race 上一篇文章手写了一个基础的Promise，我们继续来完善它，为其添加经常用到的catch和finally方法 catch & finally catch() 方法返回一个Promise，并且处理拒绝的情况。我们知道then方法的第二个参数其实就是干这个用的，catch只是一个别名。 finally
手把手一行一行代码教你“手写Promise“，完美通过 Promises/A+ 官方872个测试用例
圆圆的 JavaScript 博客
12-20 1706
保姆级教程，看完还不懂的私聊我亲自教！
手写一个promise用法_JS手写一个自定义Promise操作示例
weixin_39609071的博客
12-22 176
本文实例讲述了JS手写一个自定义Promise操作。分享给大家供大家参考，具体如下：经常在面试题中会看到，让你实现一个Promsie,或者问你实现Promise的原理，所以今天就尝试利用class类的形式来实现一个Promise为了不与原生的Promise命名冲突，这里就简单命名为MyPromise.class MyPromise {constructor(executor) {let _this...
手写Promise-最终篇
热门推荐
往事不回头,余生不将就
09-28 1万+
前言 这里呢是我写的全部promise源码，包含以下功能 1、promise核心函数 2、promise核心函数resolve() 3、promise核心函数reject() 4、then方法链式调用 5、promise.reject() 6、promise.ersolve() 7、promise.finally() 8、promise.race() 9、promise.all() //其实还有promise.any(), promise.try(),promise.all.
手写Promise - 常用静态方法all、resolve、reject、race
willemwei023的博客
07-26 555
手写Promise - 实现一个基础的Promise 手写Promise - 实例方法catch、finally 手写Promise - 常用静态方法all、resolve、reject、race 先来回顾一下，上一章节之后的代码。 class WPromise { static pending = 'pending'; static fulfilled = 'fulfilled'; static rejected = 'rejected'; constructor(executor) { t
all方法 手写promise_手写Promise - 常用静态方法all、resolve、reject、race
weixin_36315079的博客
12-30 269
先来回顾一下，上一章节之后的代码。class WPromise {static pending = 'pending';static fulfilled = 'fulfilled';static rejected = 'rejected';constructor(executor) {this.status = WPromise.pending; // 初始化状态为pendingthis.valu...
手写promise原理系列六：封装Promise.resolve方法，Promise.resolve的用法
ThisEqualThis的博客
03-13 1156
在前面几篇文章中，我们封装了 Promise 构造函数、原型对象方法 then 以及 catch ，相信大家是有所收获的，接下来的篇章我们去探寻一下 Promise 构造函数的静态方法：resolve、reject、all以及race方法。Promise.resolve 方法接受一个参数，可以是 promise 对象，也可以是非 promise 对象的任意值。下一章节探讨一下和 Promise.resolve 相对应的 api：Promise.reject 方法的使用以及封装。
【手写 Promise 源码】第九篇 - Promise.resolve 和 Promise.reject 的实现
BraveWangDev
01-30 507
本篇，主要实现了 Promise 的两个静态 API（类方法）：Promise.resolve 和 Promise.reject：1，Promise.resolve 创建并返回一个成功的 promise； 2，Promise.reject 创建并返回一个失败的 promise；3，Promise.resolve 会等待异步操作完成`Promise.reject` 失败会直接返回；
手写promise的方法
09-01
另外，手写Promise的方法主要是为了更好地理解Promise的工作原理和实现方式，实际开发中通常会直接使用JavaScript中内置的Promise对象。<span class="em">1</span><span class="em">2</span><span class="em">3 ####...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

秀秀_heo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值