Skip to content

Commit 659b2f7

Browse files
jamesknelsonjamesknelson
committed
initial commit
0 parents  commit 659b2f7

File tree

5 files changed

+637
-0
lines changed

5 files changed

+637
-0
lines changed

‎README.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Asynchronous JavaScript cheatsheet
2+
3+
This cheatsheet contains a summary of the [Mastering Asynchronous JavaScript](https://frontarm.com/courses/async-javascript/) course at [Frontend Armory](https://frontarm.com/browse/).
4+
5+
Want to deepen your understanding of promises, `async` and `await`? The course will guide you there through **47 live examples and exercises.** To get started, just click through to the first lesson: [Why async, anyway?](https://frontarm.com/courses/async-javascript/promises/why-async/).
6+
7+
![Asynchronous JavaScript Cheatsheet](./async-cheatsheet.png)
8+
9+
Want a printable-optimized PDF version but don't want to build it yourself? There's one included in [the course](https://frontarm.com/courses/async-javascript/in-practice/cheatsheet/).

‎async-cheatsheet.html

+283
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,283 @@
1+
<!DOCTYPE>
2+
<html>
3+
<head>
4+
<link type="text/css" rel="stylesheet" href="stylesheet.css">
5+
</head>
6+
<body>
7+
<div class="vertical-split">
8+
<div class="top">
9+
10+
<div class="horizontal-split">
11+
<div class="left" id="top-left">
12+
13+
<h1>asynchronous<span class="js">JS</span>cheatsheet</h1>
14+
<dl id="legend">
15+
<dt>
16+
<span class="promise pending">
17+
<span class="bounce1"></span><span class="bounce2"></span><span class="bounce3"></span>
18+
</span>
19+
</dt>
20+
<dd>
21+
<strong>Pending</strong> promises can become either...
22+
</dd>
23+
24+
<dt>
25+
<span class="promise fulfilled">value</span>
26+
</dt>
27+
<dd>
28+
<strong>Fulfilled</strong> with a <strong>value</strong>, or...
29+
</dd>
30+
31+
<dt>
32+
<span class="promise rejected">error</span>
33+
</dt>
34+
<dd>
35+
<strong>Rejected</strong> with an <strong>error</strong>.
36+
</dd>
37+
38+
<dt>
39+
<span class="promise">outcome</span>
40+
</dt>
41+
<dd>
42+
Either way, they are <strong>settled</strong> with an <strong>outcome</strong>.
43+
</dd>
44+
</dl>
45+
46+
</div>
47+
48+
<section id="combining" class="right">
49+
<h2>Combining promises</h2>
50+
<div class="columns">
51+
<section>
52+
<p>Use <code>all()</code> to turn an <em>array of promises</em> into a <em>promise to an array</em>.</p>
53+
<div class="combine">
54+
<pre><code>Promise.<strong>all</strong>([
55+
<span class="fulfilled promise">value1</span>,
56+
<span class="fulfilled promise">value2</span>,
57+
<span class="fulfilled promise">value3</span>,
58+
])
59+
</code></pre>
60+
<code class="arrow">-></code>
61+
<pre><code><span class="fulfilled promise auto">[value1
62+
value2,
63+
value3]</span></code></pre>
64+
</div>
65+
</section>
66+
67+
<section>
68+
<p>If <em>any</em> promise is rejected, the error will be passed through.</p>
69+
<div class="combine">
70+
<pre><code>Promise.<strong>all</strong>([
71+
<span class="pending promise"><span class="bounce1"></span><span class="bounce2"></span><span class="bounce3"></span></span>,
72+
<span class="pending promise"><span class="bounce1"></span><span class="bounce2"></span><span class="bounce3"></span></span>,
73+
<span class="rejected promise">error</span>,
74+
])
75+
</code></pre>
76+
<code class="arrow">-></code>
77+
<code><span class="rejected promise">error</span></code>
78+
</div>
79+
</section>
80+
81+
<section>
82+
<p>Use <code>race()</code> instead to pass through the first <em>settled</em> promise.</p>
83+
<div class="combine">
84+
<pre><code>Promise.<strong>race</strong>([
85+
<span class="pending promise"><span class="bounce1"></span><span class="bounce2"></span><span class="bounce3"></span></span>,
86+
<span class="pending promise"><span class="bounce1"></span><span class="bounce2"></span><span class="bounce3"></span></span>,
87+
<span class="fulfilled promise">value</span>,
88+
])
89+
</code></pre>
90+
<code class="arrow">-></code>
91+
<code><span class="fulfilled promise">value</span></code>
92+
</div>
93+
</section>
94+
</div>
95+
</section><!-- right -->
96+
97+
</div><!-- horizontal-split -->
98+
99+
</div><!-- top -->
100+
101+
<div class="bottom">
102+
103+
<div class="horizontal-split">
104+
<div class="right">
105+
106+
<div class="vertical-split">
107+
<div class='top'>
108+
109+
<div class="horizontal-split">
110+
111+
<section id="then" class="left">
112+
<h2>promise.<span class="keyword">then</span>( onFulfilled, onRejected )</h2>
113+
114+
<p>Calls <code>onFulfilled</code> once the promise is fulfilled.</p>
115+
116+
<code>
117+
<span class="promise fulfilled">value</span>.<strong>then</strong>(<span class="function"><span class="value">value</span> => <span class="value">nextValue</span></span>, <span class="optional function">...</span>) -> <span class="promise fulfilled">nextValue</span>
118+
</code>
119+
<code>
120+
<span class="promise fulfilled">value</span>.<strong>then</strong>(<span class="function"><span class="value">value</span> => <span class="promise">outcome</span></span>, <span class="optional function">...</span>) -> <span class="promise">outcome</span>
121+
</code>
122+
<code>
123+
<span class="promise fulfilled">value</span>.<strong>then</strong>(<span class="function"><span class="value">value</span> => throw <span class="error">error</span></span>, <span class="optional function">...</span>) -> <span class="promise rejected">error</span>
124+
</code>
125+
126+
<p>Calls <code>onRejected</code> if the promise is rejected.</p>
127+
128+
<code>
129+
<span class="promise rejected">error</span>.<strong>then</strong>(<span class="optional function">...</span>, <span class="function"><span class="error">error</span> => <span class="value">value</span></span>) -> <span class="promise fulfilled">value</span>
130+
</code>
131+
<code>
132+
<span class="promise rejected">error</span>.<strong>then</strong>(<span class="optional function">...</span>, <span class="function"><span class="error">error</span> => <span class="promise">outcome</span></span>) -> <span class="promise">outcome</span>
133+
</code>
134+
<code>
135+
<span class="promise rejected">error</span>.<strong>then</strong>(<span class="optional function">...</span>, <span class="function"><span class="error">error</span> => throw <span class="error">nextError</span></span>) -> <span class="promise rejected">nextError</span>
136+
</code>
137+
138+
<p>Passes errors through if <code>onRejected</code> is undefined.</p>
139+
140+
<code>
141+
<span class="promise rejected">error</span>.<strong>then</strong>(<span class="function">...</span>) -> <span class="promise rejected">error</span>
142+
</code>
143+
144+
</section><!-- left-->
145+
146+
<div class="right" id="non-then-handlers">
147+
148+
<section id="catch">
149+
<h2>promise.<span class="keyword">catch</span>( onRejected )</h2>
150+
151+
<p>Behaves identically to <code>then</code> when <code>onFulfilled</code> is omitted.</p>
152+
153+
<code>
154+
<span class="promise rejected">error</span>.<strong>catch</strong>(<span class="function"><strong>onRejected</strong></span>) <=> <span class="promise rejected">error</span>.<strong>then</strong>(<span class="optional function">...</span>, <span class="function"><strong>onRejected</strong></span>)
155+
</code>
156+
157+
<p>Passes fulfilled values through.</p>
158+
159+
<code>
160+
<span class="promise fulfilled">value</span>.<strong>catch</strong>(<span class="function">...</span>) -> <span class="promise fulfilled">value</span>
161+
</code>
162+
</section>
163+
164+
<section id="finally">
165+
<h2>promise.<span class="keyword">finally</span>( onFinally )</h2>
166+
167+
<p>Calls <code>onFinally</code> with <em>no arguments</em> once any outcome is available. Passes through input promise.</p>
168+
169+
<code>
170+
<span class="promise">outcome</span>.<strong>finally</strong>(<span class="function">() => ...</span>) -> <span class="promise">outcome</span>
171+
</code>
172+
173+
<p class="warning">
174+
The <code>onFulfilled</code>, <code>onRejected</code> and <code>onFinally</code> functions will not be executed until at least the <strong>next tick</strong>, even for promises that already have an outcome.
175+
</p>
176+
</section>
177+
178+
</div><!-- right -->
179+
</div><!-- horizontal-split -->
180+
181+
</div><!-- top -->
182+
<div class="bottom">
183+
184+
<section id="making-promises">
185+
<h2>Making promises</h2>
186+
<div class="horizontal-split">
187+
<div class="left">
188+
<p>The function passed to <code>new Promise</code> will be executed synchronously.</p>
189+
<pre><code><strong>new Promise</strong>((<span class="green">resolve</span>, <span class="red">reject</span>) => {
190+
doImportantStuff((<span class="error">error</span>, <span class="value">value</span>) => {
191+
if (<span class="error">error</span>)
192+
<span class="red">reject</span>(<span class="error">error</span>)
193+
else
194+
<span class="green">resolve</span>(<span class="value">value</span>)
195+
})
196+
})</code></pre>
197+
</div>
198+
<div class="right margin">
199+
<section>
200+
<p>Use <code>resolve()</code> or <code>reject()</code> to create promises from values.</p>
201+
<code>Promise.<strong>resolve</strong>(<span class="value">value</span>) -> <span class="fulfilled promise">value</span></code>
202+
<code>Promise.<strong>reject</strong>(<span class="error">error</span>) -> <span class="rejected promise">error</span></code>
203+
<p>If you put a <em>fulfilled</em> promise into a <em>fulfilled</em> promise, they'll collapse into one.</p>
204+
<code>Promise.<strong>resolve</strong>(<span class="fulfilled promise">value</span>) -> <span class="fulfilled promise">value</span></code>
205+
</section>
206+
<hr />
207+
<p>Sometimes you might not need <code>reject</code>, or might not resolve to a value.</p>
208+
<pre><code>function delay(milliseconds) {
209+
return <strong>new Promise</strong>(<span class="green">resolve</span> =>
210+
setTimeout(<span class="green">resolve</span>, milliseconds)
211+
)
212+
}</code></pre>
213+
</div>
214+
</div>
215+
</section>
216+
217+
</div><!-- bottom -->
218+
</div><!-- vertical-split -->
219+
220+
</div><!-- right -->
221+
222+
<section id="async-await" class="left">
223+
<h2><span class="keyword">async</span>/<span class="keyword">await</span></h2>
224+
225+
<p>Calling an <code>async</code> function <em>always</em> results in a promise.</p>
226+
227+
<code>
228+
<span class="function">(<strong>async</strong> () => <span class="value">value</span>)</span>() -> <span class="fulfilled promise">value</span>
229+
</code>
230+
<code>
231+
<span class="function">(<strong>async</strong> () => <span class="promise">outcome</span>)</span>() -> <span class="promise">outcome</span>
232+
</code>
233+
<code>
234+
<span class="function">(<strong>async</strong> () => throw <span class="error">error</span>)</span>() -> <span class="rejected promise">error</span>
235+
</code>
236+
237+
<p><code>await</code> waits for a promise to be fulfilled, then returns its value.</p>
238+
239+
<pre><code><strong>async</strong> function() {
240+
try {
241+
let <span class="value">value</span> = <strong>await</strong> <span class="promise">outcome</span>
242+
// ...
243+
}
244+
catch (<span class="error">error</span>) {
245+
// ...
246+
}
247+
}
248+
</code></pre>
249+
250+
<p>You can pass non-promise values to <code>await</code></p>
251+
252+
<pre><code>const fn = <strong>async</strong> () => {
253+
let <span class="value">value</span> = <strong>await</strong> <span class="value">value</span>
254+
// ...
255+
}
256+
</code></pre>
257+
258+
<p class="warning">
259+
<code>await</code> may only be used within <code>async</code> functions.
260+
</p>
261+
262+
<p class="warning">
263+
<code>await</code> will wait until at least the <strong>next tick</strong> before returning, even when awaiting already-fulfilled promises or non-promise values.
264+
</p>
265+
266+
<footer>
267+
<div class="brand">
268+
<img src="logo.png" alt="Frontend Armory Logo" />
269+
<span class="frontend">Frontend</span> <span class="armory">Armory</span>
270+
</div>
271+
<div class="url">
272+
frontarm.com
273+
</div>
274+
</footer>
275+
276+
</section> <!-- left -->
277+
278+
</div><!-- horizontal-split -->
279+
280+
</div><!-- bottom -->
281+
</div><!-- vertical-split -->
282+
</body>
283+
</html>

‎async-cheatsheet.png

332 KB
Loading

‎logo.png

4.7 KB
Loading

0 commit comments

Comments
 (0)