Generator函数与async函数

Generator函数与async函数

1.什么是Generator函数?

Generator 函数是 ES6 提供的一种异步编程解决方案
Generator 函数内部可以封装多个状态, 因此又可以理解为是一个状态机

2.如何定义Generator函数

只需要在普通函数的function后面加上*即可

3.Generator函数和普通函数区别

3.1调用Generator函数后, 无论函数有没有返回值, 都会返回一个迭代器对象,
3.2调用Generator函数后, 函数中封装的代码不会立即被执行

4.真正让Generator具有价值的是yield关键字

4.1在Generator函数内部使用yield关键字定义状态
4.2并且yield关键字可以让 Generator内部的逻辑能够切割成多个部分。
4.3通过调用迭代器对象的next方法执行一个部分代码,执行哪个部分就会返回哪个部分定义的状态

5.在调用next方法的时候可以传递一个参数, 这个参数会传递给上一个yield

function* gen() {
    console.log("123");
    let res = yield "aaa";

    console.log(res);
    console.log("567");
    yield 1 + 1;

    console.log("789");
    yield true;
}
let it = gen();
// console.log(it);
console.log(it.next());
console.log(it.next("it666"));
// console.log(it.next());
// console.log(it.next());

// 注意点: yield关键字只能在Generator函数中使用, 不能在普通函数中使用
// function say() {
//     yield "abc";
// }
// say();

应用场景

1.让函数返回多个值

/*
function calculate(a, b) {
    let sum = a + b;
    let sub = a - b;
    return [sum, sub];
}
*/
function* calculate(a, b) {
    yield a + b;
    yield a - b;
}
let it = calculate(10, 5);
console.log(it.next().value);
console.log(it.next().value);

2.用同步的流程来表示异步的操作

/* 回调地狱实现
function request(fn) {
    setTimeout(function () {
        fn("拿到的数据");
    }, 1000);
}
request(function (data) {
    console.log("1", data);
    request(function (data) {
        console.log("2", data);
        request(function (data) {
            console.log("3", data);
        });
    });
});
*/
function request() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve("拿到的数据");
        }, 1000);
    });
}
/* promise实现
request().then(function (data) {
    console.log(data, 1);
    return request();
}).then(function (data) {
    console.log(data, 2);
    return request();
}).then(function (data) {
    console.log(data, 3);
});
*/
//Generator实现
function* gen() {
    yield request();
    yield request();
    yield request();
}
let it = gen();
// console.log(it.next().value);
it.next().value.then(function (data) {
    console.log(data, 1);
    return it.next().value;
}).then(function (data) {
    console.log(data, 2);
    return it.next().value;
}).then(function (data) {
    console.log(data, 3);
});

3.利用 Generator 函数，可以在任意对象上快速部署 Iterator 接口

 /*
 Generator 函数特点
 1.Generator 函数也是一个函数
 2.Generator 函数会返回一个迭代器对象
 3.迭代器对象有next方法
 4.next方法每次执行都会返回一个对象{value: xxx, done: false}
 */
 /*
 function* gen() {
     yield "aaa";
     yield "bbb";
     yield "ccc";
 }
 let it = gen();
 // console.log(it);
 console.log(it.next());
 */

 /*
1.必须有一个叫做[Symbol.iterator]的属性
2.[Symbol.iterator]的属性会返回一个函数
3.[Symbol.iterator]返回的函数执行之后会返回一个可迭代对象
4.[Symbol.iterator]函数返回的对象中又一个名称叫做next的方法
5.next方法每次执行都会返回一个对象{value: xxx, done: false}
*/
 /*
 let obj = {
     name: "lnj",
     age: 34,
     gender: "man",
     [Symbol.iterator](){
         let keys = Object.keys(this);
         // console.log(keys);
         let index = 0;
         let that = this;
         return {
             next(){
                 if(index < keys.length){
                     return {value: that[keys[index++]], done: false};
                 }else{
                     return {value: undefined, done: true};
                 }
             }
         }
     }
 }
 // console.log(obj[Symbol.iterator]);
 // let it = obj[Symbol.iterator]();
 // console.log(it);
 // console.log(it.next());
 // console.log(it.next());
 // console.log(it.next());
 // console.log(it.next());
 for(let value of obj){
     console.log(value);
 }
 */

 let obj = {
     name: "lnj",
     age: 34,
     gender: "man"
 }
 function* gen(){
     let keys = Object.keys(obj);
     for(let i = 0; i < keys.length; i++){
         yield obj[keys[i]];
     }
 }
 obj[Symbol.iterator] = gen;
 // console.log(obj[Symbol.iterator]);
 let it = obj[Symbol.iterator]();
 // console.log(it);
 console.log(it.next());
 console.log(it.next());
 console.log(it.next());
 console.log(it.next());

6.async函数

async函数是ES8中新增的一个函数, 用于定义一个异步函数
async函数函数中的代码会自动从上至下的执行代码

7.await操作符

await操作符只能在异步函数 async function 中使用
await表达式会暂停当前 async function 的执行，等待 Promise 处理完成。
若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，然后继续执行 async function。

function request() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve("拿到的数据");
        }, 1000);
    });
}
/*
function* gen() {
    yield request();
    yield request();
    yield request();
}
let it = gen();
it.next().value.then(function (data) {
    console.log(data, 1);
    return it.next().value;
}).then(function (data) {
    console.log(data, 2);
    return it.next().value;
}).then(function (data) {
    console.log(data, 3);
});
*/
async function gen() {
    let res1 = await request();
    console.log(res1, 1);
    let res2 = await request();
    console.log(res2, 2);
    let res3 = await request();
    console.log(res3, 3);
}
gen();