Asynchronous JavaScript #1 - What is Asynchronous JavaScript?

you know something guys welcome to asynchronous JavaScript and lesson 100 kala so what the hell is asynchronous JavaScript well asynchronous JavaScript is absolutely everywhere on the web and if you write JavaScript a fair amount then chances are you've written some asynchronous code at some point to fetch some data or something but there may be not known that it was asynchronous at the time so in a very very small nutshell asynchronous code can start something now and then finish it later that's what it's all about so say for example we used an API such as the YouTube API right and we use that to go out and grab some data but then instead of blocking the code and waiting for that API to respond what asynchronous JavaScript does is allow the code to carry on until that API responds and then when it does then we can do something with the data and this is in stark contrast to synchronous JavaScript so let's just take a little look at that first of all so the JavaScript code that you write runs on a single thread which means it can only do one thing at a time okay and synchronous code waits for one action to complete before moving on to the next so I've just done a little code example right down here which is synchronous right and it's going to use an API which has a function called read sync and this is going to go out read some data but it's going to do that synchronously so it's not going to wait for some kind of callback function it's going to wait until this completes and then move on to the next thing because remember synchronous code waits for one actions complete before moving on to the next right so it's going to go out read this wait for it's complete then it's going to log that to the console then it's going to go out to this it's going to read this one synchronously and then it's going to log that to the console and you might be thinking well yeah this is fine it's just moving through things one at a time however what happens if this file is extremely large okay and it takes about ten seconds to read it then what you're doing is you're blocking up your code or right here it's not moving anywhere until this is fully read so we have to hang and for 10 seconds before any of the other JavaScript is fired okay now that's not great so that's why we use asynchronous code to kind of combat this so this is an asynchronous version of doing the same thing okay this time we're using an API with a function called read async and this is going to go and grab something asynchronously so what this is doing is going to perform some kind of request whereby it's going to say okay well I'm going to pass this on to a separate thread and you're going to go out and get that data right and then I'm just going to carry on my thread through the code and carry on to the next function and then when the other thread which goes out and grabs this returns with the data then we can fire this callback function which is going to log it to the article so no longer are we waiting in line for this to be fully read before we move on to the next one okay what we're doing is passing this on to a separate thread okay and then the code thread is moving on to the next function but wait a minute I said that JavaScript only runs on one thread and the distinction is this JavaScript that you write only runs on one thread but then requests such as this are handing off to a separate thread which runs outside of JavaScript so that frees up then the JavaScript thread to move on to other things so let's have a look at this in a kind of diagram which better explains it so this is an asynchronous version of the thread and the queue of functions so say we have some code and we've got a lot of functions in it and each one of these things on the queue is a function okay so JavaScript makes this queue when it first reads your file and it goes through these functions one at a time so it fires the first one completes that moves on to the second one now right here we have an asynchronous quick request and what happens is it passes that request onto a separate thread outside of JavaScript which goes and grab some data but in the meantime on the JavaScript code thread it can move on to the next function and carry on and carry on and carry on and carry on and carry on and when this data is retrieved the callback function from this request is added onto the end of the thread or the end of the queue and then when the rest of the functions are fired then it can fight this callback function with the data is retrieved so that's a nice way of doing things whereas the synchronous way would be like this in Phase ups gone back a slide there fires the first function then it fires the second one which is asynchronous with request this time and it waits until that file is completely read and it's brought back to the JavaScript so then it's delaying the rest of this code it's blocking it right here this might take 10 seconds or something then when it has that code it fires the function it needs to do and move on to the rest ok so this is clearly a better way to do it and this is just one way to control the flow of this asynchronous request the art or the ways right and we're going to look at these ways in this tutorial series so the first way which are just shows briefly is a callback way yeah this is good but it can get messy we're going to take a look at those in probably the next tutorial or a couple of tutorials time promises are a better way to do things and we're going to take a look at those too and then generators are a new addition to every script 6 which are really awesome when it comes to asynchronous JavaScript so we're going to take a look at those as well so there we go guys that is your brief introduction as to what asynchronous code is all about if you have any questions feel free to leave those down below otherwise I am going to see you in the various tutorial

Channel: The Net Ninja

Views: 129,498

Keywords: asynchronous javascript, asynchronous javascript and xml, javascript asynchronous code, asynchronous javascript tutorial, ajax tutorial, ajax, ajax tutorial for beginners, asynchronous vs synchronous javascript, ajax tutorials, introduction to ajax, ajax introduction, what is ajax, what is asynchronous javascript

Id: YxWMxJONp7E

Length: 5min 46sec (346 seconds)

Published: Sat Apr 30 2016