mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-18 13:11:20 +08:00
doc: update typescript. 5234cdc024
This commit is contained in:
jaywcjlove
@ -142,12 +142,12 @@
|
||||
</span></code></pre>
|
||||
</div></div><div class="h3warp-body"><div class="warp"><div class="warp-header h4warp"><h4>Math</h4><div class="warp-body">
|
||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> pi <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token constant">PI</span><span class="token punctuation">;</span> <span class="token comment">// 3.141592653589793</span>
|
||||
</span><span class="code-line line-number" line="2">Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span><span class="token number">4.4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 4 - 数字四舍五入</span>
|
||||
</span><span class="code-line line-number" line="3">Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span><span class="token number">4.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 5</span>
|
||||
</span><span class="code-line line-number" line="4">Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 256 - 2 的 8 次方 </span>
|
||||
</span><span class="code-line line-number" line="5">Math<span class="token punctuation">.</span><span class="token function">sqrt</span><span class="token punctuation">(</span><span class="token number">49</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 7 - 平方根</span>
|
||||
</span><span class="code-line line-number" line="6">Math<span class="token punctuation">.</span><span class="token function">abs</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">3.14</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 3.14 - 绝对，正值</span>
|
||||
</span><span class="code-line line-number" line="7">Math<span class="token punctuation">.</span><span class="token function">ceil</span><span class="token punctuation">(</span><span class="token number">3.14</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 4 - 返回 >= 最小整数</span>
|
||||
</span><span class="code-line line-number" line="2">Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span><span class="token number">4.4</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 4 - 数字四舍五入</span>
|
||||
</span><span class="code-line line-number" line="3">Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span><span class="token number">4.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 5</span>
|
||||
</span><span class="code-line line-number" line="4">Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 256 - 2 的 8 次方 </span>
|
||||
</span><span class="code-line line-number" line="5">Math<span class="token punctuation">.</span><span class="token function">sqrt</span><span class="token punctuation">(</span><span class="token number">49</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 7 - 平方根</span>
|
||||
</span><span class="code-line line-number" line="6">Math<span class="token punctuation">.</span><span class="token function">abs</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">3.14</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 3.14 - 绝对，正值</span>
|
||||
</span><span class="code-line line-number" line="7">Math<span class="token punctuation">.</span><span class="token function">ceil</span><span class="token punctuation">(</span><span class="token number">3.14</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// = 4 - 返回 >= 最小整数</span>
|
||||
</span><span class="code-line line-number" line="8"><span class="token comment">// = 3 - 返回 <= 最大整数</span>
|
||||
</span><span class="code-line line-number" line="9">Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token number">3.99</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="10"><span class="token comment">// = 0 - 正弦</span>
|
||||
@ -364,16 +364,31 @@
|
||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>JavaScript 范围</h2><div class="warp-body">
|
||||
</div></div><div class="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>范围</h3><div class="warp-body">
|
||||
</div></div><div class="h2warp-body"><div class="warp row-span-2"><div class="warp-header h3warp"><h3>范围</h3><div class="warp-body"><!--rehype:warp-class=row-span-2--><!--rehype:-->
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2">
|
||||
</span><span class="code-line line-number" line="3"> <span class="token keyword">var</span> pizzaName <span class="token operator">=</span> <span class="token string">"Margarita"</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"> <span class="token comment">// 这里的代码可以使用 PizzaName</span>
|
||||
</span><span class="code-line line-number" line="5">
|
||||
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="7"><span class="token comment">// 这里的代码不能使用 PizzaName</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token keyword">var</span> pizzaName <span class="token operator">=</span> <span class="token string">"Margarita"</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token comment">// 这里的代码可以使用 PizzaName</span>
|
||||
</span><span class="code-line line-number" line="4">
|
||||
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="6"><span class="token comment">// ❌ PizzaName 不能在这里使用</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Block Scoped Variables</h3><div class="warp-body">
|
||||
<p><code>{ }</code> 块内声明的变量</p>
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token comment">// ❌ x 不能在这里使用</span>
|
||||
</span><span class="code-line line-number" line="5">
|
||||
</span><span class="code-line line-number" line="6"><span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="7"> <span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="9"><span class="token comment">// ✅ x 能在这里使用</span>
|
||||
</span></code></pre>
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">var</span> x <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token comment">// Global scope</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">let</span> x <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token comment">// Global scope</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token keyword">const</span> x <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token comment">// Global scope</span>
|
||||
</span></code></pre>
|
||||
<p>ES6 引入了两个重要的新 JavaScript 关键字：let 和 const。这两个关键字在 JavaScript 中提供了块作用域。</p>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>块作用域变量</h3><div class="warp-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> isLoggedIn <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>isLoggedIn <span class="token operator">==</span> <span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token keyword">const</span> statusMessage <span class="token operator">=</span> <span class="token string">'Logged in.'</span><span class="token punctuation">;</span>
|
||||
@ -388,7 +403,8 @@
|
||||
</span><span class="code-line line-number" line="3"><span class="token keyword">function</span> <span class="token function">printColor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="4"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>color<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="6"><span class="token function">printColor</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => blue</span>
|
||||
</span><span class="code-line line-number" line="6">
|
||||
</span><span class="code-line line-number" line="7"><span class="token function">printColor</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => blue</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3><code>let</code> vs <code>var</code></h3><div class="warp-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">3</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@ -559,12 +575,10 @@
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Break</h3><div class="warp-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">99</span><span class="token punctuation">;</span> i <span class="token operator">+=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>i <span class="token operator">></span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="5"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="7"><span class="token comment">// => 0 1 2 3 4 5</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>i <span class="token operator">></span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token keyword control-flow">break</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="5"><span class="token comment">// => 0 1 2 3 4 5</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Continue</h3><div class="warp-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword control-flow">for</span> <span class="token punctuation">(</span>i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><</span> <span class="token number">10</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@ -984,11 +998,44 @@
|
||||
</span><span class="code-line line-number" line="5"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>myMath<span class="token punctuation">.</span><span class="token method function property-access">multiply</span><span class="token punctuation">(</span><span class="token number">6</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 comment">// 12</span>
|
||||
</span><span class="code-line line-number" line="6"><span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>myMath<span class="token punctuation">.</span><span class="token method function property-access">duplicate</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 10</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>JavaScript Promises</h2><div class="warp-body"><!--rehype:body-class=cols-2-->
|
||||
</div></div><div class="h2warp-body cols-2"><div class="warp row-span-2"><div class="warp-header h3warp"><h3>Promise 状态</h3><div class="warp-body"><!--rehype:warp-class=row-span-2--><!--rehype:-->
|
||||
</div></div></div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>JavaScript Promises</h2><div class="warp-body">
|
||||
</div></div><div class="h2warp-body"><div class="warp row-span-2"><div class="warp-header h3warp"><h3>Promise</h3><div class="warp-body"><!--rehype:warp-class=row-span-2--><!--rehype:-->
|
||||
<p>创建 promises</p>
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</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 arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token function">resolve</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="4"> <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="5"> <span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="6"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div><div class="h3warp-body"><div class="warp"><div class="warp-header h4warp"><h4>使用 promises</h4><div class="warp-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1">promise
|
||||
</span><span class="code-line line-number" line="2"> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> ··· <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> ··· <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h4warp"><h4>Promise 方法</h4><div class="warp-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">all</span><span class="token punctuation">(</span>···<span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">race</span><span class="token punctuation">(</span>···<span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">reject</span><span class="token punctuation">(</span>···<span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">resolve</span><span class="token punctuation">(</span>···<span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="warp"><div class="warp-header h3warp"><h3>执行器函数</h3><div class="warp-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">executorFn</span> <span class="token operator">=</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 arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'Resolved!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span>executorFn<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>setTimeout()</h3><div class="warp-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">loginAlert</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Login'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token function">setTimeout</span><span class="token punctuation">(</span>loginAlert<span class="token punctuation">,</span> <span class="token number">6000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Promise 状态</h3><div class="warp-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> promise <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 punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token comment">// An asynchronous operation.</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token comment">// 一个异步操作。</span>
|
||||
</span><span class="code-line line-number" line="4"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="5"> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'Resolved!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="6"> <span class="token punctuation">}</span>
|
||||
@ -996,19 +1043,10 @@
|
||||
</span><span class="code-line line-number" line="8"> <span class="token function">reject</span><span class="token punctuation">(</span><span class="token known-class-name class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Error'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="9"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="11">promise<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">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 parameter">err</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>执行器函数</h3><div class="warp-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">executorFn</span> <span class="token operator">=</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 arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'Resolved!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span>executorFn<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>setTimeout()</h3><div class="warp-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">loginAlert</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Login'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token function">setTimeout</span><span class="token punctuation">(</span>loginAlert<span class="token punctuation">,</span> <span class="token number">6000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="11">promise<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line line-number" line="12"> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line line-number" line="13"> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="14"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>.then() 方法</h3><div class="warp-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> promise <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 punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
@ -1016,26 +1054,30 @@
|
||||
</span><span class="code-line line-number" line="3"> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'Result'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="6">promise<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="7"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="9"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>.catch() 方法</h3><div class="warp-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> promise <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 punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token function">reject</span><span class="token punctuation">(</span><span class="token known-class-name class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Promise Rejected Unconditionally.'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="6">promise<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="7"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="9">promise<span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="6">
|
||||
</span><span class="code-line line-number" line="7">promise<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="8"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="9"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="10"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="11"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Promise.all()</h3><div class="warp-body">
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>.catch() 方法</h3><div class="warp-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line line-number" line="2"> <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 arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="4"> <span class="token function">reject</span><span class="token punctuation">(</span><span class="token known-class-name class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Promise 无条件拒绝。'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="5"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="7">
|
||||
</span><span class="code-line line-number" line="8">promise<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="9"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="11">
|
||||
</span><span class="code-line line-number" line="12">promise<span class="token punctuation">.</span><span class="token keyword control-flow">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="13"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="14"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp col-span-2"><div class="warp-header h3warp"><h3>Promise.all()</h3><div class="warp-body"><!--rehype:warp-class=col-span-2--><!--rehype:-->
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</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 punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <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>
|
||||
@ -1051,7 +1093,24 @@
|
||||
</span><span class="code-line line-number" line="13"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>res<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><span class="code-line line-number" line="14"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>避免嵌套的 Promise 和 .then()</h3><div class="warp-body">
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>链接多个 .then()</h3><div class="warp-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token parameter">resolve</span> <span class="token arrow operator">=></span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'dAlan'</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token number">100</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="5">
|
||||
</span><span class="code-line line-number" line="6">promise<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="7"> <span class="token keyword control-flow">return</span> res <span class="token operator">===</span> <span class="token string">'Alan'</span>
|
||||
</span><span class="code-line line-number" line="8"> <span class="token operator">?</span> <span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">resolve</span><span class="token punctuation">(</span><span class="token string">'Hey Alan!'</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="9"> <span class="token operator">:</span> <span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">reject</span><span class="token punctuation">(</span><span class="token string">'Who are you?'</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="10"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="11"><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="12"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="13"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="14"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="15"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp col-span-2"><div class="warp-header h3warp"><h3>避免嵌套的 Promise 和 .then()</h3><div class="warp-body"><!--rehype:warp-class=col-span-2--><!--rehype:-->
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> promise <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 punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'*'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@ -1069,24 +1128,8 @@
|
||||
</span><span class="code-line line-number" line="15"><span class="token comment">// 将它们链接在一起</span>
|
||||
</span><span class="code-line line-number" line="16">promise<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span>twoStars<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span>oneDot<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span>print<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>创建</h3><div class="warp-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">executorFn</span> <span class="token operator">=</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 arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'The executor function of the promise!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token keyword">const</span> promise <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span>executorFn<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>链接多个 .then()</h3><div class="warp-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> promise <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 parameter">resolve</span> <span class="token arrow operator">=></span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'dAlan'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2">promise<span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token keyword control-flow">return</span> res <span class="token operator">===</span> <span class="token string">'Alan'</span> <span class="token operator">?</span> <span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">resolve</span><span class="token punctuation">(</span><span class="token string">'Hey Alan!'</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">reject</span><span class="token punctuation">(</span><span class="token string">'Who are you?'</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="5"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="7"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>JavaScript Async-Await</h2><div class="warp-body"><!--rehype:body-class=cols-2-->
|
||||
</div></div><div class="h2warp-body cols-2"><div class="warp"><div class="warp-header h3warp"><h3>异步</h3><div class="warp-body">
|
||||
</div></div><div class="h2warp-body cols-2"><div class="warp row-span-2"><div class="warp-header h3warp"><h3>异步</h3><div class="warp-body"><!--rehype:warp-class=row-span-2--><!--rehype:-->
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function">helloWorld</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token keyword control-flow">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token parameter">resolve</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
@ -1094,16 +1137,21 @@
|
||||
</span><span class="code-line line-number" line="5"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="6"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="8"><span class="token keyword">const</span> <span class="token function-variable function">msg</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 异步函数表达式</span>
|
||||
</span><span class="code-line line-number" line="9"> <span class="token keyword">const</span> msg <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token function">helloWorld</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="10"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Message:'</span><span class="token punctuation">,</span> msg<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="11"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="12"><span class="token keyword">const</span> <span class="token function-variable function">msg1</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// 异步箭头函数</span>
|
||||
</span><span class="code-line line-number" line="13"> <span class="token keyword">const</span> msg <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token function">helloWorld</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="14"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Message:'</span><span class="token punctuation">,</span> msg<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="15"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="16"><span class="token function">msg</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Message: Hello World! <-- 2 秒后</span>
|
||||
</span><span class="code-line line-number" line="17"><span class="token function">msg1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Message: Hello World! <-- 2 秒后</span>
|
||||
</span><span class="code-line line-number" line="8">
|
||||
</span><span class="code-line line-number" line="9"><span class="token comment">// 异步函数表达式</span>
|
||||
</span><span class="code-line line-number" line="10"><span class="token keyword">const</span> <span class="token function-variable function">msg</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="11"> <span class="token keyword">const</span> msg <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token function">helloWorld</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="12"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Message:'</span><span class="token punctuation">,</span> msg<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="13"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="14">
|
||||
</span><span class="code-line line-number" line="15"><span class="token comment">// 异步箭头函数</span>
|
||||
</span><span class="code-line line-number" line="16"><span class="token keyword">const</span> <span class="token function-variable function">msg1</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="17"> <span class="token keyword">const</span> msg <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token function">helloWorld</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="18"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">'Message:'</span><span class="token punctuation">,</span> msg<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="19"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="20">
|
||||
</span><span class="code-line line-number" line="21"><span class="token function">msg</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Message: Hello World! <-- 2 秒后</span>
|
||||
</span><span class="code-line line-number" line="22"><span class="token function">msg1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Message: Hello World! <-- 2 秒后</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>解决 Promises</h3><div class="warp-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> pro1 <span class="token operator">=</span> <span class="token known-class-name class-name">Promise</span><span class="token punctuation">.</span><span class="token method function property-access">resolve</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@ -1131,13 +1179,15 @@
|
||||
</span><span class="code-line line-number" line="12"><span class="token function">msg</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Message: Hello World! <-- 2 秒后</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>错误处理</h3><div class="warp-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">let</span> json <span class="token operator">=</span> <span class="token string">'{ "age": 30 }'</span><span class="token punctuation">;</span> <span class="token comment">// 数据不完整</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword control-flow">try</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token keyword">let</span> user <span class="token operator">=</span> <span class="token known-class-name class-name">JSON</span><span class="token punctuation">.</span><span class="token method function property-access">parse</span><span class="token punctuation">(</span>json<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// <-- 没有错误</span>
|
||||
</span><span class="code-line line-number" line="4"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span> user<span class="token punctuation">.</span><span class="token property-access">name</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// no name!</span>
|
||||
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span> <span class="token keyword control-flow">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="6"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span> <span class="token string">"Invalid JSON data!"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span>
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 数据不完整</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">let</span> json <span class="token operator">=</span> <span class="token string">'{ "age": 30 }'</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3">
|
||||
</span><span class="code-line line-number" line="4"><span class="token keyword control-flow">try</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="5"> <span class="token keyword">let</span> user <span class="token operator">=</span> <span class="token known-class-name class-name">JSON</span><span class="token punctuation">.</span><span class="token method function property-access">parse</span><span class="token punctuation">(</span>json<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// <-- 没有错误</span>
|
||||
</span><span class="code-line line-number" line="6"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span> user<span class="token punctuation">.</span><span class="token property-access">name</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// no name!</span>
|
||||
</span><span class="code-line line-number" line="7"><span class="token punctuation">}</span> <span class="token keyword control-flow">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="8"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span> <span class="token string">"Invalid JSON data!"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="9"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>异步等待运算符</h3><div class="warp-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">function</span> <span class="token function">helloWorld</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@ -1176,21 +1226,25 @@
|
||||
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="7">req<span class="token punctuation">.</span><span class="token method function property-access">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp" style="grid-row: span 2/span 2;"><div class="warp-header h3warp"><h3>POST</h3><div class="warp-body"><!--rehype:data-warp-style=grid-row: span 2/span 2;--><!--rehype:-->
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token literal-property property">fish</span><span class="token operator">:</span> <span class="token string">'Salmon'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token literal-property property">weight</span><span class="token operator">:</span> <span class="token string">'1.5 KG'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line line-number" line="4"> <span class="token literal-property property">units</span><span class="token operator">:</span> <span class="token number">5</span>
|
||||
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="6"><span class="token keyword">const</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="7">xhr<span class="token punctuation">.</span><span class="token method function property-access">open</span><span class="token punctuation">(</span><span class="token string">'POST'</span><span class="token punctuation">,</span> <span class="token string">'/inventory/add'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="8">xhr<span class="token punctuation">.</span><span class="token property-access">responseType</span> <span class="token operator">=</span> <span class="token string">'json'</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="9">xhr<span class="token punctuation">.</span><span class="token method function property-access">send</span><span class="token punctuation">(</span><span class="token known-class-name class-name">JSON</span><span class="token punctuation">.</span><span class="token method function property-access">stringify</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</div></div></div><div class="warp row-span-2"><div class="warp-header h3warp"><h3>POST</h3><div class="warp-body"><!--rehype:warp-class=row-span-2--><!--rehype:-->
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">weight</span><span class="token operator">:</span> <span class="token string">'1.5 KG'</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token comment">// 初始化一个请求。</span>
|
||||
</span><span class="code-line line-number" line="4">xhr<span class="token punctuation">.</span><span class="token method function property-access">open</span><span class="token punctuation">(</span><span class="token string">'POST'</span><span class="token punctuation">,</span> <span class="token string">'/inventory/add'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="5"><span class="token comment">// 一个用于定义响应类型的枚举值</span>
|
||||
</span><span class="code-line line-number" line="6">xhr<span class="token punctuation">.</span><span class="token property-access">responseType</span> <span class="token operator">=</span> <span class="token string">'json'</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="7"><span class="token comment">// 发送请求以及数据。</span>
|
||||
</span><span class="code-line line-number" line="8">xhr<span class="token punctuation">.</span><span class="token method function property-access">send</span><span class="token punctuation">(</span><span class="token known-class-name class-name">JSON</span><span class="token punctuation">.</span><span class="token method function property-access">stringify</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="9"><span class="token comment">// 请求成功完成时触发。</span>
|
||||
</span><span class="code-line line-number" line="10">xhr<span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">onload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="11"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span><span class="token property-access">response</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="12"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="12"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="13"><span class="token comment">// 当 request 遭遇错误时触发。</span>
|
||||
</span><span class="code-line line-number" line="14">xhr<span class="token punctuation">.</span><span class="token method-variable function-variable method function property-access">onerror</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="15"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span><span class="token property-access">response</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="16"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp" style="grid-row: span 2/span 2;"><div class="warp-header h3warp"><h3>fetch api</h3><div class="warp-body"><!--rehype:data-warp-style=grid-row: span 2/span 2;--><!--rehype:-->
|
||||
</div></div></div><div class="warp row-span-2"><div class="warp-header h3warp"><h3>fetch api</h3><div class="warp-body"><!--rehype:warp-class=row-span-2--><!--rehype:-->
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
@ -1198,32 +1252,29 @@
|
||||
</span><span class="code-line line-number" line="5"> <span class="token string-property property">'apikey'</span><span class="token operator">:</span> apiKey
|
||||
</span><span class="code-line line-number" line="6"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line line-number" line="7"> <span class="token literal-property property">body</span><span class="token operator">:</span> data
|
||||
</span><span class="code-line line-number" line="8"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="9"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>response<span class="token punctuation">.</span><span class="token property-access">ok</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="10"> <span class="token keyword control-flow">return</span> response<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="11"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="12"> <span class="token keyword control-flow">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Request failed!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="13"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token parameter">networkError</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="14"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>networkError<span class="token punctuation">.</span><span class="token property-access">message</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="15"> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="16"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="8"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="9"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>response<span class="token punctuation">.</span><span class="token property-access">ok</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="10"> <span class="token keyword control-flow">return</span> response<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="11"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="12"> <span class="token keyword control-flow">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Request failed!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="13"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token parameter">networkError</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="14"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>networkError<span class="token punctuation">.</span><span class="token property-access">message</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="15"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>JSON 格式</h3><div class="warp-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'url-that-returns-JSON'</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> response<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">jsonResponse</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="4"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>jsonResponse<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="5"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> response<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">jsonResponse</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="4"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>jsonResponse<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="5"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>promise url 参数获取 API</h3><div class="warp-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'url'</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="4"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="5"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line line-number" line="6"> <span class="token parameter">rejection</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="7"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>rejection<span class="token punctuation">.</span><span class="token property-access">message</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="8"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token parameter">rejection</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="5"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">error</span><span class="token punctuation">(</span>rejection<span class="token punctuation">.</span><span class="token property-access">message</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="6"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>Fetch API 函数</h3><div class="warp-body">
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'https://api-xxx.com/endpoint'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
@ -1231,16 +1282,16 @@
|
||||
</span><span class="code-line line-number" line="3"> <span class="token literal-property property">body</span><span class="token operator">:</span> <span class="token known-class-name class-name">JSON</span><span class="token punctuation">.</span><span class="token method function property-access">stringify</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">"200"</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="5"> <span class="token keyword control-flow">if</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span><span class="token property-access">ok</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="6"> <span class="token keyword control-flow">return</span> response<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="6"> <span class="token keyword control-flow">return</span> response<span class="token punctuation">.</span><span class="token method function property-access">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="7"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="8"> <span class="token keyword control-flow">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Request failed!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="8"> <span class="token keyword control-flow">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Request failed!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="9"><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token parameter">networkError</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="10"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>networkError<span class="token punctuation">.</span><span class="token property-access">message</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="11"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token parameter">jsonResponse</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="12"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>jsonResponse<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="13"><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp" style="grid-column: span 2/span 2;"><div class="warp-header h3warp"><h3>async await 语法</h3><div class="warp-body"><!--rehype:data-warp-style=grid-column: span 2/span 2;--><!--rehype:-->
|
||||
</div></div></div><div class="warp col-span-2"><div class="warp-header h3warp"><h3>async await 语法</h3><div class="warp-body"><!--rehype:warp-class=col-span-2--><!--rehype:-->
|
||||
<pre class="language-javascript"><code class="language-javascript code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> <span class="token function-variable function">getSuggestions</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token keyword">const</span> wordQuery <span class="token operator">=</span> inputField<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token keyword">const</span> endpoint <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>queryParams<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>wordQuery<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||||
|
||||
@ -19,10 +19,11 @@
|
||||
<li><a href="https://www.typescriptlang.org/">TypeScript 官网</a></li>
|
||||
</ul>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>内置类型基元</h3><div class="warp-body">
|
||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token builtin">boolean</span><span class="token punctuation">,</span> <span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">number</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">undefined</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token builtin">unknown</span><span class="token punctuation">,</span> <span class="token builtin">never</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token keyword">void</span><span class="token punctuation">,</span> bigint<span class="token punctuation">,</span> <span class="token builtin">symbol</span>
|
||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token builtin">any</span><span class="token punctuation">,</span> <span class="token keyword">void</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token builtin">boolean</span><span class="token punctuation">,</span> <span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">number</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token keyword">undefined</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token builtin">unknown</span><span class="token punctuation">,</span> <span class="token builtin">never</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line line-number" line="5">bigint<span class="token punctuation">,</span> <span class="token builtin">symbol</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>常见的内置 JS 对象</h3><div class="warp-body">
|
||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1">Date<span class="token punctuation">,</span> Error<span class="token punctuation">,</span>
|
||||
@ -258,7 +259,7 @@
|
||||
</span><span class="code-line line-number" line="5"><span class="token comment">// name: string</span>
|
||||
</span><span class="code-line line-number" line="6"><span class="token comment">// }</span>
|
||||
</span></code></pre>
|
||||
<p>使用 <code>as const</code> 缩小类型</p>
|
||||
<p>👇 使用 <code>as const</code> 缩小类型 👇</p>
|
||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> data2 <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> name<span class="token operator">:</span> <span class="token string">"Zagreus"</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span> <span class="token keyword">as</span> <span class="token keyword">const</span>
|
||||
@ -326,7 +327,24 @@
|
||||
</span><span class="code-line line-number" line="6">
|
||||
</span><span class="code-line line-number" line="7">res <span class="token comment">// SuccessResponse</span>
|
||||
</span></code></pre>
|
||||
</div></div></div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>Class</h2><div class="warp-body">
|
||||
</div></div></div></div></div><div class="warp"><div class="warp-header h3warp"><h3>in 操作符</h3><div class="warp-body">
|
||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">interface</span> <span class="token class-name"><span class="token constant">A</span></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token keyword">interface</span> <span class="token class-name"><span class="token constant">B</span></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="5"> y<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="6"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="7">
|
||||
</span><span class="code-line line-number" line="8"><span class="token keyword">function</span> <span class="token function">doStuff</span><span class="token punctuation">(</span>q<span class="token operator">:</span> <span class="token constant">A</span> <span class="token operator">|</span> <span class="token constant">B</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="9"> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token string">'x'</span> <span class="token keyword">in</span> q<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="10"> <span class="token comment">// q: A</span>
|
||||
</span><span class="code-line line-number" line="11"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="12"> <span class="token comment">// q: B</span>
|
||||
</span><span class="code-line line-number" line="13"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="14"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
<p>操作符可以安全的检查一个对象上是否存在一个属性，它通常也被作为类型保护使用</p>
|
||||
</div></div></div></div></div><div class="warp"><div class="warp-header h2warp"><h2>Class</h2><div class="warp-body">
|
||||
</div></div><div class="h2warp-body"><div class="warp"><div class="warp-header h3warp"><h3>创建类实例</h3><div class="warp-body">
|
||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name"><span class="token constant">ABC</span></span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> abc <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name"><span class="token constant">ABC</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
@ -776,7 +794,7 @@
|
||||
</ul>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>as 运算符</h3><div class="warp-body">
|
||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token operator"><</span>foo<span class="token operator">></span>bar<span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token comment">// 不允许在 .tsx 👆 文件中使用尖括号类型断言。</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token comment">// ❌ 不允许在 .tsx 👆 文件中使用尖括号类型断言。</span>
|
||||
</span><span class="code-line line-number" line="3">
|
||||
</span><span class="code-line line-number" line="4"><span class="token keyword">const</span> foo <span class="token operator">=</span> bar <span class="token keyword">as</span> foo<span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
@ -833,9 +851,9 @@
|
||||
</span><span class="code-line line-number" line="10"> side<span class="token operator">:</span> <span class="token constant">JSX</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Element</span></span> <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="11"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="12">
|
||||
</span><span class="code-line line-number" line="13"><span class="token keyword">function</span> <span class="token function">Dog</span><span class="token punctuation">(</span>prop<span class="token operator">:</span> <span class="token maybe-class-name">HomeProps</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">JSX</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Element</span></span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="14"><span class="token keyword">function</span> <span class="token function">Dog</span><span class="token punctuation">(</span>prop<span class="token operator">:</span> <span class="token maybe-class-name">SideProps</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">JSX</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Element</span></span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="15"><span class="token keyword">function</span> <span class="token function">Dog</span><span class="token punctuation">(</span>prop<span class="token operator">:</span> <span class="token maybe-class-name">CeProps</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">JSX</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Element</span></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="13"><span class="token keyword">function</span> <span class="token function">Dog</span><span class="token punctuation">(</span>prop<span class="token operator">:</span><span class="token maybe-class-name">HomeProps</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">JSX</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Element</span></span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="14"><span class="token keyword">function</span> <span class="token function">Dog</span><span class="token punctuation">(</span>prop<span class="token operator">:</span><span class="token maybe-class-name">SideProps</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">JSX</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Element</span></span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="15"><span class="token keyword">function</span> <span class="token function">Dog</span><span class="token punctuation">(</span>prop<span class="token operator">:</span><span class="token maybe-class-name">CeProps</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">JSX</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Element</span></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="16"> <span class="token comment">// ...</span>
|
||||
</span><span class="code-line line-number" line="17"><span class="token punctuation">}</span>
|
||||
</span></code></pre>
|
||||
@ -855,29 +873,10 @@
|
||||
</span><span class="code-line line-number" line="13"><span class="token maybe-class-name">Menu</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Item</span></span> <span class="token operator">=</span> <span class="token maybe-class-name">MenuItem</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="14"><span class="token maybe-class-name">Menu</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">SubMenu</span></span> <span class="token operator">=</span> <span class="token maybe-class-name">SubMenu</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="15">
|
||||
</span><span class="code-line line-number" line="16"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu.Item</span></span> <span class="token punctuation">/></span></span> <span class="token comment">// ok</span>
|
||||
</span><span class="code-line line-number" line="17"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu.SubMenu</span></span> <span class="token punctuation">/></span></span> <span class="token comment">// ok</span>
|
||||
</span><span class="code-line line-number" line="16"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu.Item</span></span> <span class="token punctuation">/></span></span> <span class="token comment">// ✅ ok</span>
|
||||
</span><span class="code-line line-number" line="17"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Menu.SubMenu</span></span> <span class="token punctuation">/></span></span> <span class="token comment">// ✅ ok</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>类组件</h3><div class="warp-body">
|
||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">MyComponent</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token comment">// 使用构造签名</span>
|
||||
</span><span class="code-line line-number" line="5"><span class="token keyword">const</span> myComponent <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MyComponent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="6"><span class="token comment">// element class type => MyComponent</span>
|
||||
</span><span class="code-line line-number" line="7"><span class="token comment">// element instance type => { render: () => void }</span>
|
||||
</span><span class="code-line line-number" line="8">
|
||||
</span><span class="code-line line-number" line="9"><span class="token keyword">function</span> <span class="token function">MyFactoryFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="10"> <span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="11"> <span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line line-number" line="12"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="13"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="14"><span class="token comment">// 使用调用签名</span>
|
||||
</span><span class="code-line line-number" line="15"><span class="token keyword">const</span> myComponent <span class="token operator">=</span> <span class="token function">MyFactoryFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="16"><span class="token comment">// element class type => MyFactoryFunction</span>
|
||||
</span><span class="code-line line-number" line="17"><span class="token comment">// element instance type => { render: () => void }</span>
|
||||
</span></code></pre>
|
||||
<p>元素实例类型很有趣，因为它必须可以分配给JSX。ElementClass，否则将导致错误。默认情况下，JSX。ElementClass 是 {}，但可以对其进行扩展，以将JSX的使用限制为仅限于符合适当接口的类型。</p>
|
||||
</div></div></div><div class="warp row-span-2"><div class="warp-header h3warp"><h3>有效组件</h3><div class="warp-body"><!--rehype:warp-class=row-span-2--><!--rehype:-->
|
||||
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">declare</span> <span class="token keyword">namespace</span> <span class="token constant">JSX</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> <span class="token keyword">interface</span> <span class="token class-name">ElementClass</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> render<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
|
||||
@ -889,15 +888,44 @@
|
||||
</span><span class="code-line line-number" line="9"><span class="token keyword">function</span> <span class="token function">MyFactoryFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="10"> <span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="11"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="12"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyComponent</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token comment">// ok</span>
|
||||
</span><span class="code-line line-number" line="13"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyFactoryFunction</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token comment">// ok</span>
|
||||
</span><span class="code-line line-number" line="14">
|
||||
</span><span class="code-line line-number" line="15"><span class="token keyword">class</span> <span class="token class-name">NotAValidComponent</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="16"><span class="token keyword">function</span> <span class="token function">NotAValidFactoryFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="17"> <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="18"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="19"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">NotAValidComponent</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token comment">// ❌ error</span>
|
||||
</span><span class="code-line line-number" line="20"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">NotAValidFactoryFunction</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token comment">// ❌ error</span>
|
||||
</span><span class="code-line line-number" line="12"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyComponent</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token comment">// ✅ 有效类组件</span>
|
||||
</span><span class="code-line line-number" line="13"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MyFactoryFunction</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token comment">// ✅ 有效函数组件</span>
|
||||
</span></code></pre>
|
||||
<p>元素实例类型必须可以分配给 <code>JSX.ElementClass</code>，否则将导致错误。</p>
|
||||
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">class</span> <span class="token class-name">NotAValidComponent</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">function</span> <span class="token function">NotAValidFactoryFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="3"> <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="5"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">NotAValidComponent</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token comment">// ❌ error</span>
|
||||
</span><span class="code-line line-number" line="6"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">NotAValidFactoryFunction</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span> <span class="token comment">// ❌ error</span>
|
||||
</span></code></pre>
|
||||
<p>默认情况下，<code>JSX.ElementClass</code> 是 {}，但可以对其进行扩展，以将 <code>JSX</code> 的使用限制为仅限于符合适当接口的类型。</p>
|
||||
</div></div></div><div class="warp col-span-2"><div class="warp-header h3warp"><h3>类组件</h3><div class="warp-body"><!--rehype:warp-class=col-span-2--><!--rehype:-->
|
||||
<pre class="language-ts"><code class="language-ts code-highlight"><span class="code-line line-number" line="1"><span class="token keyword">type</span> <span class="token class-name">Props</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="2"> header<span class="token operator">:</span> React<span class="token punctuation">.</span>ReactNode<span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"> body<span class="token operator">:</span> React<span class="token punctuation">.</span>ReactNode<span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="4"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="5">
|
||||
</span><span class="code-line line-number" line="6"><span class="token keyword">class</span> <span class="token class-name">MyComponent</span> <span class="token keyword">extends</span> <span class="token class-name">React</span><span class="token punctuation">.</span>Component<span class="token operator"><</span>Props<span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token operator">></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="7"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line line-number" line="8"> <span class="token keyword">return</span> <span class="token punctuation">(</span>
|
||||
</span><span class="code-line line-number" line="9"> <span class="token operator"><</span>div<span class="token operator">></span>
|
||||
</span><span class="code-line line-number" line="10"> <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>header<span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="11"> <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>body<span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="12"> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
||||
</span><span class="code-line line-number" line="13"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="14"> <span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="15"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="16">
|
||||
</span><span class="code-line line-number" line="17"><span class="token operator"><</span>MyComponent header<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator"><</span>h1<span class="token operator">></span>Header<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span><span class="token punctuation">}</span> body<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator"><</span>i<span class="token operator">></span>body<span class="token operator"><</span><span class="token operator">/</span>i<span class="token operator">></span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="warp"><div class="warp-header h3warp"><h3>泛型组件</h3><div class="warp-body">
|
||||
<pre class="language-tsx"><code class="language-tsx code-highlight"><span class="code-line line-number" line="1"><span class="token comment">// 一个泛型组件</span>
|
||||
</span><span class="code-line line-number" line="2"><span class="token keyword">type</span> <span class="token class-name">SelectProps<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span> <span class="token operator">=</span> <span class="token punctuation">{</span> items<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line line-number" line="3"><span class="token keyword">class</span> <span class="token class-name">Select<span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span></span> <span class="token keyword">extends</span> <span class="token class-name">React</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Component</span></span><span class="token operator"><</span><span class="token maybe-class-name">SelectProps</span><span class="token operator"><</span><span class="token constant">T</span><span class="token operator">></span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||||
</span><span class="code-line line-number" line="4">
|
||||
</span><span class="code-line line-number" line="5"><span class="token comment">// 使用</span>
|
||||
</span><span class="code-line line-number" line="6"><span class="token keyword">const</span> <span class="token function-variable function">Form</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token operator"><</span><span class="token maybe-class-name">Select</span><span class="token operator"><</span><span class="token builtin">string</span><span class="token operator">></span> items<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">]</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
|
||||
</div></div></div></div></div></div></div><footer class="footer-warp"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer></body>
|
||||
|
||||
Reference in New Issue
Block a user