Await, Promises & Promise Methods
Tags: javascript, await, http, promises
Published: 2019-11-05 04:15:12

tl;dr finished up talking about await and execution blocking. 
Went over why `Promise` is still valuable and powerful even if not using 
`.then()`

#Await 
So a caveat to `await`, it's technically limited to working inside `async` functions. This is by design, there are workarounds but stick with the enforced practice at first; in the end, coding is about experimenting and breaking/making things 😆

### Pausing Execution
So the keyword `await` pauses execution of `async` function until the Promise is settled... In other words, until something returns from 
`const data = await APICall()` and `data` variable now contains the returned value of the resolved Promise. If the Promise rejects, an exception is thrown. Though `await` alone doesn't gracefully handle errors we can make error boundaries, I prefer to use `try/catch` blocks.

### Parallel 
This is accomplished with `Promise.all([call1, call2])` 
Though we talked a little on the ability to resolve multiple asynchronous calls I'll go over it again. So rather than waiting for each one to resolve after the last. This in turns takes away the more synchronous-like behavior observed with the execution blocking with `await` alone. Neither is better than the other, but have their benefits and drawbacks for various use cases.

#### Examples
```javascript
// Pausing Execution - numbers indicate milliseconds for data to return
async function somethingMakingApiCall() { 
 const dataFirst = await callFirst(10) // pause 10ms
 const dataSec = await callSec(1) // pause 1ms
 const dataThird = await callThird(5) // pause 5ms

// 16ms later reaches this return with resolved data.
return [dataFirst, dataSec, dataThird]
}
// The order of data returned is irrelevant, // execution order is the same. 
console.log(somethingMakingApiCall()) // [ 10ms, 1ms, 5ms ]

// Parallel -- What's the benefit?
async function somethingMakingApiCall() { 
// All calls are executing in Promise.all() so no pause for each occurs.
const [ first, sec, third ] = await Promise.all([ callFirst(10), callSec(10), callThird(10) ])

// 10ms later the function execution
// reaches return with resolved data.
return [ first, sec, third ];
}

console.log(somethingMakingApiCall()) // 10ms, 10ms, 10ms
```

# Promises
I have already mentioned `Promise.all()` in this and the previous article. so I will briefly mention `fail-fast` if the `call first(10)` had rejected then the whole thing immediately breaks out and throws that rejection. This can be a gotcha or a powerful feature depending on the situation. An example could be, 2nd & 3rd call rely on 1st call succeeding, so if it rejects no need to waste time with two more calls 😁
 ## Promise API
So there are plenty of Promise methods which [you can find on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#) 

**Noteworthy ones with async/await in my opinion:**

- **Promise.all()**
"On some computers, they may be executed in parallel, or in some sense concurrently, while on others they may be executed serially. For this reason, there must be no dependency in any Promise on the order of execution of the Promises." - [MDN related article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) 
 *I have mentioned previously its quasi concurrency/parallelism this excerpt describes the reason why very well.*

- **Promise.race()**
"...method returns a promise that fulfills or rejects as soon as one of the promises in an iterable fulfills or rejects, with the value or reason from that promise." - [MDN related article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/race)

- **Promise.any() <experimental>**
"takes an iterable of Promise objects and, as soon as one of the promises in the iterable fulfills, returns a single promise that resolves with the value from that promise." - [MDN related article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/any)