Although I have learned it myself, I have always used Generator, React-Sage, DVA and UMI to write react with Redux, but I always have a vague understanding of it. Today, I will use empty space to summarize what I have learned.

See the example

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();
Copy the code
hw.next()
// { value: 'hello', done: false }

hw.next()
// { value: 'world', done: false }

hw.next()
// { value: 'ending', done: true }

hw.next()
// { value: undefined, done: true }
Copy the code

It’s easy to see how console.log() returns an object with a value and done, and then next() follows, but like this

function *ab(){
    let c = yield new Promise(
        (res,rej)=>{
            setTimeout(()=>{res('hello world')},2000)
        }
    );
    console.log('c',c);
    let d =  yield new Promise(
        (res,rej)=>{
            setTimeout(()=>{res('hello2 world2')},2000)
        }
    );
    console.log('d',d);
}
let it= ab()
console.log(it.next());
console.log(it.next());
console.log(it.next());
Copy the code

After execution, it looks like this

{ value: Promise { <pending> }, done: false }
c undefined
{ value: Promise { <pending> }, done: false }
d undefined
{ value: undefined, done: true }
Copy the code

This implementation

console.log(it.next(1));
console.log(it.next(2));
console.log(it.next(3));
Copy the code

It looks like this

{ value: Promise { <pending> }, done: false }
c 2
{ value: Promise { <pending> }, done: false }
d 3
{ value: undefined, done: true }
Copy the code

The result of async is c equal to Promise

async function ab(){
    let c= await new Promise(
        (res,rej)=>{
            setTimeout(()=>{res('hello world')},2000)
        }
    )
    console.log('c',c);
    let d =  await new Promise(
        (res,rej)=>{
            setTimeout(()=>{res('hello2 world2')},2000)
        }
    );
    console.log('d',d);
}
ab()
Copy the code

The results of

c hello world
d hello2 world2
Copy the code

Generator “function” and “execution” are separate. How can “execution” also determine the result of “function”

it.next(1).value.then(res=>{
    console.log('res',res);
    it.next(res).value.then(res2=>{
        console.log('res2',res2);
        it.next(res2)
    })
})
Copy the code

This implementation is what I want

res hello world
c hello world
res2 hello2 world2
d hello2 world2
Copy the code

The value passed in by next() will become the yield return value like this

function* helloWorldGenerator() {
    let a = yield 'hello';
    console.log(a);
    let b = yield 'world';
    console.log(b);
    return 'ending';
}
var hw = helloWorldGenerator();
console.log(hw.next(1));
console.log(hw.next(2));
console.log(hw.next(3));
Copy the code

This result

{ value: 'hello', done: false }
2
{ value: 'world', done: false }
3
{ value: 'ending', done: true }
Copy the code

Summary: The execution time of the next() function and the parameters passed in determine the execution result of the Generator function, which should be understood separately from the executor

Async is a syntactic sugar for a Generator with a self-executing executor, as follows

function spawn(genf){ return new Promise(function(resolve,reject){ const gen=genf() function step(nextF){ let next try{ next=nextF() } catch(e){ return reject(e) } if(next.done){ return resolve(next.value) } Promise.resolve(next.value).then(function(v){ step(function(){return gen.next(v)}) },function(e){ step(function(){return  gen.trow(e)}) }) } step(function(){return gen.next(6)}) }) } spawn(ab).then(res=>{ console.log('res',res); });Copy the code

Learned knowledge over a period of forget, their summary of the impression will be with some deep, their next look is also easier to understand. Finally, read more documents.