Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "what is the asynchronous operation method of javascript", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what is the asynchronous operation method of javascript" article.

The asynchronous operation methods of javascript are: 1, callback function; 2, event listening; 3, "publish / subscribe" mode; 4, promise;5, generator;6, "async/await".

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

What is an asynchronous operation?

The asynchronous mode is not difficult to understand, such as tasks A, B, C, executing B after executing A, but B is a time-consuming task, so put B in the task queue to execute C, and then some of B's Iripple O returns the result, and then executes B. this is an asynchronous operation.

Why does JavaScript need asynchronous operations?

The execution environment of JavaScript language is "single thread". The so-called single thread means that only one task can be completed at a time. If there are multiple tasks that need to be queued, one is completed, and the next one is continued. This way is very simple in terms of implementation, but if a task takes a long time, then the following tasks need to wait in line, which will delay the execution of the whole program. Common browsers do not respond (fake death) because a piece of JavaScript code runs for a long time (such as an endless loop), resulting in the entire page stuck and other tasks can not be performed.

To solve this problem, the JavaScript language divides the execution modes of tasks into two types: synchronous (Synchronous) and asynchronous (Asynchronous).

The order in which synchronous tasks are executed is consistent with the queued order, while asynchrony requires one or more callback functions. After the end of the previous task, instead of executing the next task, the callback function is executed. The latter task is executed until the end of the previous task, so the execution order of the program is not consistent with the order of the tasks, asynchronous.

Asynchronous mode is very important, on the browser side, long-time operations should be performed asynchronously to avoid browser losing response, the best example is ajax operation, on the server side, asynchronous operation is even the only way, because the execution environment is single-threaded, if you allow all http requests to be executed synchronously, the server performance will degrade sharply and will soon lose response.

Several types of asynchronous operations in JavaScript.

The methods of asynchronous programming in JavaScript are:

Callback function

Event monitoring

Publish / subscribe

Promise

Generator (ES6)

Async/await (ES7)

Let me introduce these asynchronous methods respectively:

1. Callback function

Callback function is the most basic method in asynchronous programming. Suppose there are three functions, F1, f2, and f3, which need to wait for the execution result of F1, while f3 is independent and does not need the results of F1 and f2. If we write it synchronously, this is what it looks like:

F1 (); f2 (); f3 ()

If F1 executes quickly, it is fine, but if F1 executes slowly, then f2 and f3 will be blocked and cannot be executed. Such efficiency is very low. But we can rewrite f2 as a callback function of F1, as follows:

Function F1 (callback) {setTimeout (function () {/ / F1 task code callback ();}, 1000);}

So this is the way to execute the code at this time:

F1 (f2); f3 ()

In this way, it is an asynchronous execution, even if F1 is time-consuming, but because it is asynchronous, then f3 () will be executed quickly without being affected by F1 and f2.

Note: what if we write F1 like this?

Function F1 (callback) {/ / F1 task code callback ();}

Then, we can also call:

F1 (f2); f3 ()

Is it still asynchronous at this time? Answer: not asynchronous. The callback function here is not a real callback function. If you do not use the setTimeout containing function, then the execution of f3 () also needs to wait until F1 (f2) is fully executed, which should be noted here. It is only with setTImeout that we can make a real callback function.

II. Event monitoring

Another idea of asynchronism is to adopt event-driven mode. The execution of tasks does not depend on the order of the code, but on whether an event occurs. Let's take F1, f2 and f3 as examples. First, bind an event to F1 (written as jquery here):

F1.on ('done', f2); f3 ()

The meaning here is: when the done event occurs in F1, execute f2, and then we rewrite F1:

Function F1 () {setTimeout (function () {/ / F1 task code f1.trigger ('done');}, 1000);}

F1.trigger ('done') indicates that the done event is triggered immediately after the execution is completed, thus starting the execution of f2.

The advantage of this method is that it is easy to understand, multiple events can be bound, multiple callback functions can be specified for each event, and can be decoupled, which is conducive to modularization. The disadvantage is that the whole program will become event-driven, and the running process will become very unclear.

III. Publish / subscribe

The event of the second method can actually be understood as a "signal", that is, after F1 completes, it triggers a 'done', signal, and then starts executing f2.

We assume that there is a "signal center". When a task is completed, a signal is "publish" to the signal center, and other tasks can "subscribe" to the signal center to know when they can start execution. This is called the publish / subscribe model, also known as the observer model.

There are several implementations of this pattern, below using Ben Alman's Tiny PUb/Sub, which is a plug-in to jQuery.

First, f2 subscribes to the "done" signal from the "signal center" jquery

