mirror of
https://github.com/xfarrow/javascript-tutorials.git
synced 2025-05-04 12:08:44 +02:00
update
This commit is contained in:
parent
fa46b1fce5
commit
1d295d1fc9
async-await
41
async-await/async-javascript.md
Normal file
41
async-await/async-javascript.md
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
# Asynchronous JavaScript
|
||||||
|
|
||||||
|
JavaScript is single-threaded but it can still take advantage of asynchronous
|
||||||
|
programming.
|
||||||
|
|
||||||
|
When we say JavaScript is single-threaded, we mean that we cannot write
|
||||||
|
multithread code without using JavaScript APIs. In fact,
|
||||||
|
despite for us it appears single-threaded, it takes advantage of the
|
||||||
|
`libuv` library, allowing the engine to be effectively multithread.
|
||||||
|
|
||||||
|
In order to do that, JavaScript uses
|
||||||
|
* The libuv APIs which allow multithreading
|
||||||
|
* The Event Loop Queue
|
||||||
|
|
||||||
|
## Explaination
|
||||||
|
JavaScript provides a set of APIs, including `setTimeout` and `fetch`, which
|
||||||
|
are offloaded to the libuv library when called. The libuv library handles the
|
||||||
|
underlying operations, such as timer management and HTTP requests, respectively.
|
||||||
|
Both setTimeout and fetch have associated functions, known as callbacks, that
|
||||||
|
are executed once the operation has completed.
|
||||||
|
|
||||||
|
Since the engine cannot directly push these callback functions onto the call stack
|
||||||
|
without disrupting the current flow of execution, it instead places them in a
|
||||||
|
queue called the "Event Loop Queue". When the call stack is empty, the engine
|
||||||
|
checks the queue and, if there are any pending callbacks, proceeds to execute them.
|
||||||
|
|
||||||
|
**Example**
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
setTimeout(() => console.log('I will go in the event loop queue first'), 1000);
|
||||||
|
console.log('I am in the stack');
|
||||||
|
```
|
||||||
|
|
||||||
|
What is happening here? `setTimeout` is a JavaScript API which will be taken care
|
||||||
|
of the `libuv` library which will be responsible for checking when 1000ms have passed.
|
||||||
|
**Concurrently** to the `libuv` library doing what it has to do, the engine executes
|
||||||
|
`console.log('I am in the stack');`.
|
||||||
|
When 1000ms have elapsed, the callback function associated with the timer (console.log)
|
||||||
|
gets enqueued in the Queue.
|
||||||
|
Since there is nothing to do in the stack, the callback pushes the callback onto the
|
||||||
|
stack and executes it.
|
@ -1,30 +0,0 @@
|
|||||||
# The Event Loop
|
|
||||||
|
|
||||||
JavaScript is single-threaded but it can still take advantage of asynchronous
|
|
||||||
programming.
|
|
||||||
|
|
||||||
In order to do that, the runtime keeps a structure called The Event Loop which
|
|
||||||
is responsible for holding operations to be executed asynchronously with
|
|
||||||
respect to the main flow of execution. Whenever we meet a portion of code that
|
|
||||||
may not be possible to execute now, it is put in the Event Loop. Let's look at
|
|
||||||
some examples:
|
|
||||||
|
|
||||||
**Example 1**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
setTimeout(() => console.log('test'), 1000);
|
|
||||||
```
|
|
||||||
`console.log('test')` will be put in the Event Loop.
|
|
||||||
|
|
||||||
**Example 2**
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
const promise = new Promise(function (resolve, reject) {
|
|
||||||
console.log('test');
|
|
||||||
resolve();
|
|
||||||
}).then(() => {
|
|
||||||
console.log('test2');
|
|
||||||
});
|
|
||||||
|
|
||||||
```
|
|
||||||
`console.log('test2')` will be put in the Event Loop.
|
|
Loading…
x
Reference in New Issue
Block a user