cainiaoblog 23.2.171

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (401) hide show
  1. package/CNAME +1 -0
  2. package/MP_verify_o6dHCK5mIkxNpzvZ.txt +1 -0
  3. package/README.md +8 -0
  4. package/about/index.html +54 -0
  5. package/ads.txt +1 -0
  6. package/app/manual.html +104 -0
  7. package/appConfigs/config +1 -0
  8. package/archives/2018/index.html +48 -0
  9. package/archives/2019/index.html +48 -0
  10. package/archives/2019/page/2/index.html +48 -0
  11. package/archives/2020/index.html +48 -0
  12. package/archives/2021/index.html +48 -0
  13. package/archives/2022/index.html +48 -0
  14. package/archives/2023/index.html +48 -0
  15. package/archives/index.html +48 -0
  16. package/archives/page/2/index.html +48 -0
  17. package/archives/page/3/index.html +48 -0
  18. package/article/10047.html +148 -0
  19. package/article/10164.html +64 -0
  20. package/article/10624.html +436 -0
  21. package/article/10745.html +586 -0
  22. package/article/11674.html +71 -0
  23. package/article/11939.html +72 -0
  24. package/article/12238.html +86 -0
  25. package/article/1230.html +533 -0
  26. package/article/13265.html +69 -0
  27. package/article/13823.html +78 -0
  28. package/article/14125.html +72 -0
  29. package/article/14192.html +561 -0
  30. package/article/14375.html +85 -0
  31. package/article/14744.html +83 -0
  32. package/article/14936.html +451 -0
  33. package/article/1518.html +250 -0
  34. package/article/15428.html +71 -0
  35. package/article/15518.html +288 -0
  36. package/article/15569.html +418 -0
  37. package/article/1566.html +122 -0
  38. package/article/16017.html +156 -0
  39. package/article/16947.html +440 -0
  40. package/article/17096.html +82 -0
  41. package/article/17246.html +89 -0
  42. package/article/17575.html +350 -0
  43. package/article/179.html +757 -0
  44. package/article/18039.html +233 -0
  45. package/article/18071.html +375 -0
  46. package/article/18142.html +71 -0
  47. package/article/19909.html +160 -0
  48. package/article/20014.html +89 -0
  49. package/article/20021.html +389 -0
  50. package/article/20037.html +280 -0
  51. package/article/20056.html +95 -0
  52. package/article/20093.html +404 -0
  53. package/article/2021.html +607 -0
  54. package/article/20459.html +115 -0
  55. package/article/20613.html +263 -0
  56. package/article/20635.html +71 -0
  57. package/article/21317.html +71 -0
  58. package/article/21320.html +90 -0
  59. package/article/21782.html +548 -0
  60. package/article/22230.html +435 -0
  61. package/article/22237.html +347 -0
  62. package/article/22398.html +109 -0
  63. package/article/22422.html +270 -0
  64. package/article/22565.html +300 -0
  65. package/article/23046.html +250 -0
  66. package/article/23083.html +215 -0
  67. package/article/23195.html +297 -0
  68. package/article/23301.html +835 -0
  69. package/article/23589.html +285 -0
  70. package/article/23655.html +338 -0
  71. package/article/23864.html +76 -0
  72. package/article/23914.html +96 -0
  73. package/article/24169.html +135 -0
  74. package/article/24581.html +349 -0
  75. package/article/2475.html +500 -0
  76. package/article/24826.html +77 -0
  77. package/article/24924.html +247 -0
  78. package/article/25164.html +1495 -0
  79. package/article/25318.html +394 -0
  80. package/article/25710.html +1129 -0
  81. package/article/25734.html +83 -0
  82. package/article/26083.html +174 -0
  83. package/article/26147.html +283 -0
  84. package/article/26291.html +110 -0
  85. package/article/26354.html +71 -0
  86. package/article/26624.html +145 -0
  87. package/article/26639.html +298 -0
  88. package/article/26850.html +138 -0
  89. package/article/26940.html +258 -0
  90. package/article/27796.html +190 -0
  91. package/article/27800.html +161 -0
  92. package/article/28963.html +159 -0
  93. package/article/28976.html +247 -0
  94. package/article/29042.html +72 -0
  95. package/article/29596.html +81 -0
  96. package/article/29619.html +183 -0
  97. package/article/29623.html +329 -0
  98. package/article/29829.html +205 -0
  99. package/article/29abbd1c.html +112 -0
  100. package/article/30215.html +178 -0
  101. package/article/30552.html +78 -0
  102. package/article/30818.html +201 -0
  103. package/article/31330.html +364 -0
  104. package/article/3154.html +577 -0
  105. package/article/31695.html +348 -0
  106. package/article/31826.html +71 -0
  107. package/article/31843.html +132 -0
  108. package/article/32280.html +212 -0
  109. package/article/32431.html +74 -0
  110. package/article/32443.html +72 -0
  111. package/article/32732.html +122 -0
  112. package/article/3286.html +251 -0
  113. package/article/32960.html +198 -0
  114. package/article/33713.html +72 -0
  115. package/article/33899.html +615 -0
  116. package/article/34351.html +74 -0
  117. package/article/34372.html +89 -0
  118. package/article/34410.html +74 -0
  119. package/article/34431.html +118 -0
  120. package/article/3447.html +75 -0
  121. package/article/34474.html +142 -0
  122. package/article/34871.html +147 -0
  123. package/article/35397.html +175 -0
  124. package/article/3544.html +199 -0
  125. package/article/35503.html +115 -0
  126. package/article/35624.html +84 -0
  127. package/article/35697.html +384 -0
  128. package/article/35863.html +73 -0
  129. package/article/36037.html +253 -0
  130. package/article/36118.html +71 -0
  131. package/article/3621.html +119 -0
  132. package/article/36251.html +296 -0
  133. package/article/36642.html +352 -0
  134. package/article/37102.html +763 -0
  135. package/article/37336.html +351 -0
  136. package/article/37351.html +89 -0
  137. package/article/3760.html +294 -0
  138. package/article/37749.html +75 -0
  139. package/article/37789.html +83 -0
  140. package/article/38005.html +765 -0
  141. package/article/38009.html +284 -0
  142. package/article/38269.html +194 -0
  143. package/article/38344.html +88 -0
  144. package/article/38359.html +334 -0
  145. package/article/38423.html +379 -0
  146. package/article/38530.html +213 -0
  147. package/article/38743.html +268 -0
  148. package/article/38753.html +204 -0
  149. package/article/38881.html +71 -0
  150. package/article/39087.html +414 -0
  151. package/article/39309.html +84 -0
  152. package/article/39486.html +74 -0
  153. package/article/39637.html +306 -0
  154. package/article/39839.html +72 -0
  155. package/article/39937.html +152 -0
  156. package/article/39970.html +71 -0
  157. package/article/402.html +559 -0
  158. package/article/40698.html +71 -0
  159. package/article/40811.html +71 -0
  160. package/article/40964.html +462 -0
  161. package/article/41011.html +322 -0
  162. package/article/41152.html +78 -0
  163. package/article/41696.html +71 -0
  164. package/article/41717.html +281 -0
  165. package/article/41777.html +149 -0
  166. package/article/419.html +985 -0
  167. package/article/4233.html +136 -0
  168. package/article/4292.html +86 -0
  169. package/article/43302.html +96 -0
  170. package/article/43397.html +106 -0
  171. package/article/43724.html +281 -0
  172. package/article/43999.html +224 -0
  173. package/article/44426.html +77 -0
  174. package/article/44964.html +137 -0
  175. package/article/45004.html +123 -0
  176. package/article/4510.html +83 -0
  177. package/article/45156.html +320 -0
  178. package/article/45157.html +52 -0
  179. package/article/45267.html +87 -0
  180. package/article/45641.html +207 -0
  181. package/article/45960.html +75 -0
  182. package/article/46100.html +1262 -0
  183. package/article/46366.html +74 -0
  184. package/article/46771.html +96 -0
  185. package/article/46911.html +517 -0
  186. package/article/46948.html +137 -0
  187. package/article/46ee4850.html +349 -0
  188. package/article/47019.html +84 -0
  189. package/article/47532.html +94 -0
  190. package/article/4783.html +429 -0
  191. package/article/47972.html +72 -0
  192. package/article/48216.html +127 -0
  193. package/article/48252.html +185 -0
  194. package/article/48520.html +74 -0
  195. package/article/48722.html +75 -0
  196. package/article/48807.html +99 -0
  197. package/article/49126.html +323 -0
  198. package/article/50001.html +88 -0
  199. package/article/50058.html +151 -0
  200. package/article/50343.html +410 -0
  201. package/article/50510.html +82 -0
  202. package/article/51082.html +98 -0
  203. package/article/51677.html +111 -0
  204. package/article/5204.html +1085 -0
  205. package/article/52500.html +538 -0
  206. package/article/52689.html +259 -0
  207. package/article/52877.html +569 -0
  208. package/article/53125.html +191 -0
  209. package/article/53428.html +251 -0
  210. package/article/53524.html +74 -0
  211. package/article/53698.html +322 -0
  212. package/article/53803e6.html +93 -0
  213. package/article/53924.html +291 -0
  214. package/article/53962.html +253 -0
  215. package/article/54006.html +71 -0
  216. package/article/54018.html +88 -0
  217. package/article/54161.html +83 -0
  218. package/article/54178.html +69 -0
  219. package/article/54258.html +327 -0
  220. package/article/54295.html +214 -0
  221. package/article/54313.html +1976 -0
  222. package/article/54351.html +90 -0
  223. package/article/54604.html +80 -0
  224. package/article/54632.html +71 -0
  225. package/article/54912.html +756 -0
  226. package/article/54918.html +129 -0
  227. package/article/55119.html +136 -0
  228. package/article/55756.html +118 -0
  229. package/article/55769.html +136 -0
  230. package/article/55870.html +161 -0
  231. package/article/56139.html +92 -0
  232. package/article/56557.html +69 -0
  233. package/article/56604.html +69 -0
  234. package/article/56816.html +266 -0
  235. package/article/56926.html +153 -0
  236. package/article/57747.html +409 -0
  237. package/article/57965.html +475 -0
  238. package/article/58816.html +78 -0
  239. package/article/59059.html +435 -0
  240. package/article/59095.html +350 -0
  241. package/article/59349.html +244 -0
  242. package/article/59402.html +216 -0
  243. package/article/59448.html +55 -0
  244. package/article/59870.html +94 -0
  245. package/article/59877.html +208 -0
  246. package/article/5dbb6f41.html +86 -0
  247. package/article/6008.html +75 -0
  248. package/article/60327.html +126 -0
  249. package/article/6035.html +76 -0
  250. package/article/60428.html +71 -0
  251. package/article/60544.html +128 -0
  252. package/article/61319.html +95 -0
  253. package/article/61367.html +93 -0
  254. package/article/624d1918.html +292 -0
  255. package/article/62543.html +71 -0
  256. package/article/62887.html +169 -0
  257. package/article/63074.html +120 -0
  258. package/article/63266.html +311 -0
  259. package/article/63351.html +74 -0
  260. package/article/63542.html +104 -0
  261. package/article/63824.html +275 -0
  262. package/article/64051.html +653 -0
  263. package/article/64189b69.html +72 -0
  264. package/article/64354.html +75 -0
  265. package/article/64869.html +79 -0
  266. package/article/64923.html +596 -0
  267. package/article/65128.html +95 -0
  268. package/article/65295.html +79 -0
  269. package/article/6888.html +75 -0
  270. package/article/7065.html +84 -0
  271. package/article/7455.html +85 -0
  272. package/article/7a3ef8f.html +315 -0
  273. package/article/8140.html +188 -0
  274. package/article/8190.html +85 -0
  275. package/article/8225.html +78 -0
  276. package/article/84c9ccd6.html +159 -0
  277. package/article/8f9a9ae3.html +82 -0
  278. package/article/9174.html +73 -0
  279. package/article/9738.html +294 -0
  280. package/article/a4145266.html +71 -0
  281. package/article/bedea419.html +72 -0
  282. package/article/bf7e7421.html +78 -0
  283. package/article/c1867fbf.html +103 -0
  284. package/article/c5576490.html +70 -0
  285. package/article/dcb0db28.html +76 -0
  286. package/article/fc3b727a.html +79 -0
  287. package/atom.xml +445 -0
  288. package/baidusitemap.xml +1079 -0
  289. package/blocks/dns.txt +264 -0
  290. package/blocks/filter.txt +1070 -0
  291. package/blocks/script.js +42 -0
  292. package/categories/CDN/index.html +48 -0
  293. package/categories/IDE/index.html +48 -0
  294. package/categories/git/index.html +48 -0
  295. package/categories/hexo/index.html +48 -0
  296. package/categories//345/205/254/345/205/261/350/212/202/346/227/245/index.html +48 -0
  297. package/categories//345/210/206/344/272/253/index.html +48 -0
  298. package/categories//345/211/215/347/253/257/index.html +48 -0
  299. package/categories//345/211/215/347/253/257/page/2/index.html +48 -0
  300. package/categories//345/211/215/347/253/257//346/265/217/350/247/210/345/231/250/index.html +48 -0
  301. package/categories//345/211/215/347/253/257//346/265/217/350/247/210/345/231/250//347/275/221/347/273/234/345/215/217/350/256/256/index.html +48 -0
  302. package/categories//345/215/232/345/256/242/index.html +48 -0
  303. package/categories//345/267/245/345/205/267/index.html +48 -0
  304. package/categories//345/271/277/345/221/212/350/277/207/346/273/244/index.html +48 -0
  305. package/categories//345/271/277/345/221/212/350/277/207/346/273/244//350/247/206/351/242/221/347/224/265/350/247/206/345/260/217/350/257/264/346/274/253/347/224/273/350/265/204/350/256/257/351/237/263/344/271/220/index.html +48 -0
  306. package/categories//346/255/243/345/210/231/index.html +48 -0
  307. package/categories//346/265/217/350/247/210/345/231/250/index.html +48 -0
  308. package/categories//347/256/227/346/263/225/index.html +48 -0
  309. package/categories//350/265/204/350/256/257/index.html +48 -0
  310. package/categories//350/275/273/346/235/276/344/270/200/345/210/273/index.html +48 -0
  311. package/cdn/css/font-awesome.min.css +4 -0
  312. package/cdn/css/grids-responsive-min.css +7 -0
  313. package/cdn/css/normalize.css +349 -0
  314. package/cdn/css/pure-min.css +11 -0
  315. package/cdn/fonts/fontawesome-webfont.eot +0 -0
  316. package/cdn/fonts/fontawesome-webfont.svg +2671 -0
  317. package/cdn/fonts/fontawesome-webfont.ttf +0 -0
  318. package/cdn/fonts/fontawesome-webfont.woff +0 -0
  319. package/cdn/fonts/fontawesome-webfont.woff2 +0 -0
  320. package/cdn/js/Valine.min.js +17 -0
  321. package/cdn/js/canvas-nest.js +1 -0
  322. package/cdn/js/clipboard.min.js +7 -0
  323. package/cdn/js/crypto-js.js +25 -0
  324. package/cdn/js/jquery.min.js +2 -0
  325. package/css/default.css +1144 -0
  326. package/css/donate.css +338 -0
  327. package/css/hbe.style.css +749 -0
  328. package/css/style.css +2095 -0
  329. package/donate/index.html +39 -0
  330. package/google917dcf72f6e5c7f5.html +1 -0
  331. package/guestbook/index.html +68 -0
  332. package/hosts/ads.txt +149 -0
  333. package/hosts/flash.txt +9 -0
  334. package/hosts/github.txt +6 -0
  335. package/hosts/google.txt +16936 -0
  336. package/hosts/winrar.txt +2 -0
  337. package/img/alipay.svg +46 -0
  338. package/img/bitcoin.svg +135 -0
  339. package/img/blog.ico +0 -0
  340. package/img/blog.png +0 -0
  341. package/img/gaba.png +0 -0
  342. package/img/github.svg +1 -0
  343. package/img/like.svg +1 -0
  344. package/img/mp-mini.jpg +0 -0
  345. package/img/mp.png +0 -0
  346. package/img/paypal.svg +63 -0
  347. package/img/upy_logo.svg +59 -0
  348. package/img/wechat.svg +49 -0
  349. package/index.html +48 -0
  350. package/jd_root.txt +1 -0
  351. package/js/codeblock-resizer.js +51 -0
  352. package/js/dark.js +12 -0
  353. package/js/donate.js +87 -0
  354. package/js/fixedPage.js +106 -0
  355. package/js/gitment.browser.js +3751 -0
  356. package/js/search.js +86 -0
  357. package/js/share.js +60 -0
  358. package/js/smartresize.js +32 -0
  359. package/js/totop.js +12 -0
  360. package/kankan/index.html +77 -0
  361. package/lib/hbe.js +293 -0
  362. package/package.json +25 -0
  363. package/page/10/index.html +49 -0
  364. package/page/11/index.html +59 -0
  365. package/page/12/index.html +67 -0
  366. package/page/13/index.html +63 -0
  367. package/page/14/index.html +66 -0
  368. package/page/15/index.html +60 -0
  369. package/page/16/index.html +60 -0
  370. package/page/17/index.html +62 -0
  371. package/page/18/index.html +61 -0
  372. package/page/19/index.html +58 -0
  373. package/page/2/index.html +48 -0
  374. package/page/20/index.html +57 -0
  375. package/page/21/index.html +61 -0
  376. package/page/22/index.html +55 -0
  377. package/page/23/index.html +64 -0
  378. package/page/24/index.html +60 -0
  379. package/page/25/index.html +58 -0
  380. package/page/26/index.html +48 -0
  381. package/page/27/index.html +58 -0
  382. package/page/3/index.html +48 -0
  383. package/page/4/index.html +48 -0
  384. package/page/5/index.html +51 -0
  385. package/page/6/index.html +51 -0
  386. package/page/7/index.html +51 -0
  387. package/page/8/index.html +53 -0
  388. package/page/9/index.html +48 -0
  389. package/randomcall/README.html +1 -0
  390. package/randomcall/lucker.html +290 -0
  391. package/randomcall/lucky.png +0 -0
  392. package/robots.txt +22 -0
  393. package/search.xml +6740 -0
  394. package/sitemap.xml +2669 -0
  395. package/tags//345/216/237/345/210/233/index.html +48 -0
  396. package/tags//345/250/261/344/271/220/index.html +48 -0
  397. package/tags//346/211/213/345/206/231/index.html +48 -0
  398. package/tags//347/226/253/346/203/205/index.html +48 -0
  399. package/tags//350/275/254/350/275/275/index.html +48 -0
  400. package/tags//350/275/254/350/275/275/page/2/index.html +48 -0
  401. package/v.html +90 -0