JQuery.subscribe ("done", f2)

Then, F1 makes the following rewriting:

Function F1 () {setTimeout (function () {/ / F1 task code jQuery.publish ("done");}, 1000);}

Jquery.pushlish ("done") means that after F1 execution is completed, a "done" signal is issued to the "signal center" jQuery, thus triggering the execution of f2.

In addition, f2 can also unsubscribe (unsubscribe) after completion of execution.

JQuery.unsubscribe ("done", f2)

The nature of this method is very similar to "event monitoring", but it is obviously better than the former, because by looking at the "message center", we can know how many signals exist and how many subscribers there are for each signal, so as to monitor the operation of the program.

4. Promise object

Promise is a specification proposed by the commonjs working group, which aims to provide a unified interface for asynchronous programming.

In short, the idea is that each asynchronous task returns a promise object, which has a then method that allows callback functions to be specified. For example, the callback function f2 of F1 can be written as:

F1 (). Then (f2)

F1 is going to make the following rewriting (here the implementation of jQuery is used):

Function F1 () {var dfd = $.Deferred (); setTimeout (task code dfd.resolve () of function () {/ / F1); return dfd.promise;}

The advantage of this is that the callback function is programmed in a chain way, the flow of the program can be seen clearly, and there are a set of supporting methods that can achieve many powerful functions.

For example, specify multiple callback functions:

F1 (). Then (f2). Then (f3)

For example, specify the callback function when an error occurs:

F1 (). Then (f2). Fail (f3)

Moreover, he has an advantage that none of the previous three methods have: if a task has been completed, and then add a callback function, the callback function will be executed immediately. So, you don't have to worry about missing an event or signal, this method is difficult to write and understand.

5. Asynchronous application of generator function.

Before the birth of ES6, there were roughly four methods of asynchronous programming:

Callback function

Event monitoring

Publish / subscribe

Promise object

Yes, these are the asynchronous methods mentioned above. The generator function brings JavaScript asynchronous programming to a whole new stage!

For example, one task is to read the file for processing, and the first paragraph of the task is to make a request to the operating system to read the file. The program then performs other tasks until the operating system returns the file, and then proceeds to the second paragraph of the task (processing the file). This kind of discontinuous execution is called async.

Accordingly, continuous execution is called synchronization. Because it is executed continuously, no other tasks can be inserted, so the program can only wait while the operating system reads files from the hard disk.

Cooperative process

In traditional programming languages, there has long been a solution for asynchronous programming, one of which is called co-programming, which means that multiple threads cooperate with each other to complete asynchronous tasks.

The advantages of the co-program are like functions and a bit like threads. The running process is as follows:

In the first step, the implementation of Program A begins.

In the second step, the execution of Program An is halfway through execution, and the execution power is transferred to Program B.

The third step is (after a period of time) to return the executive power to Cheng B.

In the fourth step, program A resumes execution.

The protocol An above is an asynchronous task because it is executed in two (or more) segments.

For example, the co-program for reading a file is written as follows:

Function * asyncJob () {/ /... Other codes var f = yield readFile (fileA); / /. Other codes}

The function asyncJob in the above code is a co-program, and the secret lies in the yield command, which means that the execution is here and the execution power is handed over to other co-programs, that is to say, the yield command is the dividing line between the two asynchronous phases.

The cooperative program pauses when it encounters a yield command, waits for the right of execution to return, and then continues to execute backwards from the paused place. Its biggest advantage is that the code is written very much like a synchronous operation, and if you remove the yield command, it is exactly the same.

The realization of Generator function of Cooperative Program

The Generator function is the implementation of the co-program in ES6, and the most important feature is that it can hand over the execution power of the function (that is, suspend execution).

The entire Generator function is an encapsulated asynchronous task, or container for asynchronous tasks. Where an asynchronous task needs to be paused, it is indicated with the yield statement. As follows:

Function* gen (x) {var y = yield x + 2; return y;} var g = gen (1); g.next () / / {value: 3, done: false} g.next () / / {value: undefined, done: true}

When the gen function is called, gen (1) returns an internal pointer (that is, the traversal) g. This is another place where the Generator function is different from the normal function, that is, executing it (calling the function) does not return a result, a pointer object. Calling the next method of pointer g moves the internal pointer (that is, the first phase of the asynchronous task) to point to the first encountered yield statement, where we are x + 2, but this is actually an example. In fact, the sentence x + 2 should be an asynchronous operation, such as an ajax request. In other words, the purpose of the next method is to execute the Generator function in phases. Each time the next method is called, an object is returned that represents the information for the current phase (the value property and the done property). The value attribute is the value of the expression following the yield statement, indicating the value of the current phase; the done attribute is a Boolean value indicating whether the execution of the Generator function is complete, that is, whether there is another phase.

Data Exchange and error handling of Generator function

The Generator function can suspend and resume execution, which is the root cause of its ability to encapsulate asynchronous tasks. In addition, it has two features that make it a complete solution for asynchronous programming: data exchange and error handling mechanisms inside and outside the function.

The value attribute of the value returned by next is the output data of the Generator function; the next method can also accept parameters and input data into the body of the Generator function.

Function* gen (x) {var y = yield x + 2; return y;} var g = gen (1); g.next () / / {value: 3, done: false} g.next (2) / / {value: 2, done: true}

In the above code, the value property of the first next method returns the value 3 of the expression x + 2. The second next method takes a parameter 2, which can be passed into the Generator function, which is received by the variable y in the function body as the return result of the asynchronous task in the previous phase. Therefore, the value property for this step returns 2 (the value of the variable y).

Error handling code can also be deployed inside the Generator function to catch errors thrown outside the function.

Function* gen (x) {try {var y = yield x + 2;} catch (e) {console.log (e);} return y;} var g = gen (1); g.next (); g.throw ('error'); / / error

In the last line of the above code, the error thrown outside the Generator function using the throw method of the pointer object can be caught by the try...catch code block in the function body. This means that the code that goes wrong is separated from the code that handles the error in time and space, which is undoubtedly important for asynchronous programming.

Encapsulation of asynchronous tasks

Let's see how to use the Generator function to perform a real asynchronous task.

Var fetch = require ('node-fetch'); function* gen () {var url =' https://api.github.com/users/github'; var result = yield fetch (url); console.log (result.bio);}

In the above code, the Generator function encapsulates an asynchronous operation that reads a remote interface and then parses the information from the data in JSON format. As mentioned earlier, this code is very much like synchronization, except for the addition of the yield command.

The method of executing this code is as follows.

Var g = gen (); var result = g.next (); result.value.then (function (data) {return data.json ();}). Then (function (data) {g.next (data);})

In the above code, you first execute the Generator function to get the traversal object, and then use the next method (the second line) to perform the first phase of the asynchronous task. Because the Fetch module returns a Promise object, the next next method is called with the then method.

As you can see, although the Generator function represents asynchronous operations succinctly, process management is not convenient (that is, when to execute the first phase and when to execute the second phase).

It is as follows:

Function* gen (x) {yield 1; yield 2; yield 3; return 4;} var a = gen (); console.log (a.next ()); console.log (a.next ())

Finally, the printer output

That is, when we start to call gen (), there is no real call, but a generator object is returned. When a.next (), the first yield is executed, and execution is paused immediately, handing over control; then we can go to a.next () to resume execution. Over and over again.

Whenever the method of the generator object's next is called, it runs to the next yield expression. Gen () here is called a generator function because the difference is as follows:

Ordinary functions are declared using function, while generator functions are declared using function *.

Ordinary functions use return to return values, while generator functions use yield to return values.

The normal functional run to completion mode, which runs to the end, while the generator functional run-pause-run mode, the function can be paused one or more times during execution. And allow other code to execute during the pause.

Async/await

The async function makes several improvements based on Generator:

Built-in actuator, the Generator function and automatic actuator are further packaged.

The semantics are clearer: async indicates that there is an asynchronous operation in the function, and await means waiting for the result of the expression that follows.

More widely applicable, await can be followed by values of promise objects and primitive types (not supported in Generator)

Many people think that this is the ultimate solution for asynchronous programming, and from this evaluation we can see how good this method is. It is based on Promise using async/await to optimize the call to the then chain, which is actually the syntax sugar of the Generator function. Async encapsulates the return value of the subsequent function (function expression or Lambda) into a Promise object, while await waits for the Promise to complete and returns the result of its resolve.

What await gets is the return value, which internally executes the resolve method in promise, and then returns the result. Write the callback task using async/await:

Async function dolt () {console.time ('dolt'); const time1=300; const time2=await step1 (time1); const time3=await step2 (time2); const result=await step3 (time3); console.log (`result is ${result} `); console.timeEnd (' dolt');} dolt ()

As you can see, the function where the await keyword is used must be modified by the async keyword.

The functionality is still new and belongs to the syntax of ES7, but it can be well escaped using the Babel plug-in. In addition, await can only be used in the async function, otherwise an error will be reported.

The above is the content of this article on "what is the asynchronous operation method of javascript". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.