jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

images to svg

Browse source
This commit is contained in:
Ilya Kantor 2019-07-28 15:42:37 +03:00
parent a31e881856
commit 3ba28aa104
734 changed files with 11682 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

2
1-js/11-async/01-callbacks/article.md
View file

@ -222,7 +222,7 @@ As calls become more nested, the code becomes deeper and increasingly more diffi
That's sometimes called "callback hell" or "pyramid of doom."
![](callback-hell.png)
![](callback-hell.svg)
The "pyramid" of nested calls grows to the right with every asynchronous action. Soon it spirals out of control.

BIN
1-js/11-async/01-callbacks/callback-hell.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 35 KiB

350
1-js/11-async/01-callbacks/callback-hell.svg Normal file
View file

@ -0,0 +1,350 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="467px" height="279px" viewBox="0 0 467 279" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>callback-hell.svg</title>
<desc>Created with sketchtool.</desc>
<defs>
<polygon id="path-1" points="6 6.31088724e-30 0 6.31088724e-30 0 4.5 0 9 6 9 6 -5.68434189e-14"></polygon>
</defs>
<g id="promise" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="callback-hell.svg">
<g id="Page-1" transform="translate(0.000000, -3.000000)">
<polygon id="Fill-1" fill="#F5F2F0" points="0 12 467 12 467 0 0 0"></polygon>
<g id="Group-3">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-2"></g>
<text id="-" mask="url(#mask-2)" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
</g>
<polygon id="Fill-4" fill="#F5F2F0" points="0 25 467 25 467 12 0 12"></polygon>
<text id="loadScript" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#000000">
<tspan x="0" y="18">loadScript</tspan>
</text>
<text id="(" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="57.72949" y="18">(</tspan>
</text>
<text id="'1.js'" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#669900">
<tspan x="63.50244" y="18">'1.js'</tspan>
</text>
<text id="," font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="98.14014" y="18">,</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<text id="function" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#0077AA">
<tspan x="109.686" y="18">function</tspan>
</text>
<text id="(" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="155.8696" y="18">(</tspan>
</text>
<text id="error" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#000000">
<tspan x="161.6426" y="18">error</tspan>
</text>
<text id="," font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="190.5073" y="18">,</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<text id="script" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#000000">
<tspan x="202.0532" y="18">script</tspan>
</text>
<text id=")" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="236.6909" y="18">)</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<text id="{" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="248.2368" y="18">{</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<polygon id="Fill-21" fill="#F5F2F0" points="0 38 467 38 467 25 0 25"></polygon>
<text id="--" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273"></text>
<text id="if" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#0077AA">
<tspan x="11.5459" y="31">if</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<text id="(" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="28.86475" y="31">(</tspan>
</text>
<text id="error" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#000000">
<tspan x="34.6377" y="31">error</tspan>
</text>
<text id=")" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="63.50244" y="31">)</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<text id="{" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="75.04834" y="31">{</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<polygon id="Fill-31" fill="#F5F2F0" points="0 51 467 51 467 38 0 38"></polygon>
<text id="----" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273"></text>
<text id="handleError" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#000000">
<tspan x="23.0918" y="44">handleError</tspan>
</text>
<text id="(" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="86.59424" y="44">(</tspan>
</text>
<text id="error" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#000000">
<tspan x="92.36719" y="44">error</tspan>
</text>
<text id=");" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#999999">
<tspan x="121.2319" y="44">);</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<polygon id="Fill-38" fill="#F5F2F0" points="0 63 467 63 467 51 0 51"></polygon>
<text id="--" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273"></text>
<text id="}" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="11.5459" y="57">}</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<text id="else" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#0077AA">
<tspan x="23.0918" y="57">else</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<text id="{" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="51.95654" y="57">{</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<polygon id="Fill-46" fill="#F5F2F0" points="0 76 467 76 467 63 0 63"></polygon>
<text id="----" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273"></text>
<text id="//-..." font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#708090">
<tspan x="23.0918" y="69">// ...</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<polygon id="Fill-50" fill="#F5F2F0" points="0 89 467 89 467 76 0 76"></polygon>
<text id="----" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273"></text>
<text id="loadScript" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#000000">
<tspan x="23.0918" y="82">loadScript</tspan>
</text>
<text id="(" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="80.82129" y="82">(</tspan>
</text>
<text id="'2.js'" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#669900">
<tspan x="86.59424" y="82">'2.js'</tspan>
</text>
<text id="," font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="121.2319" y="82">,</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<text id="function" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#0077AA">
<tspan x="132.7778" y="82">function</tspan>
</text>
<text id="(" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="178.9614" y="82">(</tspan>
</text>
<text id="error" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#000000">
<tspan x="184.7344" y="82">error</tspan>
</text>
<text id="," font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="213.5991" y="82">,</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<text id="script" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#000000">
<tspan x="225.145" y="82">script</tspan>
</text>
<text id=")" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="259.7827" y="82">)</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<text id="{" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="271.3286" y="82">{</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<polygon id="Fill-67" fill="#F5F2F0" points="0 102 467 102 467 89 0 89"></polygon>
<text id="------" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273"></text>
<text id="if" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#0077AA">
<tspan x="34.6377" y="95">if</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<text id="(" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="51.95654" y="95">(</tspan>
</text>
<text id="error" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#000000">
<tspan x="57.72949" y="95">error</tspan>
</text>
<text id=")" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="86.59424" y="95">)</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<text id="{" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="98.14014" y="95">{</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<polygon id="Fill-77" fill="#F5F2F0" points="0 114 467 114 467 102 0 102"></polygon>
<text id="--------" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273"></text>
<text id="handleError" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#000000">
<tspan x="46.18359" y="108">handleError</tspan>
</text>
<text id="(" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="109.686" y="108">(</tspan>
</text>
<text id="error" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#000000">
<tspan x="115.459" y="108">error</tspan>
</text>
<text id=");" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#999999">
<tspan x="144.3237" y="108">);</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<polygon id="Fill-84" fill="#F5F2F0" points="0 127 467 127 467 114 0 114"></polygon>
<text id="------" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273"></text>
<text id="}" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="34.6377" y="120">}</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<text id="else" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#0077AA">
<tspan x="46.18359" y="120">else</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<text id="{" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="75.04834" y="120">{</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<polygon id="Fill-92" fill="#F5F2F0" points="0 140 467 140 467 127 0 127"></polygon>
<text id="--------" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273"></text>
<text id="//-..." font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#708090">
<tspan x="46.18359" y="133">// ...</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<polygon id="Fill-96" fill="#F5F2F0" points="0 153 467 153 467 140 0 140"></polygon>
<text id="--------" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273"></text>
<text id="loadScript" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#000000">
<tspan x="46.18359" y="146">loadScript</tspan>
</text>
<text id="(" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="103.9131" y="146">(</tspan>
</text>
<text id="'3.js'" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#669900">
<tspan x="109.686" y="146">'3.js'</tspan>
</text>
<text id="," font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="144.3237" y="146">,</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<text id="function" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#0077AA">
<tspan x="155.8696" y="146">function</tspan>
</text>
<text id="(" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="202.0532" y="146">(</tspan>
</text>
<text id="error" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#000000">
<tspan x="207.8262" y="146">error</tspan>
</text>
<text id="," font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="236.6909" y="146">,</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<text id="script" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#000000">
<tspan x="248.2368" y="146">script</tspan>
</text>
<text id=")" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="282.8745" y="146">)</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<text id="{" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="294.4204" y="146">{</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<polygon id="Fill-113" fill="#F5F2F0" points="0 165 467 165 467 153 0 153"></polygon>
<text id="----------" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273"></text>
<text id="if" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#0077AA">
<tspan x="57.72949" y="159">if</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<text id="(" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="75.04834" y="159">(</tspan>
</text>
<text id="error" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#000000">
<tspan x="80.82129" y="159">error</tspan>
</text>
<text id=")" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="109.686" y="159">)</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<text id="{" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="121.2319" y="159">{</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<polygon id="Fill-123" fill="#F5F2F0" points="0 178 467 178 467 165 0 165"></polygon>
<text id="------------" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273"></text>
<text id="handleError" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#000000">
<tspan x="69.27539" y="171">handleError</tspan>
</text>
<text id="(" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="132.7778" y="171">(</tspan>
</text>
<text id="error" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#000000">
<tspan x="138.5508" y="171">error</tspan>
</text>
<text id=");" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#999999">
<tspan x="167.4155" y="171">);</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<polygon id="Fill-130" fill="#F5F2F0" points="0 191 467 191 467 178 0 178"></polygon>
<text id="----------" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273"></text>
<text id="}" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="57.72949" y="184">}</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<text id="else" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#0077AA">
<tspan x="69.27539" y="184">else</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<text id="{" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="98.14014" y="184">{</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<polygon id="Fill-138" fill="#F5F2F0" points="0 204 467 204 467 191 0 191"></polygon>
<text id="------------" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273"></text>
<text id="//-...continue-after-all-scripts-are-loaded-(*)" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#708090">
<tspan x="69.27539" y="197">// ...continue after all scripts are loaded (*)</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<polygon id="Fill-142" fill="#F5F2F0" points="0 216 467 216 467 204 0 204"></polygon>
<text id="----------" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273"></text>
<text id="}" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="57.72949" y="210">}</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<polygon id="Fill-146" fill="#F5F2F0" points="0 229 467 229 467 216 0 216"></polygon>
<text id="--------" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273"></text>
<text id="});" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#999999">
<tspan x="46.18359" y="222">});</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<polygon id="Fill-150" fill="#F5F2F0" points="0 242 467 242 467 229 0 229"></polygon>
<text id="------" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273"></text>
<text id="}" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="34.6377" y="235">}</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<polygon id="Fill-154" fill="#F5F2F0" points="0 255 467 255 467 242 0 242"></polygon>
<text id="----" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273"></text>
<text id="})" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#999999">
<tspan x="23.0918" y="248">})</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<polygon id="Fill-158" fill="#F5F2F0" points="0 267 467 267 467 255 0 255"></polygon>
<text id="--" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273"></text>
<text id="}" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" fill="#999999">
<tspan x="11.5459" y="261">}</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<polygon id="Fill-162" fill="#F5F2F0" points="0 280 467 280 467 267 0 267"></polygon>
<text id="});" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal" letter-spacing="0.0273" fill="#999999">
<tspan x="0" y="273">});</tspan>
</text>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
<polygon id="Fill-165" fill="#F5F2F0" points="0 293 467 293 467 280 0 280"></polygon>
<text id="-" font-family="PTMono-Regular, PT Mono" font-size="10" font-weight="normal"></text>
</g>
<g id="Group" transform="translate(232.000000, 140.000000) rotate(90.000000) translate(-232.000000, -140.000000) translate(93.000000, -92.000000)" fill="#626262" fill-opacity="0.2" fill-rule="nonzero">
<path d="M139.110335,0.599780046 L94.2108762,150.428815 L184.009794,150.428815 L139.110335,0.599780046 Z M139.110335,39.4739646 L167.150355,133.043223 L111.070316,133.043223 L139.110335,39.4739646 Z" id="Shape"></path>
<path d="M189.219757,167.814408 L89.0009134,167.814408 L62.9510996,254.74237 L215.269571,254.74237 L189.219757,167.814408 Z M95.4404274,185.2 L182.780243,185.2 L198.410131,237.356777 L79.8105391,237.356777 L95.4404274,185.2 Z" id="Shape"></path>
<path d="M220.479534,272.127962 L57.7411369,272.127962 L31.6913231,359.055924 L246.529347,359.055924 L220.479534,272.127962 Z M64.1806508,289.513554 L214.04002,289.513554 L229.669908,341.670331 L48.5507626,341.670331 L64.1806508,289.513554 Z" id="Shape"></path>
<path d="M251.73931,376.441516 L26.4813603,376.441516 L0.431546555,463.369478 L277.789124,463.369478 L251.73931,376.441516 Z M32.9208743,393.827109 L245.299796,393.827109 L260.929684,445.983886 L17.290986,445.983886 L32.9208743,393.827109 Z" id="Shape"></path>
</g>
<polygon id="Shape" fill="#D88D8D" fill-rule="nonzero" points="411.848113 150.069 409.767113 152.151 412.582113 165.616 419.315113 165.616 421.947113 171.125 432.781113 174.492 442.636113 170.88 444.900113 165.31 452.001113 164.943 454.571113 151.477 452.184113 149.396 449.246113 158.822 440.126113 154.874 435.566113 158.669 432.169113 156.068 428.711113 158.669 424.579113 155.609 415.337113 159.893"></polygon>
<path d="M459.984113,91 C459.984113,91 463.289113,98.896 461.820113,104.037 C460.098113,110.064 452.211113,109.746 449.617113,109.471 C445.527113,106.036 439.911113,103.731 432.196113,103.731 C424.488113,103.731 418.937113,106.026 414.941113,109.447 C412.607113,109.722 404.293113,110.245 402.520113,104.037 C401.049113,98.896 404.354113,91 404.354113,91 C404.354113,91 393.888113,105.017 397.927113,113.035 C399.526113,116.208 404.461113,118.274 407.965113,119.384 C404.006113,128.924 404.895113,139.293 404.895113,139.293 L414.719113,146.454 L417.198113,154.534 L425.186113,150.494 L429.409113,153.738 L432.806113,151.045 L436.295113,153.738 L440.610113,150.219 L448.598113,153.738 L450.571113,146.454 L460.457113,139.384 C460.457113,139.384 461.073113,128.864 456.773113,119.253 C460.243113,118.116 464.871113,116.087 466.410113,113.034 C470.450113,105.017 459.984113,91 459.984113,91 Z M425.278113,139.386 L415.087113,138.284 L412.700113,130.113 L414.444113,128.185 L426.471113,132.225 L428.215113,135.714 L425.278113,139.386 Z M435.633113,145.858 L434.302113,144.94 L432.807113,145.491 L432.649113,145.491 L431.154113,144.94 L429.823113,145.858 L428.813113,144.71 L431.751113,138.972 L432.649113,139.385 L432.807113,139.385 L433.705113,138.972 L436.643113,144.71 L435.633113,145.858 Z M450.339113,138.284 L440.148113,139.386 L437.210113,135.713 L438.954113,132.224 L450.981113,128.184 L452.725113,130.112 L450.339113,138.284 Z" id="Shape" fill="#D88D8D" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
1-js/11-async/01-callbacks/callback-hell@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 82 KiB

