ES9 中的新特性：Promise.finally 方法

Promise 是一种异步编程的解决方案，已经成为现代 Web 开发中不可缺少的工具之一。ES9 中，Promise.finally 方法被加入到了 Promise 中，为开发者提供了更方便的 Promise API。

Promise.finally 方法的作用

在 Promise 常用的 then 方法中，只有成功和失败两种状态，无法区分这两种状态的后续操作。而 Promise.finally 方法则不同，它可以在 Promise 成功或失败后都执行指定的操作，无论 Promise 的状态如何，都将运行。例如，清除资源，更新视图等。

Promise.finally 方法的语法

Promise.finally 方法的语法如下：

promise.finally(onFinally)

其中，promise 表示一个 Promise 对象，onFinally 表示一个函数，在 Promise 结束时被调用，无论 Promise 是成功还是失败。

Promise.finally 方法的示例

下面是一个使用 Promise.finally 方法的示例：

function loadScript(src) {
  return new Promise(function(resolve, reject) {
    let script = document.createElement('script');
    script.src = src;

    script.onload = () => resolve(script);
    script.onerror = () => reject(new Error('加载脚本失败'));

    document.head.append(script);
  });
}

loadScript('https://cdn.jsdelivr.net/npm/vue/dist/vue.js')
  .then(script => {
    console.log(`${script.src} 脚本加载成功`);
    // 操作 Vue
    Vue.use(Vuex);
    Vue.component('my-component', { /* ... */ });
    // ...
  })
  .catch(error => console.error(error))
  .finally(() => {
    console.log('Promise 已结束，清理资源');
    // 清理资源
  });

在上面的示例中，我们使用了 loadScript 函数来加载 Vue.js 脚本，然后在加载成功后，我们进行了一系列的 Vue 相关操作。在操作完成后，我们还添加了一个 finally 回调函数，用于清理资源。

Promise.finally 方法的实际应用

Promise.finally 方法能够帮助开发者在 Promise 结束时，无论它是成功还是失败，都能进行必要的清理操作，最大程度地保证代码的健壮性。在实际开发中，我们可以将其用于以下场景：

• 清理资源：在异步操作完成后，尤其是在操作涉及页面中 DOM 元素等资源时，需要在 Promise 结束后清理资源。
• 页面加载进度条：在页面加载期间，我们可以通过 Promise 来通知进度条的显示和隐藏，以优化用户体验。

总结

Promise.finally 方法是 ES9 中一个非常实用的新特性，可以帮助开发者在 Promise 结束后进行必要的清理操作，提高代码的健壮性。在实际开发中，我们可以根据实际需求，灵活运用 Promise.finally 方法，以更好地优化代码和用户体验。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65948b28eb4cecbf2d8e7135