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

相关推荐
然我3 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子8 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹12 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器18 分钟前
指定阿里镜像原理
前端
枷锁—sha23 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha24 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜40 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss