JS asynchronous async and await implementation synchronous writing method

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

var gen = function* (){
    var a = yield readFile('./');
    (());
    var b = yield readFile('./');
    (());
};

First, let's look at the above code. If we change the * after function to async, change yield to await, which is the following code

var gen = function async (){
    var a = await readFile('./');
    (());
    var b = await readFile('./');
    (());
};

Is it the synchronous writing asynchronous operation we want? The first way to write is the new feature supported in es6, the Generator function. So what is the Generator function? Simply put, there are many perspectives for understanding the Generator function. Syntax, we can first understand it as the Generator function is a state machine that encapsulates multiple internal states. Executing the Generator function will return a traverser object. That is to say, the Generator function is also a traverser object generation function in addition to a state machine. The returned traverser object can traverse each state inside the Generator function in sequence. It doesn't matter if you don't understand the official explanation above. Let's demonstrate it with examples below.

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

When we call () for the first time in the above code, the function func starts to execute, and stops when it is executed to the first yield, and returns the value of the expression after yield. The format is {value: "1", done: false}  This format, value is the value of the yield expression
done means whether the func function has been executed. At this time, if we call (), and so on, the value of the expression after the second yield will be returned, that is, {value: "2", done: false}. We can continue to call () until done becomes true, which means that the func function has been executed.

function* func(){
    var a = yield '1';
    (a);
    var b = yield '2';
    (b);
}
var f = func();
(); 
('1'); 

('2');We continue to transform the func function to the above, pass 1 and 2 in next respectively, and we will find (a) print 1 and (b) print 2, that is, we can pass the value into 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('./');
    (());
    var b = yield readFile('./');
    (());
};

var readFile = function (fileName){
    return new Promise((resolve)=>{
        (fileName, (err, data)=>{
            resolve(data);
        })
    });
};

function run(fn) {
    var gen = fn();
    function next(data) {
        var result = (data);
        if () return;
        ((data)=>{
            next(data);
        })
    }
    next();
}

run(gen);

Looking at the above code, we use promise  to implement the readFile function. At this time, the return value of our yield is a promise object, we can use it.((data)=>{next(data);})Return the value value returned by yield back to the Generator function, so that our (()); can obtain the contents in the file. If () return; can be used to determine whether the Generator function has been executed and used to end the loop call. So if we look at the gen function separately, is it just writing asynchronous operations into synchronous syntax? If we change * after function to async, change yield to await, which is our common syntax.

This is the article about the synchronous writing of async and await that implements synchronous writing of js asynchronous async and await. For more related content on synchronous js async and await, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!