## Async Notes
### Callbacks
- Problem: Callback hell: nesting functions within functions within functions, etc.
### Promises
- A promise is a background activity that will be completed at some point in the future
- A promise represents a value that doesn't yet exist but may be available later.
- The most common use for promises is requesting data using an HTTP request
- Try to fix the nesting problem of callbacks
- Your function must return a Promise object
- Use .then() to accept a function that will be invoked when the callback is used
- Can use .then() in multiples, creating a Promise chain
- Overal result: prevents nesting, but can still look messy
- 3 states for a Promise: fulfilled, rejected, pending
### Async/Await (formally called async functions)
- Introduced in ES2017
- A long anticipated JavaScript feature that makes working with asynchronous functions much more enjoyable and easier to understand.
- JavaScript provides two keywords—async and await—that support asynchronous operations without having
to work directly with promises.
- These keywords are just a convenience to simplify working with asynchronous code so that you
don’t have to use the then method.
- Built on top of Promises; basically syntactic sugar for Promises
- Still uses Promises under the hood; does not make Promises obsolete
- Use the "async" keyword before your otherwise regular wrapper function
- You MUST use a wrapper function
- Makes your async code look sync/procedural, thus easier to read/understand
### Observables (RxJS)
## Links
- https://medium.com/front-end-hacking/callbacks-promises-and-async-await-ad4756e01d90
- https://tutorialzine.com/2017/07/javascript-async-await-explained
## Async/Awat Example
The `async` keyword tells JavaScript that this function relies on functionality that requires a promise.
The `await` keyword is used when calling a function that returns a promise and has the effect of assigning the result provided to the Promise object’s callback and then executing the statements that follow.
```
async function doTask(){
await doAsyncThing1()
await doAsyncThing2()
}
```
doTask()