mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-18 21:21:21 +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>
|
||||
|
||||
Reference in New Issue
Block a user