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

Most people do not understand the knowledge points of this article "how to synchronize with async and await in js", 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 "how to use async and await to achieve synchronization in js" article.

First of all, let's assume that there is a method readFile that can read the contents of the file, but it is asynchronous.

Var gen = function* () {var a = yield readFile ('. / a.txt'); console.log (a.toString ()); var b = yield readFile ('. / b.txt'); console.log (b.toString ());}

First of all, let's take a look at the above code. If we change the * after function to async and yield to await, that is, the following code

Var gen = function async () {var a = await readFile ('. / a.txt'); console.log (a.toString ()); var b = await readFile ('. / b.txt'); console.log (b.toString ());}

Is it the synchronous write asynchronous operation that we want? the first way of writing is the new feature supported in es6, the Generator function. What is the Generator function? to put it simply, the Generator function can be understood from many angles. Syntactically, first of all, it can be understood that the Generator function is a state machine that encapsulates multiple internal states. Executing the Generator function returns a traversal object, that is, the Generator function is not only a state machine, but also a traversal object generation function. The returned traversal object can traverse each state within the Generator function in turn. It doesn't matter if I can't understand the official explanation above. Let's demonstrate it with an example.

Function* func () {console.log ("one"); yield '1percent; console.log ("two"); yield' 2percent; console.log ("three"); return '3percent;} var f = func (); f.next (); / / one / / {value: "1", done: false} f.next (); / / two / / {value: "2", done: false} f.next () / / three / / {value: "3", done: true} f.next (); / / {value: undefined, done: true}

In the above code, when we first call f.next (), the function func starts execution, stops when it reaches the first yield, and returns the value of the expression after yield. The format is {value: "1", done: false}, and value is the value of the yield expression.

Done indicates whether the func function is finished, and if we continue to call f.next (), the analogy will return the value of the expression following the second yield, that is, {value: "2", done: false}. We can continue to call f.next () until done becomes true, which means that the func function is finished.

Function* func () {var a = yield '1percent; console.log (a); var b = yield' 2percent; console.log (b);} var f = func (); f.next (); f.next ('1')

F.next ('2'); We continue to modify the func function to the above, passing in 1 and 2 respectively in next, we will find that console.log (a) prints 1 and console.log (b) prints 2, that is, we can pass values to the Generator function.

Now let's go back to the following code, then redesign it, and implement the readFile function.

Var gen = function* () {var a = yield readFile ('. / a.txt'); console.log (a.toString ()); var b = yield readFile ('. / b.txt'); console.log (b.toString ());}; var readFile = function (fileName) {return new Promise ((resolve) = > {fs.readFile (fileName, (err, data) = > {resolve (data);})});} Function run (fn) {var gen = fn (); function next (data) {var result = gen.next (data); if (result.done) return; result.value.then ((data) = > {next (data);})} next ();} run (gen)

Looking at the above code, we use promise to implement the readFile function. At this point, the return value of our yield is a promise object, and we can use, result.value.then ((data) = > {next (data);}) to pass the value value returned by yield back to the Generator function, so that our console.log (a.toString ()); we can get the contents of the a.txt file, if (result.done) return It can be used to determine whether the Generator function has finished executing and to end the loop call. So if we look at the gen function alone, are we writing asynchronous operations into synchronous syntax? if we change the * after function to async, and change yield to await, that's our common syntax.

The above is about the content of this article on "how to synchronize with async and await in js". I believe we all have some 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 pay attention to 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.