|
7 | 7 | - Callback
|
8 | 8 | - Promises
|
9 | 9 | - Async/Await
|
10 |
| - - .. good practices |
| 10 | + - Exercises |
11 | 11 |
|
12 | 12 | ## Asynchronous programming
|
13 | 13 |
|
@@ -118,6 +118,16 @@ Imagine this:
|
118 | 118 |
|
119 | 119 | That's something you are used to do with other people, isn't it?
|
120 | 120 |
|
| 121 | +#### Syntax |
| 122 | + |
| 123 | +```javascript |
| 124 | + new Promise(executor); |
| 125 | + // or |
| 126 | + new Promise((resolve, reject) => { |
| 127 | + executor body |
| 128 | + }); |
| 129 | +``` |
| 130 | + |
121 | 131 | Well, Promises work kinda that.
|
122 | 132 |
|
123 | 133 | ```javascript
|
@@ -156,7 +166,84 @@ Too much talking, let go to the best sources you can get.
|
156 | 166 |
|
157 | 167 | ### Async/await
|
158 | 168 |
|
159 |
| -... |
| 169 | +Wait what? we were talking about ES2015 but this is not an ES2015 feature, nor ES2016!! We had to wait until ES2017 (ES8?? nope, remember that's not the way to name ES versions anymore) to have it. |
| 170 | +Then why are we talking about this? Simply because is one of the most important tools (together with generators and promises) to write asynchronous programs in JavaScript today. |
| 171 | + |
| 172 | +Imagine there's a feature to handle under the hood a the event loop and the promises to **operate asynchronously BUT resembles synchronous** code on its syntax. Since many program errors are originated on the difficulty of understanding a complex structure (e.g. like a promise chain) this feature might help with that, isn't it? |
| 173 | + |
| 174 | +First things first. If we go to the [ECMA2017 - 9.2 - ECMAScript Function Objects definition](https://www.ecma-international.org/ecma-262/8.0/index.html#sec-ecmascript-function-objects) we'll find that `async` is one of the 4 kinds of functions `normal`, `classConstructor`, `generator`and `async`, and if you search "async" there list of results is around 450. There's a lot to read there if you want; I'd suggest you start reading ad the [14.6 - Async Function Definition](https://www.ecma-international.org/ecma-262/8.0/index.html#sec-async-function-definitions). |
| 175 | + |
| 176 | +Again, even if the spec gets more sweet and friendly over time, it's still dry (but it'd be IMHO the first thing to read). |
| 177 | + |
| 178 | +Let's go for something more friendly. |
| 179 | + |
| 180 | +#### Async Function declaration statement |
| 181 | + |
| 182 | +> The async function declaration defines an asynchronous function, which returns an [AsyncFunction](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction) object. An asynchronous function is a function which operates asynchronously via the event loop, using an implicit [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) to return its result. But the syntax and structure of your code using async functions is much more like using standard synchronous functions. |
| 183 | +> |
| 184 | +> You can also define async functions using an [async function expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/async_function). |
| 185 | +> |
| 186 | +> Source: [MDN: Async Function declaration statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) |
| 187 | +
|
| 188 | +##### Syntax |
| 189 | + |
| 190 | +```javascript |
| 191 | +async function name([param[, param[, ... param]]]) { |
| 192 | + statements |
| 193 | +} |
| 194 | +``` |
| 195 | + |
| 196 | +#### Async Function expression |
| 197 | + |
| 198 | +> An async function expression is very similar to, and has almost the same syntax as, an async function statement. The main difference between an async function expression and an async function statement is the function name, which can be omitted in async function expressions to create anonymous functions. An async function expression can be used as an IIFE (Immediately Invoked Function Expression) which runs as soon as it is defined. See also the chapter about functions for more information. |
| 199 | +> |
| 200 | +> Source: [MDN - async function expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/async_function) |
| 201 | +
|
| 202 | +##### Syntax |
| 203 | + |
| 204 | +```javascript |
| 205 | +async function [name]([param1[, param2[, ..., paramN]]]) { |
| 206 | + statements |
| 207 | +} |
| 208 | +``` |
| 209 | + |
| 210 | +#### Async Function constructor |
| 211 | + |
| 212 | +> async function objects created with the AsyncFunction constructor are parsed when the function is created. This is less efficient than declaring an async function with an async function expression and calling it within your code, because such functions are parsed with the rest of the code. |
| 213 | +> |
| 214 | +All arguments passed to the function are treated as the names of the identifiers of the parameters in the function to be created, in the order in which they are passed. |
| 215 | +> |
| 216 | +Invoking the AsyncFunction constructor as a function (without using the new operator) has the same effect as invoking it as a constructor. |
| 217 | +> |
| 218 | +> Source: [MDN - AsyncFunction constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction) |
| 219 | +
|
| 220 | +##### Syntax |
| 221 | + |
| 222 | +Note that AsyncFunction is not a global object. It could be obtained by evaluating the following code. |
| 223 | + |
| 224 | +```javascript |
| 225 | +var AsyncFunction = Object.getPrototypeOf(async function(){}).constructor |
| 226 | + |
| 227 | +new AsyncFunction([arg1[, arg2[, ...argN]],] functionBody); |
| 228 | +``` |
| 229 | + |
| 230 | +#### Await |
| 231 | + |
| 232 | +> The `await` expression causes `async` function execution to pause until a `Promise` is settled, that is fulfilled or rejected, and to resume execution of the async function after fulfillment. When resumed, the value of the `await` expression is that of the fulfilled `Promise`. |
| 233 | +> |
| 234 | +> If the `Promise` is rejected, the `await` expression throws the rejected value. |
| 235 | +> |
| 236 | +> If the value of the expression following the `await` operator is not a `Promise`, it's converted to a [resolved Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve). |
| 237 | +> |
| 238 | +> An await can split execution flow, allowing the caller of the `await`'s function to resume execution before the deferred continuation of the `await`'s function. After the `await` defers the continuation of its function, if this is the first await executed by the function, immediate execution also continues by returning to the function's caller a pending `Promise` for the completion of the `await`'s function and resuming execution of that caller. |
| 239 | +> |
| 240 | +> Source: [MDN - await operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) |
| 241 | +
|
| 242 | +##### Syntax |
| 243 | + |
| 244 | +```javascript |
| 245 | +[rv] = await expression; |
| 246 | +``` |
160 | 247 |
|
161 | 248 | ---
|
162 | 249 |
|
|
0 commit comments