静下心来的个人专栏
上一篇

Promise的catch()方法和finally()方法

广告
选中文字可对指定文章内容进行评论啦,→和←可快速切换按钮,绿色背景文字可以点击查看评论额。
大纲

Promise的catch()

Promise 还有一个 catch() 方法,当只传递一个rejection处理程序时,它的行为与 then() 相同。 例如,以下 catch() 和 then() 调用在功能上是等效的:

 const promise = fetch("books.json");

 promise.catch(reason => {
 	// rejection
 	console.error(reason.message);
 });

 // is the same as:

 promise.then(null, reason => {
 	// rejection
 	console.error(reason.message);
 });

then() 和 catch() 背后的意图是让您结合使用它们来清楚地表明结果是如何处理的。 这个系统比事件和回调更好,因为它完全清楚promise成功或失败。(出现错误时,事件往往不会触发,而在回调函数中,必须始终记住检查错误参数。)只要知道如果您没有在promise设置一个rejection handler,那么 JavaScript 运行时将向控制台发送消息,或抛出错误,或两者兼而有之(取决于运行时)。

 

Promise的finally()

与 then() 和 catch() 一起使用的还有 finally()。无论成功或失败,都会调用传递给 finally() 的回调(称为结算处理程序)。与 then() 和 catch() 的回调不同,finally() 回调不接收任何参数,因为不清楚promise是fullfillment还是reject。因为结算处理程序在fullfillment和reject时都被调用,所以它类似于(但不一样;在第 2 章中进一步讨论)使用 then() 为履行和拒绝传递处理程序。 这是一个例子:

 const promise = fetch("books.json");

 promise.finally(() => {
 	// no way to know if fulfilled or rejected
 	console.log("Settled");
 });

 // is similar to:

 const callback = () => {
 console.log("Settled");
 };

 promise.then(callback, callback);

只要您不访问传递给回调的参数,这两个示例之间的行为是相同的。 然而,与 catch() 一样,与 then() 相比,使用 finally() 会使您的意图更清晰。

当您想知道操作已完成并且您不关心结果时,结算处理程序很有用。 例如,您可能希望在 fetch() 请求处于活动状态时在网页上显示加载指示器,然后在请求完成时将其隐藏。 请求是否成功并不重要,因为一旦请求完成,加载指示器就会停止。 您的 Web 应用程序中可能有这样的代码:

 const appElement = document.getElementById("app");
 const promise = fetch("books.json");

 appElement.classList.add("loading");

 promise.then(() => {
 // handle success
 });

 promise.catch(() => {
 // handle failure
 });

 promise.finally(() => {
 appElement.classList.remove("loading");
 });

在这里,appElement 表示将整个应用程序包装在页面上的 HTML 元素。 使用 fetch() 发起网络请求,并将 CSS 类“加载”添加到 HTML 元素(允许您根据需要更改任何样式)。 当网络请求完成时,promise 被解决,并且结算处理程序从 HTML 元素中删除“正在加载”类以重置应用程序状态。 您仍然可以使用 then() 和 catch() 来响应成功和失败,而 finally() 仅处理状态更改。 如果没有 finally(),您将需要在fullfillment handler和rejection handler中删除“加载”类。

使用 finally() 添加的结算处理程序不会阻止拒绝向控制台输出错误或抛出错误。 您仍然必须添加拒绝处理程序以防止在这种情况下引发错误。

 

版权声明:著作权归作者所有。

X

欢迎加群学习交流

联系我们