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

推荐订阅源

让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
T
The Exploit Database - CXSecurity.com
WordPress大学
WordPress大学
L
LangChain Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
博客园 - 聂微东
J
Java Code Geeks
T
Tailwind CSS Blog
大猫的无限游戏
大猫的无限游戏
博客园 - 【当耐特】
阮一峰的网络日志
阮一峰的网络日志
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
Engineering at Meta
Engineering at Meta
M
MIT News - Artificial intelligence
A
About on SuperTechFans
Simon Willison's Weblog
Simon Willison's Weblog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
博客园 - 叶小钗
D
Darknet – Hacking Tools, Hacker News & Cyber Security
T
Threatpost
T
Threat Research - Cisco Blogs
GbyAI
GbyAI
P
Proofpoint News Feed
The GitHub Blog
The GitHub Blog
AWS News Blog
AWS News Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
S
Securelist
I
InfoQ
N
News and Events Feed by Topic
I
Intezer
A
Arctic Wolf
P
Proofpoint News Feed
Martin Fowler
Martin Fowler
L
Lohrmann on Cybersecurity
S
Secure Thoughts
P
Privacy & Cybersecurity Law Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
SecWiki News
SecWiki News
P
Palo Alto Networks Blog
MongoDB | Blog
MongoDB | Blog
Security Archives - TechRepublic
Security Archives - TechRepublic
H
Help Net Security
B
Blog
Recent Commits to openclaw:main
Recent Commits to openclaw:main
V2EX - 技术
V2EX - 技术
S
SegmentFault 最新的问题
Application and Cybersecurity Blog
Application and Cybersecurity Blog
人人都是产品经理
人人都是产品经理
PCI Perspectives
PCI Perspectives
F
Fortinet All Blogs

开飞机的老张

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) 用interact.js实现拖拽、缩放、吸附
JavaScript的Promise链
kaifeiji.cc · 2023-07-24 · via 开飞机的老张

原文:JavaScript Promise Chaining

Promise链式调用是一种很强大的模式,最大的好处是可以用一个catch()处理所有的错误。

Promise链,比回调函数有更好的语义结构。关键点在于Promise的then()函数返回另一个Promise,因此可以链式调用.then(),实现按一定顺序执行异步操作。

1
2
3
4
5
6
7
const start = Date.now();
return Promise.resolve().
then(() => new Promise(resolve => setTimeout(resolve, 50))).
then(() => new Promise(resolve => setTimeout(resolve, 50))).
then(v => {
console.log(Date.now() - start);
});

返回值

then()函数的第一个参数是onFulfilled(),JavaScript会在Promise状态变为fulfilled时,调用该函数,传入该函数的第一个参数就时resolve返回的值。

如果onFulfilled()函数返回一个Promise q,调用Promise的then()沿用q的状态,其返回值具有和q相同的resolve返回值。这就是Promise链的工作原理。

1
2
3
4
5
6
7
8
9
10
11
12
13
return Promise.resolve(1).



then(v => new Promise(resolve => setTimeout(() => resolve(v + 1), 10))).
then(v => new Promise(resolve => setTimeout(() => resolve(v + 1), 10))).
then(v => new Promise(resolve => setTimeout(() => resolve(v + 1), 10))).


then(v => v + 1).
then(v => {
console.log(v);
});

错误处理

Promise链对错误进行了合并处理。你只需要在Promise链的最后调用一次.catch()函数,就可以处理Promise链中任何位置发生的错误。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Promise.resolve(1).
then(v => v + 1).

then(() => Promise.reject(new Error('Oops'))).
then(v => v + 1).
catch(err => {
err.message;
});

Promise.resolve(1).
then(v => v + 1).

then(() => { throw new Error('Oops'); }).
then(v => v + 1).
catch(err => {
err.message;
});

总结

Promise链的结构,包含一系列的.then()调用,每个都带有onFulfilled()参数,以及结尾的.catch()。JavaScript按顺序执行.then()的回调函数,在onFulfilled()函数发生错误时,直接进入.catch()

Promise链执行逻辑

async/await是JavaScript中并发的未来趋势。“Mastering Async/Await”教你如何在几个小时内,用async/await构建前后端APP,来看看吧!