实现 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结果如何都需要执行某些操作的简洁方法,这在进行资源清理等操作时特别有用。

相关推荐
10年前端老司机1 小时前
什么!纯前端也能识别图片中的文案、还支持100多个国家的语言
前端·javascript·vue.js
摸鱼仙人~1 小时前
React 性能优化实战指南:从理论到实践的完整攻略
前端·react.js·性能优化
程序员阿超的博客2 小时前
React动态渲染:如何用map循环渲染一个列表(List)
前端·react.js·前端框架
magic 2452 小时前
模拟 AJAX 提交 form 表单及请求头设置详解
前端·javascript·ajax
小小小小宇7 小时前
前端 Service Worker
前端
只喜欢赚钱的棉花没有糖7 小时前
http的缓存问题
前端·javascript·http
小小小小宇8 小时前
请求竞态问题统一封装
前端
loriloy8 小时前
前端资源帖
前端
源码超级联盟8 小时前
display的block和inline-block有什么区别
前端
GISer_Jing8 小时前
前端构建工具(Webpack\Vite\esbuild\Rspack)拆包能力深度解析
前端·webpack·node.js