Learn to sail against the current, not to advance is to go back;

Introduction of the Generator

The Iterator Iterator

• Iterator Iterator is a new traversal mechanism introduced in ES6. It is also a special object, which has some special interfaces designed for the iterative process. Each Iterator object has a next() method.

1. Value Indicates the value of the current attribute
2. Done is used to determine if traversal is complete, and true if no more data is returned

• Each time the next() method is called, the next available value is returned until the traversal is complete

const obj = {
    name:'mushi'
    id:1.// Iterator properties
    [Symbol.interator]:() = > {
        // Read the object keylist
        const keys = Object.keys(this);
        let index = 0;
        // Error this,next function should have its own this
        const that = this;
        return {
            next: () = > {
                // Prevent trespassing
                if (index < keys.length) {
                    const key = keys[index];
                    index++; // Move to the next position
                    return {
                        value: [key, that[key], // Array of key-value pairs
                        done: false}}// The traversal is complete
                return {
                    done:true
                }
            }
        
        }
    
    }
}
Copy the code

The Generator Generator

• A generator is a function that returns an iterator through the new yield keyword in the function keyword followed by the asterisk (*). The * may be next to the function keyword, or a space may be added in the middle

Such as:

function* generator() {
    const arr = [1.2.3];
    for(let i of arr) {
        yieldi; }}let generatorFn = generator();
console.log(generatorFn.next()); // {value: 1, done:false}
console.log(generatorFn.next()); // {value: 2, done:false}
console.log(generatorFn.next()); // {value: 3, done:false}
console.log(generatorFn.next()); // {value: undefined, done:true}
Copy the code

features

1. The function automatically stops running after each yield statement until next() is called again.
2. The yield keyword can only be used within the generator; using it elsewhere causes the program to throw an error
3. You can create generators through function expressions, but you cannot use arrow functions

let generator = function *() {}

Async and await

Introduction to async functions

• Async functions return a Promise object. Async functions include function statements, function expressions, and lambda expressions that return a Promise object. If a variable or string is returned in a function, Async encapsulates the return directly into a Promise object through promise.resolve ()

Async clearly returns a Promise object

If async is used with no await, it can return with then

await

• Await means to wait. It can be followed by an expression, and if the value is (string, number, ordinary object, etc.), the return value is its own value
• The most common is followed by a promise object. Await will wait for the state of the promise from pending to fulfilled or Rejected, during which it will block and delay the execution of the statement following await
• If the result of a Promise object is resolve, it represents the result of the operation as await

function asyncFn() {
    return new Promise((resolve, reject) = > {
        setTimeout(() = > {
            if(true) {
                console.log('reslove xxxxxx');
                resolve('resolve 123');
            } else {
                reject('reject xxxx'); }},2000);
    });

}

// promise
asyncFn().then((res) = > {
    console.log('res');
}, (error) = > {
    console.log(error);
});

//await
tyr{
    const res = asyncFn();
    console.log(res);
} catch(e) {
    console.log(e);
}

// If there is a second request, the promise needs to be called in the then method and accepted in the THEN method
Copy the code

• Encapsulate a function and let the generator complete automatically

function* generator() {
    const arr = [1.2.3];
    for(let i of arr) {
        yieldi; }}function timeFn(time) {
     return new Promise(resolve= > {
         setTimeout(() = > {
             resovle(time);
         }, time);
     
     });
}

function asyncFn() {
    const iterator = generator();
    const next = (res) = > {
        const { vlue, done } = interator.next(res);// Execute the second time and receive the results of the first request value and done
    }
    if (done) return; // Return directly after execution
    value.then(res= > {
        next(res); // When the first value execution is complete and successful, go to the next step
    });
    next();
}

asyncFn(function* () {
    let data = yield timeFn(1000);
    console.log(data);
    data = yield timeFn(2000);
    console.log(data);
    return data;
});
Copy the code