在前端开发中，我们经常会遇到异步操作的场景，比如请求后端 API 或者操作本地存储等。而 Promise 是处理异步操作的一种机制，它可以使异步操作更加简洁、易于管理和维护。在 ES8 中，Promise 新增了一个方法 Promise.prototype.finally()，可以在 Promise 状态转变为 resolved 或者 rejected 时执行某些操作，不管 Promise 的状态如何都会被执行。本文将介绍如何利用 Promise.prototype.finally() 方法改进代码，提升编码效率和代码可读性。
Promise.prototype.finally() 方法基础知识
Promise.prototype.finally() 方法接受一个回调函数作为参数，这个回调函数会在 Promise 状态转变为 resolved 或者 rejected 时被执行，不管 Promise 的状态如何都会被执行。这个方法返回一个新的 Promise 对象，它的状态和之前的 Promise 状态一样，参数和返回值都与 Promise 原本的状态保持一致。
下面是 Promise.prototype.finally() 方法的使用示例：
-- -------------------- ---- -------
-------------
-------------- -- -
-- ------- --------
--
-------------- -- -
-- ------- --------
--
----------- -- -
-- ------ --------
---在上面的代码中，不论 Promise 是 resolved 还是 rejected，Promise.prototype.finally() 中的回调函数都会被执行。
Promise.prototype.finally() 方法的使用场景
在实际的项目中，我们经常需要在异步操作完成后执行一些清理工作，不论 Promise 是 resolved 还是 rejected。比如，我们可以在请求后端 API 成功后关闭 loading 动画，或者在请求失败后提示用户。在这些场景下，Promise.prototype.finally() 方法就可以发挥作用。
下面是一个使用 Promise.prototype.finally() 方法的示例：
-- -------------------- ---- -------
-------- -------------- -
--------------
------ ----------
---------------- -- -
--------------
------ ----------------
--
-------------- -- -
--------------
------------- -- ----- -------
--
----------- -- -
------------------ ---- ------------
---
-在上述示例中，当调用 fetchData() 函数时，会先显示 loading 动画，然后发起请求获取数据，如果请求成功则隐藏 loading 动画，如果请求失败则弹出提示框，最后打印一条完成信息。
其他注意点
在使用 Promise.prototype.finally() 方法时，需要注意以下几点：
- 回调函数没有参数：Promise.prototype.finally() 方法的回调函数没有参数，无法获取之前的 resolved 或 rejected 值。
- 返回值与原 Promise 保持一致：Promise.prototype.finally() 方法返回一个新的 Promise 对象，它的状态和之前的 Promise 状态一样，参数和返回值都与 Promise 原本的状态保持一致。
- 兼容性问题：Promise.prototype.finally() 方法是 ES8 新增的方法，在一些低版本浏览器中可能不支持，需要使用 polyfill 进行兼容。
总结
利用 ES8 引入的 Promise.prototype.finally() 方法可以方便地添加一些清理工作，使得代码更加简洁、易于维护和管理。在开发过程中，建议多加利用此方法，提升编码效率和代码可读性。
示例代码：
-- -------------------- ---- -------
-------- -------------- -
--------------
------ ----------
-------------- -- -
-------------------------
------ ----------------
--
------------ -- -
-------------------
----- ------
--
----------- -- -
--------------
---
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647acf73968c7c53b0673240