Learn asynchronous programming in nodejs in one article

Table of Contents Introduction Synchronous Asynchronous and Blocking Non-blocking Callbacks in JavaScript Error handling of callback functions Callback hell Promise in ES6 What is Promise Features of Promise Advantages of Promise Disadvantages of Promise Usage of Promise Execution order of Promise Execution order of async and await async Summary of features of async

Introduction

Because JavaScript is single-threaded by default, which means that the code cannot create new threads to execute in parallel. However, for the JavaScript that first ran in the browser, the single-threaded synchronous execution environment obviously could not meet the needs of user-responsive functions such as page clicks and mouse movements. So the browser implemented a set of APIs that allow JavaScript to respond asynchronously to page request events in a callback manner.

Furthermore, NodeJS introduced non-blocking I/O, thus extending the concept of asynchrony to file access, network calls, etc.

Today, we will take an in-depth look at the advantages, disadvantages and development trends of various asynchronous programming.

Synchronous, asynchronous, blocking, non-blocking

Before discussing asynchronous programming of nodejs, let's discuss a concept that is more easily confused, that is, synchronous, asynchronous, blocking and non-blocking.

The so-called blocking and non-blocking refers to whether a process or thread needs to wait when performing operations or reading and writing data, and whether other operations can be performed during the waiting process.

If waiting is required, and the thread or process cannot perform other operations during the waiting process and can only wait stupidly, then we say that this operation is blocked.

On the contrary, if a process or thread can perform other operations while performing an operation or reading and writing data, then we say that the operation is non-blocking.

Synchronous and asynchronous refer to the way of accessing data. Synchronous means that data needs to be actively read, and this reading process may be blocking or non-blocking. Asynchronous means that there is no need to actively read data, it is a passive notification.

Obviously, the callback in JavaScript is a passive notification, which we can call an asynchronous call.

Callbacks in javascript

Callbacks in JavaScript are a very typical example of asynchronous programming:

document.getElementById('button').addEventListener('click', () => {
 console.log('button clicked!');
})

In the above code, we added a click event listener to the button. If a click event is listened to, the callback function will be triggered to output the corresponding information.

The callback function is just a normal function, except that it is passed as a parameter to addEventListener and is called only when the event is triggered.

The setTimeout and setInterval we talked about in the previous article are actually asynchronous callback functions.

Error handling in callback functions

How to handle callback error information in nodejs? Nodejs uses a very clever method. In Nodejs, the first parameter in any callback function is the error object. We can perform corresponding error handling by judging whether this error object exists or not.

fs.readFile('/文件.json', (err, data) => {
 if (err !== null) {
 //Handle error console.log(err)
 return
 }

 // If there is no error, process the data.
 console.log(data)
})

Callback Hell

Although JavaScript callback is excellent, it effectively solves the problem of synchronous processing. But unfortunately, if we need to rely on the return value of the callback function to perform the next step, we will fall into this callback hell.

Calling it callback hell is a bit exaggerated, but it also reflects the problems of callback functions from one aspect.

fs.readFile('/a.json', (err, data) => {
 if (err !== null) {
 fs.readFile('/b.json',(err,data) => {
  //callback inside callback
 })
 }
})

How to solve it?

Don’t be afraid that ES6 introduced Promise, and ES2017 introduced Async/Await, which can solve this problem.

Promises in ES6

What is a Promise?

Promise is a solution for asynchronous programming, which is more reasonable and powerful than the traditional solution of "callback functions and events".

The so-called Promise is simply a container that stores the result of an event that will end in the future (usually an asynchronous operation).

Syntactically, a Promise is an object from which you can get messages about asynchronous operations.

Features of Promise

Promise has two characteristics:

The state of the object is not affected by the outside world.

The Promise object represents an asynchronous operation and has three states: Pending (in progress), Resolved (completed, also known as Fulfilled), and Rejected (failed).

Only the result of the asynchronous operation can determine the current state, and any other operation cannot change this state.

Once the state changes, it will not change again, and the result can be obtained at any time.

There are only two possibilities for the state of a Promise object to change: from Pending to Resolved and from Pending to Rejected.

This is completely different from an event. The characteristic of an event is that if you miss it and then listen to it, you will not get any results.

Advantages of Promises

Promise expresses asynchronous operations in the form of synchronous operations, avoiding nested callback functions.

The Promise object provides a unified interface that makes it easier to control asynchronous operations.

Disadvantages of Promises

