实现 promise.finally

Promise.prototype.finally() 方法返回一个Promise。它在Promise被解决(无论是fulfilled还是rejected)后都会执行指定的回调函数。这为在Promise是否成功完成后都需要执行的代码提供了一种方便的方式。finally并不会改变Promise的结果值,而是返回原Promise或者一个新的Promise。

实现Promise.prototype.finally

要实现finally方法,我们需要考虑以下几点:1. finally回调不接受任何参数,因为它的目的是在Promise完成后执行一些清理工作,而不关心Promise的结果。2. finally应该返回一个Promise,这个Promise的解决状态和原Promise相同。3. 如果finally回调中返回了一个Promise,那么外部链上的后续Promise应该等待这个Promise也完成后才继续执行。基于以上考虑,我们可以这样实现Promise.prototype.finally:

js 复制代码
Promise.prototype.finally = function(callback) {
  // `this` 指向当前Promise实例
  return this.then(
    // Promise成功时执行的函数
    value => Promise.resolve(callback()).then(() => value),
    // Promise失败时执行的函数
    reason => Promise.resolve(callback()).then(() => { throw reason; })
  );
};

解释

  • this.then(...):我们通过调用.then方法来确保无论原Promise是fulfilled还是rejected,callback都会被执行。

  • value => Promise.resolve(callback()).then(() => value):如果原Promise成功,我们首先执行callback,并确保callback的返回值(如果有的话)被Promise.resolve包装,这样即使callback返回了一个Promise,它也会被正确处理。之后,我们通过.then(() => value)确保返回一个新的Promise,这个Promise解决为原Promise的值。

  • reason => Promise.resolve(callback()).then(() => { throw reason; }):如果原Promise失败,处理方式类似,不同之处在于我们需要通过throw reason来确保返回的Promise被拒绝,并且拒绝的原因与原Promise相同。

js 复制代码
let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("result"), 1000);
});

promise
  .then(result => console.log(result))
  .finally(() => console.log("Promise completed"))
  .then(() => console.log("Chain continued"));

在这个示例中,无论promise是成功还是失败,"Promise completed"都会被打印出来。而且,由于finally不改变Promise的结果,所以"Chain continued"也会在finally之后被打印。通过这种方式,finally提供了一种无论Promise结果如何都需要执行某些操作的简洁方法,这在进行资源清理等操作时特别有用。

相关推荐
小白学习日记39 分钟前
【复习】HTML常用标签<table>
前端·html
丁总学Java1 小时前
微信小程序-npm支持-如何使用npm包
前端·微信小程序·npm·node.js
yanlele1 小时前
前瞻 - 盘点 ES2025 已经定稿的语法规范
前端·javascript·代码规范
懒羊羊大王呀2 小时前
CSS——属性值计算
前端·css
xgq2 小时前
使用File System Access API 直接读写本地文件
前端·javascript·面试
用户3157476081352 小时前
前端之路-了解原型和原型链
前端
永远不打烊2 小时前
librtmp 原生API做直播推流
前端
北极小狐2 小时前
浏览器事件处理机制:从硬件中断到事件驱动
前端
无咎.lsy2 小时前
vue之vuex的使用及举例
前端·javascript·vue.js
fishmemory7sec2 小时前
Electron 主进程与渲染进程、预加载preload.js
前端·javascript·electron