6
1-js/11-async/02-promise-basics/article.md
View file

@ -38,7 +38,7 @@ When the executor finishes the job, it should call one of the functions that it
- sets `state` to `"rejected"`,
- sets `result` to `error`.
![](promise-resolve-reject.png)
![](promise-resolve-reject.svg)
Later we'll see how these changes become known to "fans".
@ -60,7 +60,7 @@ We can see two things by running the code above:
After one second of "processing" the executor calls `resolve("done")` to produce the result:
![](promise-resolve-1.png)
![](promise-resolve-1.svg)
That was an example of a successful job completion, a "fulfilled promise".
@ -73,7 +73,7 @@ let promise = new Promise(function(resolve, reject) {
});
```
![](promise-reject-1.png)
![](promise-reject-1.svg)
To summarize, the executor should do a job (something that takes time usually) and then call `resolve` or `reject` to change the state of the corresponding Promise object.

BIN
1-js/11-async/02-promise-basics/promise-reject-1.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 13 KiB

27
1-js/11-async/02-promise-basics/promise-reject-1.svg Normal file
View file

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="512px" height="106px" viewBox="0 0 512 106" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>promise-reject-1.svg</title>
<desc>Created with sketchtool.</desc>
<g id="promise" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="promise-reject-1.svg">
<path d="M9,34 L9,92 L184,92 L184,34 L9,34 Z" id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB"></path>
<text id="new-Promise(executor" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#707175">
<tspan x="10" y="22">new Promise(executor)</tspan>
</text>
<text id="state:-&quot;pending&quot;-res" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="21" y="54.4316406">state: "pending"</tspan>
<tspan x="21" y="74.4316406">result: undefined</tspan>
</text>
<path id="Line-Copy" d="M297.500387,61.4861111 L198.490385,61.4861111 L198.490385,59.4861111 L297.500387,59.4861111 L297.500387,53.4861111 L311.500387,60.4861111 L297.500387,67.4861111 L297.500387,61.4861111 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="reject(error)" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="201.4" y="49">reject(error)</tspan>
</text>
<rect id="Rectangle-1-Copy-3" stroke="#C74A6C" stroke-width="2" fill="#FCDFE1" x="322" y="34" width="175" height="58"></rect>
<text id="state:-&quot;rejected&quot;-re" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#727155">
<tspan x="337" y="55.4316406">state: "rejected"</tspan>
<tspan x="337" y="75.4316406">result: error</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
1-js/11-async/02-promise-basics/promise-reject-1@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 29 KiB

BIN
1-js/11-async/02-promise-basics/promise-resolve-1.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 14 KiB

27
1-js/11-async/02-promise-basics/promise-resolve-1.svg Normal file
View file

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="512px" height="106px" viewBox="0 0 512 106" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>promise-resolve-1.svg</title>
<desc>Created with sketchtool.</desc>
<g id="promise" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="promise-resolve-1.svg">
<path d="M9,34 L9,92 L184,92 L184,34 L9,34 Z" id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB"></path>
<text id="new-Promise(executor" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#707175">
<tspan x="10" y="22">new Promise(executor)</tspan>
</text>
<text id="state:-&quot;pending&quot;-res" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="21" y="54.4316406">state: "pending"</tspan>
<tspan x="21" y="74.4316406">result: undefined</tspan>
</text>
<path id="Line-Copy" d="M295.500387,61.4861111 L196.490385,61.4861111 L196.490385,59.4861111 L295.500387,59.4861111 L295.500387,53.4861111 L309.500387,60.4861111 L295.500387,67.4861111 L295.500387,61.4861111 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="resolve(&quot;done&quot;)" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="192" y="49">resolve("done")</tspan>
</text>
<rect id="Rectangle-1-Copy" stroke="#7ED321" stroke-width="2" fill="#FFF9EB" x="323" y="35" width="181" height="57"></rect>
<text id="state:-&quot;fulfilled&quot;-r" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#417505">
<tspan x="338" y="55.4316406">state: "fulfilled"</tspan>
<tspan x="338" y="75.4316406">result: "done"</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
1-js/11-async/02-promise-basics/promise-resolve-1@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 32 KiB

BIN
1-js/11-async/02-promise-basics/promise-resolve-reject.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 25 KiB

36
1-js/11-async/02-promise-basics/promise-resolve-reject.svg Normal file
View file

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="512px" height="246px" viewBox="0 0 512 246" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>promise-resolve-reject.svg</title>
<desc>Created with sketchtool.</desc>
<g id="promise" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="promise-resolve-reject.svg">
<rect id="Rectangle-1" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="9" y="91" width="170" height="70"></rect>
<text id="new-Promise(executor" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#707175">
<tspan x="10" y="82">new Promise(executor)</tspan>
</text>
<text id="state:-&quot;pending&quot;-res" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="21" y="115.431641">state: "pending"</tspan>
<tspan x="21" y="135.431641">result: undefined</tspan>
</text>
<path id="Line" d="M299.865748,184.482759 L195.673354,136.489909 L196.510091,134.673354 L300.702485,182.666204 L303.212697,177.21654 L313,189.431641 L297.355537,189.932423 L299.865748,184.482759 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Line-Copy" d="M300.492513,63.3688916 L196.467935,107.310308 L195.689692,105.467935 L299.71427,61.5265189 L297.379539,55.9994011 L313,57 L302.827244,68.8960094 L300.492513,63.3688916 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<text id="resolve(value)" transform="translate(244.389895, 72.629682) rotate(-23.000000) translate(-244.389895, -72.629682) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="185.589895" y="77.1296818">resolve(value)</tspan>
</text>
<text id="reject(error)" transform="translate(251.633927, 150.640538) rotate(25.000000) translate(-251.633927, -150.640538) " font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#EE6B47">
<tspan x="197.033927" y="155.140538">reject(error)</tspan>
</text>
<rect id="Rectangle-1-Copy" stroke="#7ED321" stroke-width="2" fill="#FFF9EB" x="323" y="10" width="182" height="64"></rect>
<text id="state:-&quot;fulfilled&quot;-r" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#417505">
<tspan x="338" y="34.4316406">state: "fulfilled"</tspan>
<tspan x="338" y="54.4316406">result: value</tspan>
</text>
<rect id="Rectangle-1-Copy-3" stroke="#C74A6C" stroke-width="2" fill="#FCDFE1" x="323" y="177" width="182" height="64"></rect>
<text id="state:-&quot;rejected&quot;-re" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#727155">
<tspan x="338" y="201.431641">state: "rejected"</tspan>
<tspan x="338" y="221.431641">result: error</tspan>
</text>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
1-js/11-async/02-promise-basics/promise-resolve-reject@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 59 KiB

6
1-js/11-async/03-promise-chaining/article.md
View file

@ -42,7 +42,7 @@ Here the flow is:
As the result is passed along the chain of handlers, we can see a sequence of `alert` calls: `1` -> `2` -> `4`.
![](promise-then-chain.png)
![](promise-then-chain.svg)
The whole thing works, because a call to `promise.then` returns a promise, so that we can call the next `.then` on it.
@ -94,7 +94,7 @@ What we did here is just several handlers to one promise. They don't pass the re
Here's the picture (compare it with the chaining above):
![](promise-then-many.png)
![](promise-then-many.svg)
All `.then` on the same promise get the same result -- the result of that promise. So in the code above all `alert` show the same: `1`.
@ -382,4 +382,4 @@ If a `.then` (or `catch/finally`, doesn't matter) handler returns a promise, the
Here's a full picture:
![](promise-handler-variants.png)
![](promise-handler-variants.svg)

BIN
1-js/11-async/03-promise-chaining/promise-handler-variants.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 40 KiB

58
1-js/11-async/03-promise-chaining/promise-handler-variants.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
1-js/11-async/03-promise-chaining/promise-handler-variants@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 94 KiB

BIN
1-js/11-async/03-promise-chaining/promise-then-chain.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9.2 KiB

38
1-js/11-async/03-promise-chaining/promise-then-chain.svg Normal file
View file

@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="165px" height="339px" viewBox="0 0 165 339" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>promise-then-chain.svg</title>
<desc>Created with sketchtool.</desc>
<g id="promise" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="promise-then-chain.svg">
<rect id="Rectangle-1-Copy-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="40" y="105" width="108" height="28"></rect>
<text id=".then" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="72.5" y="124">.then</tspan>
</text>
<rect id="Rectangle-1-Copy-8" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="40" y="10" width="108" height="28"></rect>
<text id="new-Promise" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="47.3" y="28">new Promise</tspan>
</text>
<text id="resolve(1)" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="7" y="70">resolve(1)</tspan>
</text>
<text id="return-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="14" y="167">return 2</tspan>
</text>
<path id="Line-Copy-8" d="M92.5,173.5 L92.5,142.5 L94.5,142.5 L94.5,173.5 L100.5,173.5 L93.5,187.5 L86.5,173.5 L92.5,173.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1-Copy-4" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="40" y="202" width="108" height="28"></rect>
<text id=".then-copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="72.5" y="221">.then</tspan>
</text>
<text id="return-4" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="14" y="264">return 4</tspan>
</text>
<path id="Line-Copy-10" d="M92.5,271.5 L92.5,240.5 L94.5,240.5 L94.5,271.5 L100.5,271.5 L93.5,285.5 L86.5,271.5 L92.5,271.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1-Copy-5" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="40" y="298" width="108" height="28"></rect>
<text id=".then-copy-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="72.5" y="317">.then</tspan>
</text>
<path id="Line-Copy-9" d="M92.5,77.5 L92.5,46.5 L94.5,46.5 L94.5,77.5 L100.5,77.5 L93.5,91.5 L86.5,77.5 L92.5,77.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

BIN
1-js/11-async/03-promise-chaining/promise-then-chain@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 21 KiB

BIN
1-js/11-async/03-promise-chaining/promise-then-many.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.9 KiB

32
1-js/11-async/03-promise-chaining/promise-then-many.svg Normal file
View file

@ -0,0 +1,32 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="373px" height="152px" viewBox="0 0 373 152" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>promise-then-many.svg</title>
<desc>Created with sketchtool.</desc>
<g id="promise" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="promise-then-many.svg">
<rect id="Rectangle-1-Copy-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="10" y="120" width="108" height="28"></rect>
<text id=".then" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="42.5" y="139">.then</tspan>
</text>
<rect id="Rectangle-1-Copy-8" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="131" y="4" width="108" height="28"></rect>
<text id="new-Promise" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="138.3" y="22">new Promise</tspan>
</text>
<text id="resolve(1)" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="142" y="54">resolve(1)</tspan>
</text>
<path id="Line-Copy-8" d="M184,93 L184,71 L186,71 L186,93 L192,93 L185,107 L178,93 L184,93 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1-Copy-4" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="131" y="120" width="108" height="28"></rect>
<text id=".then-copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="164" y="139">.then</tspan>
</text>
<path id="Line-Copy-9" d="M74.3957845,97.6522953 L113.74577,70.1073057 L114.892694,71.7457696 L75.5427092,99.2907591 L78.9834833,104.206151 L63.5,106.5 L70.9550105,92.7369037 L74.3957845,97.6522953 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1-Copy-5" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="255" y="120" width="108" height="28"></rect>
<text id=".then-copy-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="287.5" y="139">.then</tspan>
</text>
<path id="Line-Copy-10" d="M293.891997,98.6098627 L256.595473,69.1652385 L257.834762,67.5954729 L295.131286,97.0400972 L298.849151,92.3308006 L305.5,106.5 L290.174131,103.319159 L293.891997,98.6098627 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
1-js/11-async/03-promise-chaining/promise-then-many@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
1-js/11-async/04-promise-error-handling/promise-handler-variants.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 40 KiB

58
1-js/11-async/04-promise-error-handling/promise-handler-variants.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
1-js/11-async/04-promise-error-handling/promise-handler-variants@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 94 KiB

BIN
1-js/11-async/04-promise-error-handling/promise-then-chain.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9.2 KiB

38
1-js/11-async/04-promise-error-handling/promise-then-chain.svg Normal file
View file

@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="165px" height="339px" viewBox="0 0 165 339" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>promise-then-chain.svg</title>
<desc>Created with sketchtool.</desc>
<g id="promise" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="promise-then-chain.svg">
<rect id="Rectangle-1-Copy-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="40" y="105" width="108" height="28"></rect>
<text id=".then" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="72.5" y="124">.then</tspan>
</text>
<rect id="Rectangle-1-Copy-8" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="40" y="10" width="108" height="28"></rect>
<text id="new-Promise" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="47.3" y="28">new Promise</tspan>
</text>
<text id="resolve(1)" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="7" y="70">resolve(1)</tspan>
</text>
<text id="return-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="14" y="167">return 2</tspan>
</text>
<path id="Line-Copy-8" d="M92.5,173.5 L92.5,142.5 L94.5,142.5 L94.5,173.5 L100.5,173.5 L93.5,187.5 L86.5,173.5 L92.5,173.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1-Copy-4" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="40" y="202" width="108" height="28"></rect>
<text id=".then-copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="72.5" y="221">.then</tspan>
</text>
<text id="return-4" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="14" y="264">return 4</tspan>
</text>
<path id="Line-Copy-10" d="M92.5,271.5 L92.5,240.5 L94.5,240.5 L94.5,271.5 L100.5,271.5 L93.5,285.5 L86.5,271.5 L92.5,271.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1-Copy-5" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="40" y="298" width="108" height="28"></rect>
<text id=".then-copy-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="72.5" y="317">.then</tspan>
</text>
<path id="Line-Copy-9" d="M92.5,77.5 L92.5,46.5 L94.5,46.5 L94.5,77.5 L100.5,77.5 L93.5,91.5 L86.5,77.5 L92.5,77.5 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

BIN
1-js/11-async/04-promise-error-handling/promise-then-chain@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 21 KiB

BIN
1-js/11-async/04-promise-error-handling/promise-then-many.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.9 KiB

32
1-js/11-async/04-promise-error-handling/promise-then-many.svg Normal file
View file

@ -0,0 +1,32 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="373px" height="152px" viewBox="0 0 373 152" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>promise-then-many.svg</title>
<desc>Created with sketchtool.</desc>
<g id="promise" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="promise-then-many.svg">
<rect id="Rectangle-1-Copy-3" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="10" y="120" width="108" height="28"></rect>
<text id=".then" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="42.5" y="139">.then</tspan>
</text>
<rect id="Rectangle-1-Copy-8" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="131" y="4" width="108" height="28"></rect>
<text id="new-Promise" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="138.3" y="22">new Promise</tspan>
</text>
<text id="resolve(1)" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" fill="#8A704D">
<tspan x="142" y="54">resolve(1)</tspan>
</text>
<path id="Line-Copy-8" d="M184,93 L184,71 L186,71 L186,93 L192,93 L185,107 L178,93 L184,93 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1-Copy-4" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="131" y="120" width="108" height="28"></rect>
<text id=".then-copy" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="164" y="139">.then</tspan>
</text>
<path id="Line-Copy-9" d="M74.3957845,97.6522953 L113.74577,70.1073057 L114.892694,71.7457696 L75.5427092,99.2907591 L78.9834833,104.206151 L63.5,106.5 L70.9550105,92.7369037 L74.3957845,97.6522953 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<rect id="Rectangle-1-Copy-5" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="255" y="120" width="108" height="28"></rect>
<text id=".then-copy-2" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="287.5" y="139">.then</tspan>
</text>
<path id="Line-Copy-10" d="M293.891997,98.6098627 L256.595473,69.1652385 L257.834762,67.5954729 L295.131286,97.0400972 L298.849151,92.3308006 L305.5,106.5 L290.174131,103.319159 L293.891997,98.6098627 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
1-js/11-async/04-promise-error-handling/promise-then-many@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 16 KiB

2
1-js/11-async/07-microtask-queue/article.md
View file

@ -34,7 +34,7 @@ Or, to say that simply, when a promise is ready, its `.then/catch/finally` handl
That's why "code finished" in the example above shows first.
![](promiseQueue.png)
![](promiseQueue.svg)
Promise handlers always go through that internal queue.

BIN
1-js/11-async/07-microtask-queue/eventLoop.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 16 KiB

36
1-js/11-async/07-microtask-queue/eventLoop.svg Normal file
View file

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="479px" height="279px" viewBox="0 0 479 279" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 55.2 (78181) - https://sketchapp.com -->
<title>eventLoop.svg</title>
<desc>Created with sketchtool.</desc>
<g id="promise" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="eventLoop.svg">
<rect id="Rectangle-1-Copy-5" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="218" y="91" width="108" height="28"></rect>
<text id="..." font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="258.9" y="110">...</tspan>
</text>
<rect id="Rectangle-1-Copy-6" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="218" y="118" width="108" height="28"></rect>
<text id="setTimeout" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="230" y="137">setTimeout</tspan>
</text>
<rect id="Rectangle-1-Copy-8" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="218" y="145" width="108" height="28"></rect>
<text id="mousemove" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="233.7" y="164">mousemove</tspan>
</text>
<rect id="Rectangle-1-Copy-9" stroke="#E8C48E" stroke-width="2" fill="#FFF9EB" x="218" y="173" width="108" height="28"></rect>
<text id="script" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" line-spacing="20" fill="#8A704D">
<tspan x="246.8" y="192">script</tspan>
</text>
<text id="event-loop" font-family="PTSans-Regular, PT Sans" font-size="24" font-weight="normal" fill="#000000">
<tspan x="72.288" y="134">event</tspan>
<tspan x="77.64" y="163">loop</tspan>
</text>
<text id="macrotask-queue" font-family="PTSans-Regular, PT Sans" font-size="24" font-weight="normal" fill="#9B9B9B">
<tspan x="341.06" y="136">macrotask</tspan>
<tspan x="361.928" y="165">queue</tspan>
</text>
<path id="Path" d="M263.010725,69.7351956 L258.427178,55.1253877 L262.243758,53.9280087 L270.177144,79.2152421 L244.446978,72.8637563 L245.405602,68.9803249 L260.271316,72.6499231 L251.379057,64.2925256 C234.508006,51.2131452 213.805751,44 192,44 C160.941365,44 132.332745,58.6951996 114.136419,83.1428166 L110.927659,80.7545412 C129.87093,55.303369 159.663534,40 192,40 C214.734181,40 236.326559,47.5348634 253.906792,61.1909666 L254.049591,61.3130651 L263.010725,69.7351956 Z" fill="#EE6B47" fill-rule="nonzero"></path>
<path id="Path-Copy-2" d="M120.724894,221.828651 L125.083129,236.507247 L121.248579,237.645767 L113.705173,212.239473 L139.334576,218.986062 L138.316319,222.854285 L123.508821,218.956414 L132.2805,227.4584 C148.5538,239.990276 169.796977,246.679687 194.412852,246.679687 C211.208683,246.679687 229.275076,241.15794 243.817212,231.644681 C250.728173,227.123628 255.441499,222.839019 265.167458,212.919811 L265.501312,212.579321 C267.561111,210.478661 268.636053,209.389458 269.882343,208.148251 L272.704986,210.98245 C271.473253,212.20916 270.406519,213.290045 268.357381,215.379834 L268.02357,215.72028 C258.101872,225.839116 253.233892,230.264312 246.007006,234.992038 C230.82183,244.925965 211.996447,250.679687 194.412852,250.679687 C168.89777,250.679687 146.759649,243.69382 129.747255,230.556099 L129.658358,230.487449 L120.724894,221.828651 Z" fill="#EE6B47" fill-rule="nonzero"></path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
1-js/11-async/07-microtask-queue/eventLoop@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 38 KiB

BIN
1-js/11-async/07-microtask-queue/promiseQueue.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 14 KiB

43
1-js/11-async/07-microtask-queue/promiseQueue.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
1-js/11-async/07-microtask-queue/promiseQueue@2x.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 36 KiB