1. Promise cannot be canceled. Once created, it will be executed immediately and cannot be canceled midway.
2. If the callback function is not set, the error thrown inside Promise will not be reflected externally.
3. When in the Pending state, you cannot know what stage the project is currently in (just started or about to be completed).

Promise usage

The Promise object is a constructor that generates a Promise instance:

var promise = new Promise(function(resolve, reject) { 
// ... some code 
if (/* asynchronous operation successful*/){ 
resolve(value); 
} else { reject(error); } 
}
);

Promise can be connected to the then operation, and the then operation can be connected to two function parameters. The first function parameter is the resolved value when constructing the Promise, and the second function parameter is the error of rejecting the Promise.

promise.then(function(value) { 
// success 
}, function(error) { 
// failure }
);

Let's look at a specific example:

function timeout(ms){
 return new Promise(((resolve, reject) => {
  setTimeout(resolve,ms,'done');
 }))
}

timeout(100).then(value => console.log(value));

A setTimeout method is called in Promise, which triggers the resolve method at a fixed time and passes in the parameter done.

Finally, the program outputs done.

Promise execution order

Once a Promise is created, it will be executed immediately. However, the method in Promise.then will wait until a calling cycle has passed before calling again. Let's look at the following example:

let promise = new Promise(((resolve, reject) => {
 console.log('Step1');
 resolve();
}));

promise.then(() => {
 console.log('Step3');
});

console.log('Step2');

Output:
Step 1
Step 2
Step 3

async and await

Promises are great, of course, we convert callback hell into chain calls. We use then to connect multiple Promises, and the result of the previous promise resolve is the parameter of then in the next promise.

What are the disadvantages of chain calls?

For example, if we resolve a value from a promise, we need to perform some business logic processing based on this value.

If this business logic is very long, we need to write a long business logic code in the next then. This makes our code look very redundant.

So is there any way to directly return the result of resolve in promise?

The answer is await.

When a promise is preceded by await, the calling code will stop until the promise is resolved or rejected.

Note that await must be placed in an async function. Let's look at an example of async and await:

const logAsync = () => {
 return new Promise(resolve => {
 setTimeout(() => resolve('Xiao Ma Ge'), 5000)
 })
}

Above we defined a logAsync function, which returns a Promise. Because the Promise uses setTimeout to resolve, we can regard it as asynchronous.

To use await to get the value of resolve, we need to put it in an async function:

const doSomething = async () => {
 const resolveValue = await logAsync();
 console.log(resolveValue);
}

Async execution order

Await actually waits for the resolution result of promise. Let's combine the above examples:

const logAsync = () => {
 return new Promise(resolve => {
  setTimeout(() => resolve('Xiao Ma Ge'), 1000)
 })
}

const doSomething = async () => {
 const resolveValue = await logAsync();
 console.log(resolveValue);
}

console.log('before')
doSomething();
console.log('after')

The above example outputs:

before
after
Little Ma

As you can see, aysnc is executed asynchronously and its sequence is after the current cycle.

Features of async

Async will turn all subsequent functions into Promises, even if the subsequent functions do not explicitly return Promises.

const asyncReturn = async () => {
 return 'async return'
}

asyncReturn().then(console.log)

Because only Promise can be followed by then, we can see that async encapsulates a normal function into a Promise:

const asyncReturn = async () => {
 return Promise.resolve('async return')
}

asyncReturn().then(console.log)

Summarize

Promise avoids callback hell by rewriting callback inside callback into a chain call of then.

But chain calls are not convenient for reading and debugging. So async and await appeared.

Async and await change chain calls into a syntax similar to the sequential execution of programs, making it easier to understand and debug.

Let's look at a comparison, first look at the use of Promise:

const getUserInfo = () => {
 return fetch('/users.json') // Get user list.then(response => response.json()) // Parse JSON
 .then(users => users[0]) // Select the first user.then(user => fetch(`/users/${user.name}`)) // Get user data.then(userResponse => userResponse.json()) // Parse JSON
}

getUserInfo()

Rewrite it with async and await:

const getUserInfo = async () => {
 const response = await fetch('/users.json') // Get user list const users = await response.json() // Parse JSON
 const user = users[0] // Select the first user const userResponse = await fetch(`/users/${user.name}`) // Get user data const userData = await userResponse.json() // Parse JSON
 return userData
}

getUserInfo()

You can see that the business logic becomes clearer. At the same time, we get a lot of intermediate values, which makes it easier for us to debug.

This is the end of this article about in-depth understanding of asynchronous programming in nodejs. For more relevant nodejs asynchronous programming content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!