Intro to Async and Await
ฝัง
- เผยแพร่เมื่อ 28 มิ.ย. 2018
- A new feature added in ES6 was the ability to convert a function into a Promise by adding the keyword async in front of it.
This also allowed us to use the keyword await to pause the function and wait for the result of some Asynchronous code.
Code GIST: gist.github.com/prof3ssorSt3v...
you are brilliant Steve, you make complicated things simple and easy to understand, thank you so much
Your channel is the first place I go whenever I have some difficulty understanding a concept! :)
Most easy to understand async await tutorial I ever learnt. Thank you.
Great tutorial, Steve. Your videos are simple and intuitive, that's my favorite channel to learn new concepts of Javascript, thanks a lot.
Great explanation) Smooth and without hard theory. Thank you, Steve!
You are the best at explaining JS things, Steve. Thank you.
your explanation is always simple & ♥
Very simple explanation. Keep up the good job!
nice one! Just watched 2 vids that were crazy deep lol. This was way easier to understand
Another very cool tutorial!
very nice explanation. You just got a new subscriber. Nice work!
really nice explanation
Great video. One minor correction: `response.json()` converts from JSON (not to JSON).
Yes. Sorry. Misspoke there. It does convert from the JSON string to a JavaScript Object.
But in line 26 you use the data variable that you still don't have ... shouldn't there be the await keyword too? ...
Thanks in advance and BTW, great tutorials ... straight to the point and comprehensive.
Keep on ...
It is declared and assigned on line 24. Lines 23 and 24 both have an await. Your understanding is correct.
Hi Steve. The returned value is 42 anyway or we have to go to PromiseValue [and how]?
Thank you
Steve if possible Please make a tutorial on Reactive programming, covering concepts like observables/subscribers / rxjs etc
Please put requests in the comments here - th-cam.com/video/LCezax2uN3c/w-d-xo.html or look for the request if it is already there and vote for it.
Nice explanation... I have one doubt
1) how we can handle the error logic ? i.e data not available or something else
If you mean handling errors with fetch( ), then you chain the catch( ) method on the end. It captures all errors with fetch.
In general, with await, you can wrap it inside a try { } catch( err ){ }
However, since await is wrapping a Promise around your code, it can also use the catch( ) method.
I talk about some of this here - th-cam.com/video/ycJOZp_wWak/w-d-xo.html
Hi Thanks for the explanation.. Why can't I assign the response of async to a variable.. Let's say I am fetching a JSON object from async and I want to assign it to a variable(outside async func) for future use. Like why do I have to write my code in..then() always.
Using .then( ) is the built-in way of getting the response value. If you want to use async you can get the result that way too.
let myVar = await fetch( url );
myVar will contain the response object from the fetch OR the error object.
@@SteveGriffith-Prof3ssorSt3v3 i think i didnt frame y question correctly..
var v;
let prom = async( some json data );
prom.then( e=> {v = e;}) ...why cant i do this ? i mean not literally in same way but i want to store e (json data) in a variable v for later use..what i see is e is available only in then()
This is one thing that's always confused me somewhat with Asynchronous Operations. . .If Asnc is "non blocking", aren't we doing exactly that using "await"? We're waiting for each of those two lines (23, 24) to finish before moving on (by using await). So, aren;t we blocking doing this Steve?
BTW, I get using await is basicly the same as using "then" in a normal Promise. So, my question refers to both Promise and Asnc/Await.
Yes. Await is a way of turning asynchronous code into synchronous code.
But why is a simple conversion to JSON an async function?
The Response / Body objects have a blob( ), text( ), and json( ) method to extract and convert the appropriate format from the result that came back from the server. Since we have no idea how large that response object is, we don't want to block other operations on the page when we do the conversion. Therefore, we get a Promise object which will EVENTUALLY give us the converted data.
can we say that "await" will pause the , only single thread of JavaScript processing. it stops executing! But then I have seen people using this in Node.js as well , will it not hamper the performance?
The main stack is a single thread. The event loop, (service|web) workers, and async tasks are on another thread. This keeps the performance of the main thread efficient.
@@SteveGriffith-Prof3ssorSt3v3 ok, got it.