package/article/40964.html ADDED
@@ -0,0 +1,462 @@
1
+ <!DOCTYPE html><html lang="zh-CN" data-dark><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta name="description" content="前端壹菜鸟，记录工作难题，关注前端知识，收集精彩博文，做技术的搬运工"><meta name="msvalidate.01" content="0FE4D8B3381D3D87088996B886E1E2BD"><title>Promise的三兄弟：all(), race()以及allSettled() | 前端壹菜鸟</title><link rel="stylesheet" type="text/css" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/css/style.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/normalize.css@latest/normalize.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/pure-min.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss@latest/build/grids-responsive-min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"><link rel="icon" mask="" sizes="any" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="Shortcut Icon" type="image/x-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.ico"><link rel="apple-touch-icon" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="apple-touch-icon-precomposed" href="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/blog.png"><link rel="alternate" type="application/atom+xml" href="/atom.xml"><script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8385136408348258"></script><script src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script><script>(function(){
2
+ var bp = document.createElement('script');
3
+ var curProtocol = window.location.protocol.split(':')[0];
4
+ if (curProtocol === 'https'){
5
+ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
6
+ }
7
+ else{
8
+ bp.src = 'http://push.zhanzhang.baidu.com/push.js';
9
+ }
10
+ var s = document.getElementsByTagName("script")[0];
11
+ s.parentNode.insertBefore(bp, s);
12
+ })();
13
+ </script><script>(function(){
14
+ var src = 'https://jspassport.ssl.qhimg.com/11.0.1.js?d182b3f28525f2db83acfaaf6e696dba';
15
+ document.write('<script src="' + src + '" id="sozz"><\/script>');
16
+ })();
17
+ </script><script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src='https://hm.baidu.com/hm.js?011f0b44e8452bfa57fbfa23c5fe7683';var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();
18
+ </script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-150860401-1"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);};gtag('js',new Date());gtag('config','UA-150860401-1');
19
+ </script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/fixedPage.min.js"></script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="body_container"><div id="header"><div class="site-name"><a id="logo" href="/.">前端壹菜鸟</a><p class="description">关注前端知识，收集精彩博文，做技术的搬运工</p></div><div id="nav-menu"><a class="current" href="/." target="_self"><i class="fa fa-home"> 首页</i></a><a href="/archives/" target="_self"><i class="fa fa-archive"> 归档</i></a><a href="/guestbook/" target="_self"><i class="fa fa-comments"> 留言</i></a><a href="/about/" target="_self"><i class="fa fa-user"> 关于</i></a><a href="https://laonongmin.online/" target="_target"><i class="fa fa-group"> 看看</i></a><a href="https://love.xuehuayu.cn/" target="_target"><i class="fa fa-heart"> LOVE</i></a></div></div><div class="pure-g" id="layout"><div class="pure-u-1 pure-u-md-3-4"><div class="content_container"><div class="post"><h1 class="post-title c-post">Promise的三兄弟：all(), race()以及allSettled()</h1><div class="post-meta"><span class="date">2019-12-09</span><span> | </span><span class="tag"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载 </a></span><span> | </span><span class="category"><a href="/categories/%E5%89%8D%E7%AB%AF/">前端 </a></span><span id="busuanzi_container_page_pv"> | <span id="busuanzi_value_page_pv"><i class="fa fa-spinner"></i></span><span> 阅读</span></span><span class="post-time"><span class="post-meta-item-text"> | </span><span class="post-meta-item-icon"><i class="fa fa-keyboard-o"></i><span class="post-count"> 3.2k</span><span class="post-meta-item-text"> 字</span></span></span><span class="post-time"> | <span class="post-meta-item-icon"><i class="fa fa-hourglass-half"></i><span class="post-count"> 14</span><span class="post-meta-item-text"> 分钟</span></span></span></div><a class="disqus-comment-count" href="/article/40964.html#vcomment"><span class="waline-comment-count" data-path="/article/40964.html"></span><span> 条评论</span></a><div class="post-content"><p><code>原文地址：https://mp.weixin.qq.com/s/K9tbMPHd_jPm-5t_vrXS0w</code></p>
20
+ <p>从ES6 开始，我们大都使用的是 <code>Promise.all()</code>和<code>Promise.race()</code>，<code>Promise.allSettled()</code> 提案已经到第4阶段，因此将会成为<code>ECMAScript 2020</code>的一部分。</p>
21
+ <span id="more"></span>
22
+
23
+ <p><img src="https://img.php.cn/upload/article/000/000/006/5dc38083af027708.jpg" alt="xuehuayu.cn"></p>
24
+ <h2 id="1-概述"><a href="#1-概述" class="headerlink" title="1.概述"></a>1.概述</h2><p><strong>Promise.all(promises: Iterable<Promise>): Promise<Array></strong></p>
25
+ <ul>
26
+ <li><code>Promise.all(iterable)</code> 方法返回一个 <code>Promise</code> 实例，此实例在 <code>iterable</code> 参数内所有的 <code>promise</code> 都“完成（resolved）”或参数中不包含 <code>promise</code> 时回调完成（resolve）；如果参数中 <code>promise</code> 有一个失败（rejected），此实例回调失败（reject），失败原因的是第一个失败 <code>promise</code> 的结果</li>
27
+ </ul>
28
+ <p><strong>Promise.race(promises: Iterable<Promise>): Promise</strong></p>
29
+ <ul>
30
+ <li><strong>Promise.race(iterable)</strong> 方法返回一个 <code>promise</code>，一旦迭代器中的某个<code>promise</code>解决或拒绝，返回的 <code>promise</code>就会解决或拒绝。</li>
31
+ </ul>
32
+ <p><strong>Promise.allSettled(promises: Iterable<Promise>): Promise&lt;Array<SettlementObject>&gt;</strong></p>
33
+ <ul>
34
+ <li>**Promise.allSettled()**方法返回一个<code>promise</code>，该<code>promise</code>在所有给定的<code>promise</code>已被解析或被拒绝后解析，并且每个对象都描述每个<code>promise</code>的结果。</li>
35
+ </ul>
36
+ <h2 id="2-回顾-Promise-状态"><a href="#2-回顾-Promise-状态" class="headerlink" title="2. 回顾: Promise 状态"></a>2. 回顾: Promise 状态</h2><p>给定一个返回<code>Promise</code>的异步操作，以下这些是<code>Promise</code>的可能状态：</p>
37
+ <ul>
38
+ <li>pending: 初始状态，既不是成功，也不是失败状态。</li>
39
+ <li>fulfilled: 意味着操作成功完成。</li>
40
+ <li>rejected: 意味着操作失败。</li>
41
+ <li>Settled： <code>Promise</code>要么被完成，要么被拒绝。<code>Promise</code>一旦达成，它的状态就不再改变。</li>
42
+ </ul>
43
+ <p><img src="https://img.php.cn/upload/image/175/208/404/1573093063915131.png" alt="1573093063915131.png"></p>
44
+ <h2 id="3-什么是组合"><a href="#3-什么是组合" class="headerlink" title="3.什么是组合"></a>3.什么是组合</h2><p>又称部分-整体模式，将对象整合成树形结构以表示“部分整体”的层次结构。组合模式使得用户对单个对象和组合对象的使用具有一致性，它基于两种函数：</p>
45
+ <ul>
46
+ <li>基元函数(简短:基元)创建原子块。</li>
47
+ <li>组合函数（简称：组合）将原子和&#x2F;或复合件组合在一起以形成复合件。</li>
48
+ </ul>
49
+ <p>对于 JS 的 Promises 来说</p>
50
+ <ul>
51
+ <li>基元函数包括:<code>Promise.resolve()</code>、<code>Promise.reject()</code></li>
52
+ <li>组合函数：<code>Promise.all()</code>, <code>Promise.race()</code>, <code>Promise.allSettled()</code></li>
53
+ </ul>
54
+ <h2 id="4-Promise-all"><a href="#4-Promise-all" class="headerlink" title="4. Promise.all()"></a>4. Promise.all()</h2><p><code>Promise.all()</code>的类型签名:</p>
55
+ <ul>
56
+ <li><strong>Promise.all(promises: Iterable<Promise>): Promise<Array></strong></li>
57
+ </ul>
58
+ <p>返回情况：</p>
59
+ <p><strong>完成（Fulfillment）：</strong><br>如果传入的可迭代对象为空，<code>Promise.all</code> 会同步地返回一个已完成（<code>resolved</code>）状态的<code>promise</code>。<br>如果所有传入的 <code>promise</code> 都变为完成状态，或者传入的可迭代对象内没有 <code>promise</code>，<code>Promise.all</code> 返回的 <code>promise</code> 异步地变为完成。<br>在任何情况下，<code>Promise.all</code> 返回的 <code>promise</code> 的完成状态的结果都是一个数组，它包含所有的传入迭代参数对象的值（也包括非 promise 值）。</p>
60
+ <p><strong>失败&#x2F;拒绝（Rejection）：</strong><br>如果传入的 <code>promise</code> 中有一个失败（<code>rejected</code>），<code>Promise.all</code> 异步地将失败的那个结果给失败状态的回调函数，而不管其它 <code>promise</code> 是否完成。</p>
61
+ <p>来个例子：</p>
62
+ <pre><code> const promises = [
63
+ Promise.resolve(&#39;a&#39;),
64
+ Promise.resolve(&#39;b&#39;),
65
+ Promise.resolve(&#39;c&#39;),
66
+ ];
67
+ Promise.all(promises)
68
+ .then((arr) =&gt; assert.deepEqual(
69
+ arr, [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]
70
+ ));
71
+ </code></pre>
72
+ <p>如果其中的一个 promise 被拒绝，那么又是什么情况：</p>
73
+ <pre><code> const promises = [
74
+ Promise.resolve(&#39;a&#39;),
75
+ Promise.resolve(&#39;b&#39;),
76
+ Promise.reject(&#39;ERROR&#39;),
77
+ ];
78
+ Promise.all(promises)
79
+ .catch((err) =&gt; assert.equal(
80
+ err, &#39;ERROR&#39;
81
+ ));
82
+ </code></pre>
83
+ <p>下图说明<code>Promise.all()</code>是如何工作的</p>
84
+ <p><img src="https://img.php.cn/upload/image/492/848/339/1573093085354076.png" alt="1573093085354076.png"></p>
85
+ <h4 id="4-1-异步-map-与-Promise-all"><a href="#4-1-异步-map-与-Promise-all" class="headerlink" title="4.1 异步 .map() 与 Promise.all()"></a>4.1 异步 .map() 与 Promise.all()</h4><p>数组转换方法，如<code>.map()</code>、<code>.filter()</code>等，用于同步计算。例如</p>
86
+ <pre><code> function timesTwoSync(x) &#123;
87
+ return 2 * x;
88
+ &#125;
89
+ const arr = [1, 2, 3];
90
+ const result = arr.map(timesTwoSync);
91
+ assert.deepEqual(result, [2, 4, 6]);
92
+ </code></pre>
93
+ <p>如果<code>.map()</code>的回调是基于<code>Promise</code>的函数会发生什么？ 使用这种方式 <code>.map()</code>返回的的结果是一个<code>Promises</code>数组。</p>
94
+ <p><code>Promises</code>数组不是普通代码可以使用的数据，但我们可以通过<code>Promise.all()</code>来解决这个问题：它将Promises数组转换为<code>Promise</code>，并使用一组普通值数组来实现。</p>
95
+ <pre><code> function timesTwoAsync(x) &#123;
96
+ return new Promise(resolve =&gt; resolve(x * 2));
97
+ &#125;
98
+ const arr = [1, 2, 3];
99
+ const promiseArr = arr.map(timesTwoAsync);
100
+ Promise.all(promiseArr)
101
+ .then(result =&gt; &#123;
102
+ assert.deepEqual(result, [2, 4, 6]);
103
+ &#125;);
104
+ </code></pre>
105
+ <h4 id="更实际工作上关于-map-示例"><a href="#更实际工作上关于-map-示例" class="headerlink" title="更实际工作上关于 .map()示例"></a>更实际工作上关于 .map()示例</h4><p>接下来，咱们使用<code>.map()</code>和<code>Promise.all()</code>从<code>Web</code>下载文件。 首先，咱们需要以下帮助函数：</p>
106
+ <pre><code> function downloadText(url) &#123;
107
+ return fetch(url)
108
+ .then((response) =&gt; &#123; // (A)
109
+ if (!response.ok) &#123; // (B)
110
+ throw new Error(response.statusText);
111
+ &#125;
112
+ return response.text(); // (C)
113
+ &#125;);
114
+ &#125;
115
+ </code></pre>
116
+ <p><code>downloadText()</code>使用基于<code>Promise</code>的fetch API 以字符串流的方式下载文件：</p>
117
+ <ul>
118
+ <li>首先，它异步检索响应（第A行）。</li>
119
+ <li>response.ok（B行）检查是否存在“找不到文件”等错误。</li>
120
+ <li>如果没有错误，使用<code>.text()</code>(第C行)以字符串的形式取回文件的内容。</li>
121
+ </ul>
122
+ <p>在下面的示例中，咱们 下载了两个文件</p>
123
+ <pre><code> const urls = [
124
+ &#39;http://example.com/first.txt&#39;,
125
+ &#39;http://example.com/second.txt&#39;,
126
+ ];
127
+
128
+ const promises = urls.map(
129
+ url =&gt; downloadText(url));
130
+
131
+ Promise.all(promises)
132
+ .then(
133
+ (arr) =&gt; assert.deepEqual(
134
+ arr, [&#39;First!&#39;, &#39;Second!&#39;]
135
+ ));
136
+ </code></pre>
137
+ <h4 id="Promise-all-的一个简版实现"><a href="#Promise-all-的一个简版实现" class="headerlink" title="Promise.all()的一个简版实现"></a>Promise.all()的一个简版实现</h4><pre><code> function all(iterable) &#123;
138
+ return new Promise((resolve, reject) =&gt; &#123;
139
+ let index = 0;
140
+ for (const promise of iterable) &#123;
141
+ // Capture the current value of `index`
142
+ const currentIndex = index;
143
+ promise.then(
144
+ (value) =&gt; &#123;
145
+ if (anErrorOccurred) return;
146
+ result[currentIndex] = value;
147
+ elementCount++;
148
+ if (elementCount === result.length) &#123;
149
+ resolve(result);
150
+ &#125;
151
+ &#125;,
152
+ (err) =&gt; &#123;
153
+ if (anErrorOccurred) return;
154
+ anErrorOccurred = true;
155
+ reject(err);
156
+ &#125;);
157
+ index++;
158
+ &#125;
159
+ if (index === 0) &#123;
160
+ resolve([]);
161
+ return;
162
+ &#125;
163
+ let elementCount = 0;
164
+ let anErrorOccurred = false;
165
+ const result = new Array(index);
166
+ &#125;);
167
+ &#125;
168
+ </code></pre>
169
+ <h2 id="5-Promise-race"><a href="#5-Promise-race" class="headerlink" title="5. Promise.race()"></a>5. Promise.race()</h2><p><code>Promise.race()</code>方法的定义：</p>
170
+ <p><strong>Promise.race(promises: Iterable<Promise>): Promise</strong></p>
171
+ <p><strong>Promise.race(iterable)</strong> 方法返回一个 <code>promise</code>，一旦迭代器中的某个<code>promise</code>解决或拒绝，返回的 <code>promise</code>就会解决或拒绝。来几个例子，瞧瞧：</p>
172
+ <pre><code>const promises = [
173
+ new Promise((resolve, reject) =&gt;
174
+ setTimeout(() =&gt; resolve(&#39;result&#39;), 100)), // (A)
175
+ new Promise((resolve, reject) =&gt;
176
+ setTimeout(() =&gt; reject(&#39;ERROR&#39;), 200)), // (B)
177
+ ];
178
+ Promise.race(promises)
179
+ .then((result) =&gt; assert.equal( // (C)
180
+ result, &#39;result&#39;));
181
+ </code></pre>
182
+ <p>在第 <code>A</code> 行，<code>Promise</code> 是完成状态 ，所以 第 <code>C</code> 行会执行（尽管第 <code>B</code> 行被拒绝）。</p>
183
+ <p>如果 Promise 被拒绝首先执行，在来看看情况是嘛样的：</p>
184
+ <pre><code> const promises = [
185
+ new Promise((resolve, reject) =&gt;
186
+ setTimeout(() =&gt; resolve(&#39;result&#39;), 200)),
187
+ new Promise((resolve, reject) =&gt;
188
+ setTimeout(() =&gt; reject(&#39;ERROR&#39;), 100)),
189
+ ];
190
+ Promise.race(promises)
191
+ .then(
192
+ (result) =&gt; assert.fail(),
193
+ (err) =&gt; assert.equal(
194
+ err, &#39;ERROR&#39;));
195
+ </code></pre>
196
+ <p>注意，由于 <code>Promse</code> 先被拒绝，所以 <code>Promise.race()</code> 返回的是一个被拒绝的 <code>Promise</code></p>
197
+ <p>这意味着<code>Promise.race（[]）</code>的结果永远不会完成。</p>
198
+ <p>下图演示了<code>Promise.race()</code>的工作原理：</p>
199
+ <p><img src="https://img.php.cn/upload/image/473/488/834/1573093105471466.png" alt="1573093105471466.png"></p>
200
+ <h4 id="Promise-race-在-Promise-超时下的情况"><a href="#Promise-race-在-Promise-超时下的情况" class="headerlink" title="Promise.race() 在 Promise 超时下的情况"></a>Promise.race() 在 Promise 超时下的情况</h4><p>在本节中，我们将使用<code>Promise.race()</code>来处理超时的 <code>Promise</code>。 以下辅助函数:</p>
201
+ <pre><code> function resolveAfter(ms, value=undefined) &#123;
202
+ return new Promise((resolve, reject) =&gt; &#123;
203
+ setTimeout(() =&gt; resolve(value), ms);
204
+ &#125;);
205
+ &#125;
206
+ </code></pre>
207
+ <p><code>resolveAfter()</code> 主要做的是在指定的时间内，返回一个状态为 <code>resolve</code> 的 <code>Promise</code>，值为为传入的 <code>value</code></p>
208
+ <p>调用上面方法：</p>
209
+ <pre><code> function timeout(timeoutInMs, promise) &#123;
210
+ return Promise.race([
211
+ promise,
212
+ resolveAfter(timeoutInMs,
213
+ Promise.reject(new Error(&#39;Operation timed out&#39;))),
214
+ ]);
215
+ &#125;
216
+ </code></pre>
217
+ <p><code>timeout()</code> 返回一个<code>Promise</code>，该 <code>Promise</code> 的状态取决于传入 <code>promise</code> 状态 。</p>
218
+ <p>其中 <code>timeout</code> 函数中的 <code>resolveAfter(timeoutInMs, Promise.reject(new Error(&#39;Operation timed out&#39;))</code> ，通过 <code>resolveAfter</code> 定义可知，该结果返回的是一个被拒绝状态的 <code>Promise</code>。</p>
219
+ <p>再来看看<code>timeout(timeoutInMs, promise)</code>的运行情况。如果传入<code>promise</code>在指定的时间之前状态为完成时，<code>timeout</code> 返回结果就是一个完成状态的 <code>Promise</code>,可以通过<code>.then</code>的第一个回调参数处理返回的结果。</p>
220
+ <pre><code> timeout(200, resolveAfter(100, &#39;Result!&#39;))
221
+ .then(result =&gt; assert.equal(result, &#39;Result!&#39;));
222
+ </code></pre>
223
+ <p>相反，如果是在指定的时间之后完成，刚 <code>timeout</code> 返回结果就是一个拒绝状态的 <code>Promise</code>,从而触发<code>catch</code>方法指定的回调函数。</p>
224
+ <pre><code> timeout(100, resolveAfter(2000, &#39;Result!&#39;))
225
+ .catch(err =&gt; assert.deepEqual(err, new Error(&#39;Operation timed out&#39;)));
226
+ </code></pre>
227
+ <p>重要的是要了解“Promise 超时”的真正含义：</p>
228
+ <ol>
229
+ <li>如果传入入<code>Promise</code> 较到的得到解决，其结果就会给返回的 <code>Promise</code>。</li>
230
+ <li>如果没有足够快得到解决，输出的 <code>Promise</code> 的状态为拒绝。</li>
231
+ </ol>
232
+ <p>也就是说，超时只会阻止传入的Promise，影响输出 Promise（因为Promise只能解决一次）， 但它并没有阻止传入<code>Promise</code>的异步操作。</p>
233
+ <h4 id="5-2-Promise-race-的一个简版实现"><a href="#5-2-Promise-race-的一个简版实现" class="headerlink" title="5.2 Promise.race() 的一个简版实现"></a>5.2 Promise.race() 的一个简版实现</h4><p>以下是 <code>Promise.race()</code>的一个简化实现(它不执行安全检查)</p>
234
+ <pre><code> function race(iterable) &#123;
235
+ return new Promise((resolve, reject) =&gt; &#123;
236
+ for (const promise of iterable) &#123;
237
+ promise.then(
238
+ (value) =&gt; &#123;
239
+ if (settlementOccurred) return;
240
+ settlementOccurred = true;
241
+ resolve(value);
242
+ &#125;,
243
+ (err) =&gt; &#123;
244
+ if (settlementOccurred) return;
245
+ settlementOccurred = true;
246
+ reject(err);
247
+ &#125;);
248
+ &#125;
249
+ let settlementOccurred = false;
250
+ &#125;);
251
+ &#125;
252
+ </code></pre>
253
+ <h2 id="6-Promise-allSettled"><a href="#6-Promise-allSettled" class="headerlink" title="6.Promise.allSettled()"></a>6.Promise.allSettled()</h2><p><code>“Promise.allSettled”</code>这一特性是由<strong>Jason Williams</strong>，<strong>Robert Pamely</strong>和<strong>Mathias Bynens</strong>提出。</p>
254
+ <p><code>promise.allsettle()</code>方法的定义：</p>
255
+ <ul>
256
+ <li><strong>Promise</strong>.allSettled(promises: Iterable&lt;**Promise**&gt;)<br>: <strong>Promise</strong>&lt;**Array**<SettlementObject>&gt;</li>
257
+ </ul>
258
+ <p>它返回一个<code>Array</code>的<code>Promise</code>，其元素具有以下类型特征：</p>
259
+ <pre><code> type SettlementObject&lt;T&gt; = FulfillmentObject&lt;T&gt; | RejectionObject;
260
+
261
+ interface FulfillmentObject&lt;T&gt; &#123;
262
+ status: &#39;fulfilled&#39;;
263
+ value: T;
264
+ &#125;
265
+
266
+ interface RejectionObject &#123;
267
+ status: &#39;rejected&#39;;
268
+ reason: unknown;
269
+ &#125;
270
+ </code></pre>
271
+ <p><code>Promise.allSettled()</code>方法返回一个promise，该promise在所有给定的promise已被解析或被拒绝后解析，并且每个对象都描述每个promise的结果。</p>
272
+ <p>举例说明, 比如各位用户在页面上面同时填了3个独立的表单, 这三个表单分三个接口提交到后端, 三个接口独立, 没有顺序依赖, 这个时候我们需要等到请求全部完成后给与用户提示表单提交的情况</p>
273
+ <p>在多个<code>promise</code>同时进行时咱们很快会想到使用<code>Promise.all</code>来进行包装, 但是由于<code>Promise.all</code>的短路特性, 三个提交中若前面任意一个提交失败, 则后面的表单也不会进行提交了, 这就与咱们需求不符合.</p>
274
+ <p><code>Promise.allSettled</code>跟<code>Promise.all</code>类似, 其参数接受一个<code>Promise</code>的数组, 返回一个新的<code>Promise</code>, 唯一的不同在于, 其不会进行短路, 也就是说当<code>Promise</code>全部处理完成后我们可以拿到每个<code>Promise</code>的状态, 而不管其是否处理成功.</p>
275
+ <p>下图说明<code>promise.allsettle()</code>是如何工作的</p>
276
+ <p><img src="https://img.php.cn/upload/image/472/225/575/1573093129698473.png" alt="1573093129698473.png"></p>
277
+ <h4 id="6-1-Promise-allSettled-例子"><a href="#6-1-Promise-allSettled-例子" class="headerlink" title="6.1 Promise.allSettled() 例子"></a>6.1 Promise.allSettled() 例子</h4><p>这是<code>Promise.allSettled()</code> 使用方式快速演示示例</p>
278
+ <pre><code> Promise.allSettled([
279
+ Promise.resolve(&#39;a&#39;),
280
+ Promise.reject(&#39;b&#39;),
281
+ ])
282
+ .then(arr =&gt; assert.deepEqual(arr, [
283
+ &#123; status: &#39;fulfilled&#39;, value: &#39;a&#39; &#125;,
284
+ &#123; status: &#39;rejected&#39;, reason: &#39;b&#39; &#125;,
285
+ ]));
286
+ </code></pre>
287
+ <h4 id="6-2-Promise-allSettled-较复杂点的例子"><a href="#6-2-Promise-allSettled-较复杂点的例子" class="headerlink" title="6.2 Promise.allSettled() 较复杂点的例子"></a>6.2 Promise.allSettled() 较复杂点的例子</h4><p>这个示例类似于<code>.map()</code>和<code>Promise.all()</code>示例(我们从其中借用了<code>downloadText()</code>函数):我们下载多个文本文件，这些文件的<code>url</code>存储在一个数组中。但是，这一次，咱们不希望在出现错误时停止，而是希望继续执行。<code>Promise.allSettled()</code>允许咱们这样做：</p>
288
+ <pre><code> const urls = [
289
+ &#39;http://example.com/exists.txt&#39;,
290
+ &#39;http://example.com/missing.txt&#39;,
291
+ ];
292
+
293
+ const result = Promise.allSettled(
294
+ urls.map(u =&gt; downloadText(u)));
295
+ result.then(
296
+ arr =&gt; assert.deepEqual(
297
+ arr,
298
+ [
299
+ &#123;
300
+ status: &#39;fulfilled&#39;,
301
+ value: &#39;Hello!&#39;,
302
+ &#125;,
303
+ &#123;
304
+ status: &#39;rejected&#39;,
305
+ reason: new Error(&#39;Not Found&#39;),
306
+ &#125;,
307
+ ]
308
+ ));
309
+ </code></pre>
310
+ <h4 id="6-3-Promise-allSettled-的简化实现"><a href="#6-3-Promise-allSettled-的简化实现" class="headerlink" title="6.3 Promise.allSettled() 的简化实现"></a>6.3 Promise.allSettled() 的简化实现</h4><p>这是<code>promise.allsettle()</code>的简化实现(不执行安全检查)</p>
311
+ <pre><code> function allSettled(iterable) &#123;
312
+ return new Promise((resolve, reject) =&gt; &#123;
313
+ function addElementToResult(i, elem) &#123;
314
+ result[i] = elem;
315
+ elementCount++;
316
+ if (elementCount === result.length) &#123;
317
+ resolve(result);
318
+ &#125;
319
+ &#125;
320
+
321
+ let index = 0;
322
+ for (const promise of iterable) &#123;
323
+ // Capture the current value of `index`
324
+ const currentIndex = index;
325
+ promise.then(
326
+ (value) =&gt; addElementToResult(
327
+ currentIndex, &#123;
328
+ status: &#39;fulfilled&#39;,
329
+ value
330
+ &#125;),
331
+ (reason) =&gt; addElementToResult(
332
+ currentIndex, &#123;
333
+ status: &#39;rejected&#39;,
334
+ reason
335
+ &#125;));
336
+ index++;
337
+ &#125;
338
+ if (index === 0) &#123;
339
+ resolve([]);
340
+ return;
341
+ &#125;
342
+ let elementCount = 0;
343
+ const result = new Array(index);
344
+ &#125;);
345
+ &#125;
346
+ </code></pre>
347
+ <h2 id="7-短路特性"><a href="#7-短路特性" class="headerlink" title="7. 短路特性"></a>7. 短路特性</h2><p><code>Promise.all()</code> 和 <code>romise.race()</code> 都具有 短路特性</p>
348
+ <ul>
349
+ <li>**Promise.all()**： 如果参数中 <code>promise</code> 有一个失败（rejected），此实例回调失败（reject）</li>
350
+ </ul>
351
+ <p>**Promise.race()**：如果参数中某个<code>promise</code>解决或拒绝，返回的 promise就会解决或拒绝。</p>
352
+ <h2 id="8-并发性和-Promise-all"><a href="#8-并发性和-Promise-all" class="headerlink" title="8.并发性和 Promise.all()"></a>8.并发性和 Promise.all()</h2><h4 id="8-1-顺序执行与并发执行"><a href="#8-1-顺序执行与并发执行" class="headerlink" title="8.1 顺序执行与并发执行"></a>8.1 顺序执行与并发执行</h4><p>考虑下面的代码：</p>
353
+ <pre><code> asyncFunc1()
354
+ .then(result1 =&gt; &#123;
355
+ assert.equal(result1, &#39;one&#39;);
356
+ return asyncFunc2();
357
+ &#125;)
358
+ .then(result2 =&gt; &#123;
359
+ assert.equal(result2, &#39;two&#39;);
360
+ &#125;);
361
+ </code></pre>
362
+ <p>使用<code>.then()</code>顺序执行基于<code>Promise</code>的函数：只有在 <code>asyncFunc1()</code>的结果被解决后才会执行<code>asyncFunc2()</code> 。</p>
363
+ <p>而 <code>Promise.all()</code> 是并发执行的</p>
364
+ <pre><code> Promise.all([asyncFunc1(), asyncFunc2()])
365
+ .then(arr =&gt; &#123;
366
+ assert.deepEqual(arr, [&#39;one&#39;, &#39;two&#39;]);
367
+ &#125;);
368
+ </code></pre>
369
+ <h4 id="8-2-并发技巧：关注操作何时开始"><a href="#8-2-并发技巧：关注操作何时开始" class="headerlink" title="8.2 并发技巧：关注操作何时开始"></a>8.2 并发技巧：关注操作何时开始</h4><p>确定并发异步代码的技巧:关注异步操作何时启动，而不是如何处理它们的<strong>Promises</strong>。</p>
370
+ <p>例如，下面的每个函数都同时执行<code>asyncFunc1()</code>和<code>asyncFunc2()</code>，因为它们几乎同时启动。</p>
371
+ <pre><code> function concurrentAll() &#123;
372
+ return Promise.all([asyncFunc1(), asyncFunc2()]);
373
+ &#125;
374
+
375
+ function concurrentThen() &#123;
376
+ const p1 = asyncFunc1();
377
+ const p2 = asyncFunc2();
378
+ return p1.then(r1 =&gt; p2.then(r2 =&gt; [r1, r2]));
379
+ &#125;
380
+ </code></pre>
381
+ <p>另一方面，以下两个函数依次执行<code>asyncFunc1()</code>和<code>asyncFunc2()</code>: <code>asyncFunc2()</code>仅在<code>asyncFunc1()</code>的解决之后才调用。</p>
382
+ <pre><code> function sequentialThen() &#123;
383
+ return asyncFunc1()
384
+ .then(r1 =&gt; asyncFunc2()
385
+ .then(r2 =&gt; [r1, r2]));
386
+ &#125;
387
+
388
+ function sequentialAll() &#123;
389
+ const p1 = asyncFunc1();
390
+ const p2 = p1.then(() =&gt; asyncFunc2());
391
+ return Promise.all([p1, p2]);
392
+ &#125;
393
+ </code></pre>
394
+ <h4 id="8-3-Promise-all-与-Fork-Join-分治编程"><a href="#8-3-Promise-all-与-Fork-Join-分治编程" class="headerlink" title="8.3 Promise.all() 与 Fork-Join 分治编程"></a>8.3 Promise.all() 与 Fork-Join 分治编程</h4><p><code>Promise.all()</code> 与并发模式“fork join”松散相关。重温一下咱们前面的一个例子：</p>
395
+ <pre><code> Promise.all([
396
+ // (A) fork
397
+ downloadText(&#39;http://example.com/first.txt&#39;),
398
+ downloadText(&#39;http://example.com/second.txt&#39;),
399
+ ])
400
+ // (B) join
401
+ .then(
402
+ (arr) =&gt; assert.deepEqual(
403
+ arr, [&#39;First!&#39;, &#39;Second!&#39;]
404
+ ));
405
+ </code></pre>
406
+ <ul>
407
+ <li>Fork：在<code>A</code>行中，分割两个异步任务并同时执行它们。</li>
408
+ <li>Join：在<code>B</code>行中，对每个小任务得到的结果进行汇总。</li>
409
+ </ul>
410
+ <p>原文：<a target="_blank" rel="noopener" href="https://2ality.com/2019/08/promise-combinators.html">https://2ality.com/2019/08/promise-combinators.html</a></p>
411
+ <p>为了保证的可读性，本文采用意译而非直译。</p>
412
+ <p>以上就是Promise的三兄弟：all(), race()以及allSettled()的详细内容，更多请关注html中文网其它相关文章！</p>
413
+ </div><iframe src="/donate/?AliPayQR=https://store.xuehuayu.cn/store/public/alipay_qr.jpg&amp;WeChatQR=https://store.xuehuayu.cn/store/public/wechat_qr.png&amp;UnionPayQR=null&amp;GitHub=null&amp;BTCQR=null&amp;BTCKEY=null&amp;PayPal=https://www.paypal.com/paypalme/OrdinaryPerson" style="overflow-x:hidden; overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no"></iframe><div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者：</strong>雪花雨</li><li class="post-copyright-link"><strong>本文链接：</strong><a href="/article/40964.html">https://xuehuayu.cn/article/40964.html</a></li><li class="post-copyright-license"><strong>版权声明：</strong>① 标为原创的文章为博主原创，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接。② 转载文章来自网络，已标明出处，<a href="mailto:cainiaoblog@126.com">侵删</a>。</li></ul></div><br><div class="tags"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载</a></div><div class="post-nav"><a class="pre" href="/article/46771.html">前端面试之webpack面试常见问题</a><a class="next" href="/article/31330.html">12个提高 JavaScript 技能的概念！</a></div><div id="vcomment"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.min.css"><script src="//cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.js"></script><script>const origin = window.location.origin
414
+ const serverURL = origin.includes('cainiaoblog') ? 'https://cmts.cainiaoblog.cn' : 'https://cmts.xuehuayu.cn'
415
+ const locale = {
416
+ placeholder: '请正确填写昵称和邮箱，方便接收回复通知~',
417
+ sofa: '沙发空缺中，还不快抢~',
418
+ };
419
+ Waline.init({
420
+ el: '#vcomment',
421
+ serverURL: serverURL,
422
+ pageSize: '20',
423
+ visitor: true, // 阅读量统计
424
+ requiredMeta: ['nick', 'mail'],
425
+ emoji: [
426
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
427
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq',
428
+ 'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji',
429
+ ],
430
+ locale,
431
+ pageview: true
432
+ })
433
+ </script></div></div></div><div class="pure-u-1 pure-u-md-1-4 fixed-search hidden_mid_and_down"><div id="sidebar"><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/search.min.js"></script><div class="widget"><div class="widget-search"><input class="search" type="radio" name="search" value="baidu" id="baidu" checked="checked"/><label class="label" for="baidu" title="百度全站搜索">百度</label><input class="search" type="radio" name="search" value="google" id="google"/><label class="label" for="google" title="谷歌全站搜索">谷歌</label><input class="search" type="radio" name="search" value="self" id="self"/><label class="label" for="self" title="使用站内搜索">站内</label></div><div class="widget" id="search"><form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"/><input type="hidden" name="si" value="xuehuayu.cn"/><input type="hidden" name="cl" value="3"/><input type="hidden" name="ct" value="2097152"/><input type="hidden" name="s" value="on"/><input class="search-submit" type="submit" value=""/></form></div></div><script>$('input[type=radio][name=search]').change(function() {
434
+ var val = $(this).val()
435
+ var self = '<div class="search-form"><input id="local-search-input" placeholder="站内搜索，首次慢" type="search" name="q" results="0"><input class="search-submit" type="submit" value=""/><div id="local-search-result"></div></div>'
436
+ var google = '<form class="search-form" action="//www.google.com/search" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="q" maxlength="30" placeholder="谷歌全站搜索"><input type="hidden" name="sitesearch" value="xuehuayu.cn"><input class="search-submit" type="submit" value=""/></form>'
437
+ var baidu = '<form class="search-form" action="//www.baidu.com/baidu" method="get" accept-charset="utf-8" target="_blank"><input type="search" name="word" maxlength="30" placeholder="百度全站搜索"><input type="hidden" name="si" value="xuehuayu.cn"><input type="hidden" name="cl" value="3"><input type="hidden" name="ct" value="2097152"><input type="hidden" name="s" value="on"><input class="search-submit" type="submit" value=""/></form>'
438
+
439
+ if (val === 'self') {
440
+ $('#search').html(self)
441
+ var search_path = 'search.xml';
442
+ if (search_path.length == 0) {
443
+ search_path = 'search.xml';
444
+ }
445
+ var path = 'https://cdn.staticaly.com/gh/npljy/npljy.github.io/main/' + search_path;
446
+ searchFunc(path, 'local-search-input', 'local-search-result');
447
+ } else if (val === 'baidu') {
448
+ $('#search').html(baidu)
449
+ } else if (val === 'google') {
450
+ $('#search').html(google)
451
+ }
452
+ })</script><div class="widget widget-wxmp"><img alt="微信公众号" width="100%" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/mp-mini.jpg"/></div><div class="widget widget-categories"><div class="widget-title"><i class="fa fa-folder-o"> 分类</i></div><ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/CDN/">CDN</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/IDE/">IDE</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/git/">git</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/hexo/">hexo</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%85%AC%E5%85%B1%E8%8A%82%E6%97%A5/">公共节日</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%88%86%E4%BA%AB/">分享</a><span class="category-list-count">29</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a><span class="category-list-count">191</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">1</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF/%E6%B5%8F%E8%A7%88%E5%99%A8/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/">网络协议</a><span class="category-list-count">1</span></li></ul></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%8D%9A%E5%AE%A2/">博客</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B7%A5%E5%85%B7/">工具</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/">广告过滤</a><span class="category-list-count">8</span><ul class="category-list-child"><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%B9%BF%E5%91%8A%E8%BF%87%E6%BB%A4/%E8%A7%86%E9%A2%91%E7%94%B5%E8%A7%86%E5%B0%8F%E8%AF%B4%E6%BC%AB%E7%94%BB%E8%B5%84%E8%AE%AF%E9%9F%B3%E4%B9%90/">视频电视小说漫画资讯音乐</a><span class="category-list-count">2</span></li></ul></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%AD%A3%E5%88%99/">正则</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%B5%8F%E8%A7%88%E5%99%A8/">浏览器</a><span class="category-list-count">5</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%AE%97%E6%B3%95/">算法</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%B5%84%E8%AE%AF/">资讯</a><span class="category-list-count">16</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%BD%BB%E6%9D%BE%E4%B8%80%E5%88%BB/">轻松一刻</a><span class="category-list-count">1</span></li></ul></div><div class="widget widget-tags"><div class="widget-title"><i class="fa fa-star-o"> 标签</i></div><div class="tagcloud"><a href="/tags/%E5%8E%9F%E5%88%9B/" style="font-size: 15px;">原创</a> <a href="/tags/%E8%BD%AC%E8%BD%BD/" style="font-size: 15px;">转载</a> <a href="/tags/%E6%89%8B%E5%86%99/" style="font-size: 15px;">手写</a> <a href="/tags/%E7%96%AB%E6%83%85/" style="font-size: 15px;">疫情</a> <a href="/tags/%E5%A8%B1%E4%B9%90/" style="font-size: 15px;">娱乐</a></div></div><div class="widget widget-recent-posts"><div class="widget-title"><i class="fa fa-file-o"> 最近文章</i></div><ul class="post-list"><li class="post-list-item"><a class="post-list-link" href="/article/c5576490.html">面试准备</a></li><li class="post-list-item"><a class="post-list-link" href="/article/84c9ccd6.html">精读《SolidJS》</a></li><li class="post-list-item"><a class="post-list-link" href="/article/53803e6.html">git提交注释规范</a></li><li class="post-list-item"><a class="post-list-link" href="/article/a4145266.html">前端数组拍平flat一行代码</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bedea419.html">一道前端this面试题</a></li><li class="post-list-item"><a class="post-list-link" href="/article/bf7e7421.html">git多账号配置</a></li></ul></div><div class="widget widget-links"><div class="widget-title"><i class="fa fa-external-link"> 友情链接</i></div><ul></ul><a href="https://github.com/npljy?utm_source=xuehuayu.cn" title="GitHub" target="_blank">GitHub</a><ul></ul><a href="https://laonongmin.online?utm_source=xuehuayu.cn" title="看看" target="_blank">看看</a><ul></ul><a href="https://cainiaoblog.cn?utm_source=xuehuayu.cn" title="菜鸟博客" target="_blank">菜鸟博客</a><ul></ul><a href="mailto:cainiaoblog@126.com" title="友链联系" target="_blank">友链联系</a></div></div></div><div class="pure-u-1 pure-u-md-3-4"><div id="footer"><div class="flex-block justify-center align-center flex-wrap"><a class="gxba-link" id="gxba" rel="nofollow" target="_blank" href="http://beian.miit.gov.cn/">京ICP备20007647号-2</a><a class="gaba-link" id="gaba-link" rel="nofollow" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031264"><img class="nofancybox" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/gaba.png" alt=""/><span id="gaba">京公网安备 11010802031264号</span><span style="padding-right: 10px;"></span></a><span>Copyright © 2023 </span><a href="/." rel="nofollow">前端壹菜鸟. </a><script>(function(){
453
+ var cnb =window.location.origin.indexOf('cainiaoblog') !==-1
454
+ if (cnb) {
455
+ var gxba =document.getElementById('gxba')
456
+ var gaba =document.getElementById('gaba')
457
+ var gabaLink =document.getElementById('gaba-link')
458
+ gxba.innerText ='京ICP备20007647号-1'
459
+ gaba.innerText ='京公网安备 11010802031254号'
460
+ gabaLink.setAttribute('href','http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802031254')
461
+ }
462
+ })()</script></div><div class="flex-block justify-center align-center flex-wrap"><a rel="nofollow" target="_blank" href="https://v6.51.la/s/Guz3lwHCsVme9Cu"><div class="busuanzi_container" id="busuanzi_container"><span class="busuanzi_container_site_pv" id="busuanzi_container_site_pv">访问量：<span id="busuanzi_value_site_pv"><i class="fa fa-spinner"></i></span></span><span class="busuanzi_container_site_uv" id="busuanzi_container_site_uv">访客数：<span id="busuanzi_value_site_uv"><i class="fa fa-spinner"></i></span></span><span style="padding-right: 10px;"></span></div></a><a rel="nofollow" target="_blank" href="https://www.upyun.com/?utm_source=lianmeng&amp;utm_medium=referral"><span style="font-weight:bold;letter-spacing: 1px;">本网站由 </span><img class="nofancybox" height="32" style="vertical-align: middle" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/img/upy_logo.min.svg" alt=""/><span style="font-weight:bold;letter-spacing: 1px;">提供CDN加速/云存储服务</span></a><span style="padding-right: 10px;"></span><a rel="nofollow" style="font-size:18px;font-weight:bold;vertical-align: middle" target="_blank" title="注册就送代金券可直接使用" href="https://console.upyun.com/register/?invite=HyDsjZHIL">注册</a></div></div></div></div><a class="show" id="rocket" href="#top"></a><div class="darkmode-toggle">🌓</div><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/totop.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/dark.min.js" async></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/codeblock-resizer.min.js"></script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/smartresize.min.js"></script></div></body></html>