ES10 中的新特性：Promise.prototype.finally() 的实战应用-JavaScript中文网-JavaScript教程资源分享门户

ES10 中的新特性：Promise.prototype.finally() 的实战应用

在前端开发中，异步操作是不可避免的。而 Promise 对象，是一种用于处理异步操作的标准化解决方案，其可以优雅地处理异步回调地狱问题。在 ES10 中，Promise 对象新增了一个实用的方法：Promise.prototype.finally()，本文将介绍其用法及实战应用。

Promise.prototype.finally() 方法

Promise.prototype.finally() 方法返回一个新的 Promise 对象，该对象在 Promise 对象状态改变后（无论是 resolve 还是 reject），都会执行指定的回调函数。该方法带有一个函数参数，该函数会在 Promise 对象已经 settled（即变成fulfilled 或 rejected）后被调用。该方法主要用于无论 promise 被 reject 还是 resolve 都要执行的任务。

Promise.prototype.finally(onFinally)

参数：onFinally 是当 Promise 对象 settle 时要调用的函数。

返回值：返回一个新的 Promise 对象。

实战应用

下面我们将以实际应用中常见的场景为例，来介绍 Promise.prototype.finally() 的使用方法。

场景：Ajax 请求数据时，在请求的过程中需要显示一个加载中的提示，请求完成后需要隐藏该提示。

传统方法：

我们可以定义一个 showLoading 和 hideLoading 方法，用于显示和隐藏加载提示：

function showLoading() {
  // 显示加载提示
}
function hideLoading() {
  // 隐藏加载提示
}

然后在请求的过程中，则需要手动调用这两个方法：

showLoading();
$.ajax({...})
.done(function(data){ 
  // 请求成功处理 
})
.fail(function(status){ 
  // 请求失败处理 
})
.always(function(){ 
 hideLoading(); 
});

可以看到，在 Promise 对象中使用传统的方式，代码会变得很冗长。而使用 Promise.prototype.finally() 方法，可以有效地简化代码，实现如下：

showLoading();
$.ajax({...})
  .then(function(data) { 
    // 请求成功处理 
  })
  .catch(function(status) { 
    // 请求失败处理 
  })
  .finally(function() { 
    hideLoading(); 
  });

可以看到，使用 Promise.prototype.finally() 方法可以简化代码，更加优雅。

还有一个实际应用的例子是对请求时的状态进行更详细的输出，例如，前端请求数据时，需要打印请求参数，请求地址以及请求响应结果。这时，可以使用 Promise.prototype.finally() 方法来实现这一需求：

function fetchApi(url, params) {
 console.log(`请求地址：${url}, 请求参数:${params}`);
 showLoading();
 fetch(url, params)
 .then(response => response.json())
 .then(data => {
   console.log("请求成功，data：", data);
   // 处理请求响应结果
 })
 .catch(error => {
   console.log("请求失败，error:", error);
   // 处理请求错误
 })
 .finally(() => {
   hideLoading();
 });
}

在这里我们通过 console.log 输出了请求地址和参数，并在请求成功和失败时分别输出了响应和错误信息。

总结

在实际开发中，Promise 对象是不可避免的，而 Promise.prototype.finally() 方法的出现，旨在帮助开发者更加优雅地处理一些无论 resolve 还是 reject 时都需要执行的任务。在本文中，我们通过实际场景的演示，掌握了 Promise.prototype.finally() 方法的使用，希望能对前端开发者有所帮助。

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

ES10 中的新特性：Promise.prototype.finally() 的实战应用

纠错反馈