-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (108 loc) · 24.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>多异步协作 | Clearives</title>
<meta name="generator" content="VuePress 1.9.10">
<link rel="icon" href="/favicon.ico">
<meta name="description" content="前端博客clearives.github.io是基于vuepress搭建的前端技术分享博客，有js、node、react、vue等前端技术分享">
<meta name="keywords" content="前端开发，前端技术，html，js，JavaScript，node，react，vue，前端博客，clearives，vuepress">
<link rel="preload" href="/assets/css/0.styles.ccf9e52d.css" as="style"><link rel="preload" href="/assets/js/app.a82c2ceb.js" as="script"><link rel="preload" href="/assets/js/2.2ec38cce.js" as="script"><link rel="preload" href="/assets/js/1.0eb2d8a2.js" as="script"><link rel="preload" href="/assets/js/43.87b68bc5.js" as="script"><link rel="preload" href="/assets/js/19.d8fa848e.js" as="script"><link rel="prefetch" href="/assets/js/10.63e25234.js"><link rel="prefetch" href="/assets/js/11.f9337695.js"><link rel="prefetch" href="/assets/js/12.f76ea8f7.js"><link rel="prefetch" href="/assets/js/13.70147e98.js"><link rel="prefetch" href="/assets/js/14.985749a8.js"><link rel="prefetch" href="/assets/js/15.3a162e02.js"><link rel="prefetch" href="/assets/js/16.50c541be.js"><link rel="prefetch" href="/assets/js/17.fff01f94.js"><link rel="prefetch" href="/assets/js/18.aa896f4f.js"><link rel="prefetch" href="/assets/js/20.2a87130e.js"><link rel="prefetch" href="/assets/js/21.cc57d586.js"><link rel="prefetch" href="/assets/js/22.a015931b.js"><link rel="prefetch" href="/assets/js/23.aebdeb23.js"><link rel="prefetch" href="/assets/js/24.d6fac3e0.js"><link rel="prefetch" href="/assets/js/25.1d84d454.js"><link rel="prefetch" href="/assets/js/26.2c0a959d.js"><link rel="prefetch" href="/assets/js/27.c4abfccf.js"><link rel="prefetch" href="/assets/js/28.391b531f.js"><link rel="prefetch" href="/assets/js/29.f833303b.js"><link rel="prefetch" href="/assets/js/3.16d5a572.js"><link rel="prefetch" href="/assets/js/30.474b40f7.js"><link rel="prefetch" href="/assets/js/31.c070441b.js"><link rel="prefetch" href="/assets/js/32.5d456f3a.js"><link rel="prefetch" href="/assets/js/33.3d59c3a5.js"><link rel="prefetch" href="/assets/js/34.4ef8aa2b.js"><link rel="prefetch" href="/assets/js/35.69640a18.js"><link rel="prefetch" href="/assets/js/36.0e4c7e69.js"><link rel="prefetch" href="/assets/js/37.0eaf8656.js"><link rel="prefetch" href="/assets/js/38.b08624a0.js"><link rel="prefetch" href="/assets/js/39.d1c096b0.js"><link rel="prefetch" href="/assets/js/4.91114f18.js"><link rel="prefetch" href="/assets/js/40.c2ad95a9.js"><link rel="prefetch" href="/assets/js/41.7bd65731.js"><link rel="prefetch" href="/assets/js/42.e58bbe9e.js"><link rel="prefetch" href="/assets/js/44.1cc195bc.js"><link rel="prefetch" href="/assets/js/45.8e911753.js"><link rel="prefetch" href="/assets/js/46.f3da31ab.js"><link rel="prefetch" href="/assets/js/47.929523a9.js"><link rel="prefetch" href="/assets/js/48.2b6531d4.js"><link rel="prefetch" href="/assets/js/49.09ce8ff7.js"><link rel="prefetch" href="/assets/js/5.06da80d1.js"><link rel="prefetch" href="/assets/js/50.d6c3515b.js"><link rel="prefetch" href="/assets/js/6.a76778da.js"><link rel="prefetch" href="/assets/js/7.e9104bde.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.a86ae6f6.js">
<link rel="stylesheet" href="/assets/css/0.styles.ccf9e52d.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">Clearives</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/frontend/" class="nav-link">
前端知识
</a></div><div class="nav-item"><a href="/node/" class="nav-link">
Nodejs
</a></div><div class="nav-item"><a href="/package/" class="nav-link">
前端框架
</a></div><div class="nav-item"><a href="/daily/record/" class="nav-link">
日记本
</a></div><div class="nav-item"><a href="/about/" class="nav-link">
关于我
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
首页
</a></div><div class="nav-item"><a href="/frontend/" class="nav-link">
前端知识
</a></div><div class="nav-item"><a href="/node/" class="nav-link">
Nodejs
</a></div><div class="nav-item"><a href="/package/" class="nav-link">
前端框架
</a></div><div class="nav-item"><a href="/daily/record/" class="nav-link">
日记本
</a></div><div class="nav-item"><a href="/about/" class="nav-link">
关于我
</a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/node/" class="sidebar-link">Node-js</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>学习笔记</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/page/BASE64-encryption-decryption/" class="sidebar-link">BASE64加/解密</a></li><li><a href="/page/module.exports-and-exports/" class="sidebar-link">module.exports和exports的区别</a></li><li><a href="/page/Multiple-asynchronous-collaboration/" aria-current="page" class="active sidebar-link">多异步协作</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/page/Multiple-asynchronous-collaboration/#异步操作" class="sidebar-link">异步操作</a></li><li class="sidebar-sub-header"><a href="/page/Multiple-asynchronous-collaboration/#哨兵变量" class="sidebar-link">哨兵变量</a></li><li class="sidebar-sub-header"><a href="/page/Multiple-asynchronous-collaboration/#promise-all使用" class="sidebar-link">Promise.all使用</a></li><li class="sidebar-sub-header"><a href="/page/Multiple-asynchronous-collaboration/#promise-all自己实现" class="sidebar-link">Promise.all自己实现</a></li></ul></li><li><a href="/page/Asynchronous-and-event-loops/" class="sidebar-link">异步和事件触发</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><ul><li><a href="#%E5%A4%9A%E5%BC%82%E6%AD%A5%E5%8D%8F%E4%BD%9C">多异步协作</a> <ul><li><a href="#%E5%BC%82%E6%AD%A5%E6%93%8D%E4%BD%9C">异步操作</a></li> <li><a href="#%E5%93%A8%E5%85%B5%E5%8F%98%E9%87%8F">哨兵变量</a></li> <li><a href="#Promiseall%E4%BD%BF%E7%94%A8">Promise.all使用</a></li> <li><a href="#Promiseall%E8%87%AA%E5%B7%B1%E5%AE%9E%E7%8E%B0">Promise.all自己实现</a></li></ul></li></ul> <h1 id="多异步协作"><a href="#多异步协作" class="header-anchor">#</a> 多异步协作</h1> <h2 id="异步操作"><a href="#异步操作" class="header-anchor">#</a> 异步操作</h2> <blockquote><p>我们通过定义一个count来监听，当所有的异步返回时，我们统一处理res。</p></blockquote> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">let</span> count <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> res <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">done</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">key<span class="token punctuation">,</span> val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
res<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> val<span class="token punctuation">;</span>
count <span class="token operator">++</span><span class="token punctuation">;</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>count <span class="token operator">===</span> <span class="token number">3</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">render</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span>template_path<span class="token punctuation">,</span> <span class="token string">'utf8'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> tp</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">done</span><span class="token punctuation">(</span><span class="token string">'tp'</span><span class="token punctuation">,</span> tp<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
db<span class="token punctuation">.</span><span class="token function">query</span><span class="token punctuation">(</span>sql<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">done</span><span class="token punctuation">(</span><span class="token string">'data'</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
$<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>demo<span class="token punctuation">.</span>json<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">done</span><span class="token punctuation">(</span><span class="token string">'res'</span><span class="token punctuation">,</span> res<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h2 id="哨兵变量"><a href="#哨兵变量" class="header-anchor">#</a> 哨兵变量</h2> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">var</span> <span class="token function-variable function">after</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">times<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> count <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span>res <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">key<span class="token punctuation">,</span> val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
res<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> val<span class="token punctuation">;</span>
count <span class="token operator">++</span><span class="token punctuation">;</span>
<span class="token keyword">if</span><span class="token punctuation">(</span>count <span class="token operator">==</span> times<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">callback</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="promise-all使用"><a href="#promise-all使用" class="header-anchor">#</a> Promise.all使用</h2> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">let</span> promise1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">resolve</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> promise2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">resolve</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> promise3 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">resolve</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">resolve</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>promise1<span class="token punctuation">,</span> promise2<span class="token punctuation">,</span> promise3<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h2 id="promise-all自己实现"><a href="#promise-all自己实现" class="header-anchor">#</a> Promise.all自己实现</h2> <div class="language-javascript line-numbers-mode"><pre class="language-javascript"><code><span class="token class-name">Promise</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">all</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">promises</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">let</span> results <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> promiseCount <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> promisesLength <span class="token operator">=</span> promises<span class="token punctuation">.</span>length<span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> val <span class="token keyword">of</span> promises<span class="token punctuation">)</span> <span class="token punctuation">{</span>
Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
promiseCount<span class="token operator">++</span><span class="token punctuation">;</span>
results<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> res<span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>promiseCount <span class="token operator">===</span> promisesLength<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">resolve</span><span class="token punctuation">(</span>results<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">reject</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">更新于:</span> <span class="time">7/8/2020, 7:46:15 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/page/module.exports-and-exports/" class="prev">
module.exports和exports的区别
</a></span> <span class="next"><a href="/page/Asynchronous-and-event-loops/">
异步和事件触发
</a>
→
</span></p></div> </main></div><div class="global-ui"><!----><div></div><!----></div></div>
<script src="/assets/js/app.a82c2ceb.js" defer></script><script src="/assets/js/2.2ec38cce.js" defer></script><script src="/assets/js/1.0eb2d8a2.js" defer></script><script src="/assets/js/43.87b68bc5.js" defer></script><script src="/assets/js/19.d8fa848e.js" defer></script>
</body>
</html>