[comment]: # "markdown: { smartypants: true }" ## Promises <small>This Presentation, on YouTube: <br> <a href="https://youtu.be/xkc2ejOpStw">https://youtu.be/xkc2ejOpStw</a></small> <small><a href="https://beyondcodebootcamp.github.io/presos/js-promises/">https://beyondcodebootcamp.github.io/presos/js-promises/</a></small>

Helpful links: - [Promise.\_map(arr)](https://github.com/coolaj86/AJScript/issues/14) - sequential execution - [Promise.\_parallel(arr)](https://github.com/coolaj86/AJScript/issues/9) - batch execution - [Crock on JS: Function the Ultimate](https://youtu.be/ya4UHuXNygM?list=PLxki0D-ilnqbtvVf7xKP0gmIgp5UPS9hu&t=2564)

AJ ONeal <br> [@\_beyondcode](https://twitter.com/@_beyondcode) <br> [twitch.tv/coolaj86](https://twitch.tv/coolaj86)

Dangerous Wrong Thinker Equal Opportunity Offender Technophobic Technologist Extraordinairé

Utah Node.js Utah Rust twitch.tv/coolaj86

<img title="JavaScript: community logo" src="https://raw.githubusercontent.com/voodootikigod/logo.js/master/js.png" width="60%" /> https://github.com/voodootikigod/logo.js/

<img title="node.js: official logo" src="https://nodejs.org/static/images/logos/nodejs-new-pantone-black.svg" width="60%" /> https://nodejs.org/en/about/resources/

- Anatomy - Why? - Usage - Creation - Gotchas

**What's a Promise?**

```js [1] let promise = {}; ```

```js [1] let promise = {}; ``` A promise is an object

```js [2] let promise = { _callbacks: [], }; ```

```js [2] let promise = { _callbacks: [], }; ``` with an array for success handlers <br> (callback functions)

```js [4-6] let promise = { _callbacks: [], then: function (fn) { promise._callbacks.push(fn); }, }; ```

```js [4-6] let promise = { _callbacks: [], then: function (fn) { promise._callbacks.push(fn); }, }; ``` and a `then` function. <br> <small>just a fancy `arr.push()`</small>

```js [3] let promise = { _callbacks: [], _errbacks: [], then: function (fn) { promise._callbacks.push(fn); }, }; ``` It also has an array for error handlers (errbacks)

```js [8-10] let promise = { _callbacks: [], _errbacks: [], then: function (fn) { promise._callbacks.push(fn); }, catch: function (fn) { promise._errbacks.push(fn); }, }; ```

```js [8-10] let promise = { _callbacks: [], _errbacks: [], then: function (fn) { promise._callbacks.push(fn); }, catch: function (fn) { promise._errbacks.push(fn); }, }; ``` and a `catch()` <br> <small>another fancy `arr.push()` function</small>

```js [7-11] let promise = { _callbacks: [], _errbacks: [], // ... resolve: function (result) { promise._callbacks.forEach(function (fn) { fn(result); }); }, }; ```

```js [7-11] let promise = { _callbacks: [], _errbacks: [], // ... resolve: function (result) { promise._callbacks.forEach(function (fn) { fn(result); }); }, }; ``` The `resolve` function <br> <small>which calls the success handlers</small>

```js [12-16] let promise = { _callbacks: [], _errbacks: [], // ... resolve: function (result) { promise._callbacks.forEach(function (fn) { fn(result); }); }, reject: function (err) { promise._errbacks.forEach(function (fn) { fn(err); }); }, }; ```

```js [12-16] let promise = { _callbacks: [], _errbacks: [], // ... resolve: function (result) { promise._callbacks.forEach(function (fn) { fn(result); }); }, reject: function (err) { promise._errbacks.forEach(function (fn) { fn(err); }); }, }; ``` And the `reject` function <br> <small>which calls the success handlers</small>

## Why?

When you want to handle an event ONE _TIME_: ```js document.addEventListener("click", handleClick); function handleClick() { // ... document.removeEventListener("click", handleClick); } ```

When you want to handle an event in MANY _PLACES_: ```js function doFoo() { // ... document.addEventListener("click", handleClick); } function doBar() { // ... document.addEventListener("click", handleClick); } ```

When you want to handle an event LATE: ```js // click happens... NOW function doFoo() { // ... document.addEventListener("click", handleClick); } // doFoo happens LATE doFoo(); ```

## Usage

Available in JavaScript since 1997

```js promise.then(function (result) { // do stuff }); ```

```js promise.catch(function (err) { if ("NOT_FOUND" === err.code) { return Foo.create(); } throw err; }); ```

```js promise .catch(function (err) { if ("NOT_FOUND" === err.code) { return Foo.create(); } throw err; }) .then(function (result) { // do stuff }); ```

## Creation

🔙 that thing back there

Or, since 2015: ```js async function getUsers() { return []; } ```

Or, since 2015: ```js async function getUsers() { return []; } ``` ```js getUsers().then(function (users) { // ... }); ```

Or, since 2015: ```js async function getUsers() { return []; } ``` ```js getUsers().then(function (users) { // ... }); ``` ```js let users = await getUsers(); ```

# Gotchas

Always `return await`. ```js async function getUsers() { return await DB.Users.all(); } ```

Always `await .catch()`. ```js let user = Users.getOrCreate(email).catch(function (err) { if ("NOT_FOUND" === err.code) { return Foo.create(); } throw err; }); ```

## FIN