Skip to content
self-assignuser-inputlocal storage
XML was popular back then, but now we have JSONXML structure data to transfer, just like JSONSync JSON objects in local storage
listening event: readystatechangerequest complete = 4unsent = 0request open / initialize = 1request sent in progress = 2downloading response = 3request success = 200other failed, pending code... (học rồi mà chưa note)
Cũng chưa note lại một số open API để thực tập
YOU DONT KNOW HOW LONG YOU WOULD WAIT
resolve == datareject == errornew Promise == define callback functionmyPromise.then() == execute a callback function
too many error duplicatestoo deep nested codes
but no worry about readystatechangewe don’t have to worry about IF it is completedwe just need to check how it is succeeded (404 or 400 or 200)
A Promise that resolve to a return valuewhich can be used with .then() and catch(error)but we have to CHAIN promise to convert into object
just like Fetch, but in general concept of a FunctionA Promise that resolve to a return valueA Promise that reject to a throw new error
youhoc
- Pages
Async
Previously we get data from:
XMLHttpRequest
Use XMLHttpRequest() to get data from HTTP
Read more about XMLHttpRequest
Add Event Listener
Free open API
Callback Abstraction
How do we get return data from Ajax before the page finished loading?
When we make a normal XMLHttpRequest(), it would run synchronously (in top to down order)...
But if we put the XMLHttpRequest() in a function, and return a value, then use that value in the lower code, it would NOT WORK, because JS run asynchronously as default.
The time it takes for the XMLHttpRequest() to return data, would be too slow, during that the lower code would have finished executing...
Even if you return data with the right scope, it would not work...
A CALLBACK FUNCTION IS A FUNCTION WILL BE CALL IN ANOTHER FUNCTION...
For example, we add a function after a click event in addEventListener function...
We will apply this callback function abstraction to solve the asynchronous issue...
BUT, what if we want to do it synchronously with function, how do we do it?
NOTE: DON’T WAIT FOR SOMETHING TO FINISH BEFORE RUNNING OTHER THINGS
Promise API
callback == promise
A better way to structure async code
Pass params into Promise using Closures
Promises Chaining
Instead of...
We use promise chanining...
Fetch API
fetch == XMLHttpRequest
Fetch will return a Promise
User Fetch with Chaining and Arrow Function for optimal data fetching
Async / Await
async == Fetch in General Function
Async is used for FUNCTION
Async function always return a Promise..
await == .then() chaining in Promise
No more then() multiple times. We can just assign Promise to var using await.
What come after await must be a Promise object
Or in a simple term:
BEST PRACTICE
Tóm tắt:
Đọc thêm từ MDN JS
Async Fetch at Client side
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.