ASYNCHRONOUS
NETWORKING Concurrency & JS
• Client-Server Model + AJAX
Copyright By PowCoder代写 加微信 powcoder
• Concurrency & JS
• NetworkingwithXMLHttpRequest()
• Networking with Promises & fetch()
• Networking with async/await & fetch()
RECAP Servers
Latest News API Super cool cats API
AJAX gives us the framework to design this solution. But how can this be done in Javascript specifically?
Before answering that, need to define what asynchronous means
Synchronous Programming
• Program executes top-down
• Guaranteed that previous instructions fully complete before executing the next ones
• Very simple to reason about
CONCURRENCY 101
Asynchronous Programming
• Program has multiple flows of control (called “threads”)
• Threads can interleave or run at the same time
• Much harder to reason about
Image credit: Medium
CONCURRENCY 101 (CONT.)
• Synchronous
• ProcessAexecutesfirst
• WaitsforProcessBtofinish • Thencontinues
• Asynchronous
• Processexecutesfirst
• AsksProcessBtodoitswork
• WhilstProcessBisexecuting,ProcessAalso continues
• Atsomepointinthefuture,ProcessAgets Process B’s result
Image Credit: 4D
CONCURRENCY MODELS
• Two primary “models” of concurrency:
• Pre-emptive multitasking
• Co-operative multitasking
• Pre-emptive Multitasking:
• Code runs in parallel on different CPU cores
• Really good for CPU-intensive workloads
• Not important to us here
• Co-operative Multitasking:
• Tasks that need to be done are queued up and executed in a
• Really good for IO-intensive workloads
• Get the benefits of asynchronous programming with the reasonability of synchronous programming
• Javascript’s model is Co-operative Multitasking:
• Tasks that need to be done are “events”
• Event-handlers are scheduled to execute by the event loop
• Each event handler runs synchronously
Event Emitters
JAVASCRIPT’S EVENT LOOP
Event Queue
Event Loop
Event Handler (callbacks)
Each JS Engine generally follows this procedure:
1. ExecuteyourJSscripttop-down,registeringanyhandlers Browsershandle:
2. Wait for events in a loop
3. If an event comes and there is a handler for it, execute
the handler to completion 4. Repeat(2)adinfinitum
– Counting down timers
– Networking
– Adding to the event queue
Important:
EVENT LOOP DEMO
See examples/event-loop
Handler called
Handler ends
• Long-runningeventhandlersblockeverything else
• Makesthepageunresponsive • Tips on avoiding blocking:
• Makesureallnetworkingisdone asynchronously
• CPU-intensivecalculationsshouldbepushed to a backend server to process
EVENT LOOP CONSIDERATIONS • The event loop runs on a single thread
Period where nothing else can run
BLOCKING THE LOOP DEMO
See examples/blocking-the-loop
PROGRESSING Servers
We know now that JS has an event loop we can use to asynchronously execute tasks/events
But we still don’t know what event to use to do networking!
The first of 3 approaches is the focus of next lecture
Latest News API Super cool cats API
• A brief introduction to concurrency
• How concurrency is done in Javascript
• Coming Up Next:
• NetworkingwithXMLHttpRequest()
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com