ES9 中的 Promise.prototype.finally() 方法使用场景分析

在 ES9 中，新增了 Promise.prototype.finally() 方法，该方法会在 promise 被 resolved 或 rejected 后，无论是否有错误，都会执行一段指定的代码块。该方法的用法和场景都非常实用，接下来我们将详细分析一下该方法的使用场景。

什么是 Promise.prototype.finally() 方法？

Promise.prototype.finally() 方法返回一个新的 promise，该 promise 会在当前 promise 被 resolved 或 rejected 后执行一段指定的代码块，无论是否有错误。该方法不会对当前 promise 的值进行任何修改，而是返回一个新的 promise。

Promise.prototype.finally() 方法的使用场景

1. 代码重构

在代码重构的过程中，我们常常需要在异步请求的后面执行一些指定的代码，例如关闭 loading 状态，或者恢复一些 UI 界面等等。此时，我们可以使用 Promise.prototype.finally() 方法，在 promise 被 resolved 或 rejected 后，执行这些指定的代码。

例如：

// javascriptcn.com 代码示例
function loadData () {
  showLoading () // 显示 loading 状态

  return fetch(url)
    .then(response => {
      // 处理响应结果
    })
    .catch(error => {
      // 处理错误
    })
    .finally(() => {
      hideLoading() // 隐藏 loading 状态
    })
}

2. 资源清理

在一些特殊情况下，我们可能需要对某些资源进行清理操作。例如，当我们使用 WebSocket 连接时，需要在连接关闭后，手动清理一些资源。此时，我们可以使用 Promise.prototype.finally() 方法，在 promise 被 resolved 或 rejected 后，执行资源清理的操作。

例如：

// javascriptcn.com 代码示例
const ws = createWebSocket()

ws.onopen = event => {
  // 处理 WebSocket 连接建立成功的回调
}

ws.onmessage = message => {
  // 处理 WebSocket 消息的回调
}

ws.onclose = event => {
  // 处理 WebSocket 连接关闭的回调
}

function closeWebSocket () {
  if (ws.readyState === WebSocket.OPEN) {
    ws.close()
  }
}

window.addEventListener('beforeunload', event => {
  // 当窗口关闭前，先关闭 WebSocket 连接，并清理一些资源
  event.preventDefault()
  closeWebSocket()
})

function sendMessage () {
  const message = getMessageFromUI()
  return new Promise((resolve, reject) => {
    ws.send(message)
    ws.onmessage = event => {
      resolve(event.data)
    }
    ws.onerror = event => {
      reject(event.error)
    }
  }).finally(() => {
    closeWebSocket() // 在 promise 被 resolved 或 rejected 后，都会执行该代码块
  })
}

Promise.prototype.finally() 方法总结

在实际开发中，Promise.prototype.finally() 方法的使用场景非常的广泛，例如在代码重构、资源清理等方面都非常的实用。通过合理的使用该方法，我们可以使我们的代码更加的健壮和稳定。希望本文的分析和示例代码能够对你有所启发和指导，让你的前端开发工作更加的高效和出色。

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