惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - Franky
T
Tailwind CSS Blog
Microsoft Azure Blog
Microsoft Azure Blog
The Cloudflare Blog
博客园 - 叶小钗
N
Netflix TechBlog - Medium
罗磊的独立博客
量子位
MyScale Blog
MyScale Blog
A
About on SuperTechFans
Blog — PlanetScale
Blog — PlanetScale
V
Visual Studio Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
GbyAI
GbyAI
B
Blog
腾讯CDC
爱范儿
爱范儿
Recent Announcements
Recent Announcements
有赞技术团队
有赞技术团队
F
Fortinet All Blogs
雷峰网
雷峰网
G
Google Developers Blog
Google DeepMind News
Google DeepMind News

开飞机的老张

AGENTS.md Openspec 使用心得 从树莓派内网穿透到 Cloudflare Pages Openclaw和博客 郊眠寺 采石 译:我为什么使用Map(和WeakMap)处理DOM节点 介绍JavaScript中Symbol 原生JavaScript获取URL参数 字符串首字母大写 用forEach()遍历对象 JavaScript禁用按钮 JavaScript的FormData JavaScript的Blob 用FileReader读取本地文件 JavaScript的Thenable JavaScript中Promise的reject JavaScript的立即调用函数表达式(IIFE) JavaScript的Promise链 用interact.js实现拖拽、缩放、吸附 使用bluebird操作Promise JavaScript创建Promise JavaScript比较数组
JavaScript中Promise的catch函数
kaifeiji.cc · 2023-03-01 · via 开飞机的老张

原文:The Promise catch() Function in JavaScript

Promise的catch函数是一个很方便的语法糖,用于处理Promise中的错误。

JavaScript的Promise是一个代表异步操作的对象。Promise就像是一个还未计算完成的值的占位符,一旦异步操作失败,JavaScript会将Promise置为rejected状态catch()函数会在Promise变为rejected时进行调用。

1
2
3
4
5
const p = Promise.reject(new Error('Oops!'));

p.catch(err => {
err.message;
});

.catch()的一个主要好处是,可以捕获Promise链中任意一环发生的错误。

1
2
3
4
5
6
7
8
9
10
11
const p = Promise.resolve('Na');

return p.
then(str => str + ' Na').
then(str => str + ' Na').
then(str => str + ' Na').
then(() => { throw new Error('Batman!') }).
then(() => console.log('Will not print')).
catch(err => {
err.message;
});

也就是说可以在一个Promise链的最后加上catch(),来处理整条链上的错误。

重新抛出错误

try/catch类似,在.catch()中可以重新抛出错误。

1
2
3
4
5
6
7
const p = Promise.reject(new Error('Oops!'));

return p.
catch(err => { throw err; }).
catch(err => {
err.message;
});

正因如此,在catch()中处理错误时,要特别小心未捕获的错误。如果传入.catch()的函数抛出错误,而没有后续的.catch(),会导致“未处理的Promise错误”。

拆包错误

如果在.catch()中返回一个值,那么awaitthen()会“拆包”这个值。

1
2
3
4
5
6
7
8
9
10
const p = Promise.reject(new Error('Oops!'));

const answer = await p.catch(() => 42);
answer;

return p.
catch(() => 42).
then(answer => {
answer;
});

换言之,在JavaScript中可以用像Golang的语法处理异步错误

1
2
3
4
const p = Promise.reject(new Error('Oops!'));

const err = await p.catch(err => err);
err.message;

与then()比较

catch()函数只是基于Promise的then()函数的语法糖。回忆一下then()的2个参数:

  • onFulfilled(): JavaScript会在底层异步操作成功后调用
  • onRejected(): JavaScript会在底层异步操作失败后调用

.catch(fn)相当于.then(null, fn),以下是catch()的最简单的polyfill:

1
2
3
Promise.prototype.catch = function(onRejected) {
return this.then(null, onRejected);
};

其实用.then()也能处理Promise的错误:

1
2
3
4
5
const p = Promise.reject(new Error('Oops!'));

return p.then(() => {}, function onRejected(err) {
err.message;
});