ASYNCHRONOUS
NETWORKING Networking with async/await & fetch()
• Client-Server Model + AJAX
Copyright By PowCoder代写 加微信 powcoder
• Concurrency & JS
• NetworkingwithXMLHttpRequest()
• Networking with Promises & fetch()
• Networking with async/await & fetch()
RECAP Servers
We’ve built up a nice asynchronous framework with callbacks, then Promises.
Both have a similar problem: code written does not look like the functions we are used to.
That’s where async/await come in
Latest News API Super cool cats API
ASYNC/AWAIT
• Keywords introduced in ES2017
• Supported by virtually all browsers
• So-called “coroutines” i.e. resumable
• Built on top of Promises
• asyncfunctionsalwaysreturnaPromise
• awaitexpressionsalwaysunwraparesolved
• Rejections are thrown as exceptions
• Program asynchronous code in a familiar and intuitive way again
Image Credit:
N.B. It is as-if this is what happens. This is not real code.
UNDER THE HOOD AN INTUITIVE UNDERSTANDING
• Non-promise values/thenables are awaitable like promises
• valwayswrappedintoaPromise
• This Promise then chained with injected logic to resume the function at the point where await was used
• JS runtime suspends execution of the function whilst returning a Promise to the caller that represents the suspended function’s eventual result
• The returned Promise resolves once the suspended function is resumed and reaches the end of its body
ERROR-HANDLING REVISITED
• async/awaitfunctionsalways maintain their function scope
• Errors and rejections handled by try/catch again
• Careful:
• await’ingaPromisewillcause
an exception
• asyncfunctionscalled
synchronously will still return a pending Promise
ASYNC/AWAIT FETCH DEMO
See examples/asyncawait-fetch
• Can pass around and attach different handlers
• Maintains a stack trace so takes more memory
• Supported more on older browsers
PROMISES OR ASYNC/AWAIT?
async/await
• Easier to read
• Potentially harder to debug
• Debuggerswilljumparoundsource code
• More performant in some cases • More familiar
Ultimately, which to use comes down to your specific needs / environment / targets, etc.
FINALLY! Servers
We’ve finally built enough understanding to make an educated decision about how to do asynchronous networking in JS!
Latest News API Super cool cats API
• async/await
• Usingasync/awaitwithfetch()
• Asynchronous networking with Javascript accomplished by: • XMLHttpRequest (legacy)
• fetch() and Promises
• fetch() and async/await
• AJAX technologies continue to evolve • But the fundamentals rarely change
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com