On Your Own
With someone next to you, take turns discussing what you just read.
With Your Partner
Create a diagram similar to the article to demonstrate what happens when we use
fetch. How does
fetch fit in with the code above and below it?
Call Stack and Event Loop
Let’s take a look at snippets of this video that has some great visualizations for the call stack, event loop, and queue.
- 4:15-6:00 (call stack with synchronous functions)
- 6:40 (stack overflow example)
- 7:20-8:50 (imagine if
fetchwere synchronous - we would have to wait for each request to complete before moving on)
- 10:23-11:46 (asynchronous callbacks -
setTimeout, what happens to the
setTimouton the stack?)
- 11:47-14:50 (intro to the event loop)
After this point, the talk is good but gets into a lot of detail.
Check for Understanding
Let’s take this event loop example with
setTimeout and translate it to what we have seen with
fetch and promises. Note that the event loop will wait until the call stack is empty to run the
.then from a fetch call.