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

This article focuses on "what are the ways of asynchronous programming in web", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what are the ways of asynchronous programming in web.

Callback function

Because F1 is a function that takes a certain amount of time, F1 can be written as a callback function of F1, turning synchronous operations into asynchronous operations. F1 does not block the running of the program, and F1 does not need to wait empty, such as JQuery's ajax.

Demo of the callback function:

Function F1 (f2) {setTimeout (function () {console.log ('execute f1')}, 1000) f2 ()} function f2 () {console.log (' execute f2')}

The effect is as follows:

Summary: callback functions are easy to implement and easy to understand, but multiple callbacks can lead to high code coupling.

Event monitoring

The execution of the script does not depend on the order of the code, but on whether an event occurs.

Demo of event listener

$(document) .ready (function () {console.log ('DOM already ready')}); publish and subscribe model

The publish / subscribe model uses a message center where the publisher publishes a message to the message center and subscribers subscribe to the message from the message center. Similar to passing values between parent and child components of vue.

Demo of publish-subscribe model

/ / subscribe to done event $('# app'). On ('done',function (data) {console.log (data)}) / / publish event $(' # app'). Trigger ('done,'') Promise

Promise is actually an object from which you can get messages for asynchronous operations, and Promise objects have three states, pending (in progress), fulfilled (successful), and rejected (failed). Once the state of the Promise changes, nothing changes, turning the callback function into a chained call.

Promise encapsulates asynchronous request demo

Export default function getMethods (url) {return new Promise (function (resolve, reject) {axios.get (url) .then (res = > {resolve (res)}) .catch (err = > {reject (err)})} getMethods ('/ api/xxx') .then (res = > {console.log (res)}, err = > {console.log (err)}) Generator

The Generator function is a state machine that encapsulates multiple internal states. Executing the Generator function returns a traversal object, and using the next () method of that object, you can traverse every state within the Generator function until the return statement.

Formally, the Generator function is an ordinary function, but it has two characteristics. First, there is an asterisk between the function keyword and the function name; second, the yield expression is used inside the function body, and yield is the flag for pausing execution.

When the next () method encounters an yield expression, it pauses the following operation and takes the value of the expression immediately following yield as the value attribute value of the returned object.

Demo of Generator

Function * generatorDemo () {yield 'hello'; yield 1 + 2; return' ok';} var demo = generatorDemo () demo.next () / {value: 'hello', done: false} demo.next () / / {value: 3, done: false} demo.next () / / {value:' ok', done: ture} demo.next () / / {value: undefined, done: ture} async

The async function returns a Promise object, and you can use the then method to add a callback function. The value returned by the return statement inside the async function will become the parameter of the callback function of the then method. When the function executes, once it encounters await, it will return first, wait until the asynchronous operation is complete, and then execute the following statements in the body of the function.

The Promise object is returned after the 1.await command, and the result may be rejected, so it's best to put the await command in the try...catch code block.

Demo1 of async

Async function demo () {try {await new Promise (function (resolve, reject) {/ / something});} catch (err) {console.log (err);}} demo (). Then (data = > {console.log (data) / /}) so far, I believe you have a deeper understanding of "what are the ways of asynchronous programming in web". You might as well do it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.