1. generator 函数

概念：可以通过yield关键字，将函数挂起，为了改变执行流提供了可能，同时为了做异步编程提供了方案
与普通函数的区别：

• 1. function后面，函数名之前有个*
• 2. 只能在函数内部使用yield表达式，让函数挂起

function* func(){
    yield 2;
}
// 返回一个遍历器对象，可以调用next()
let oo = func();
console.log(oo);//返回一个对象
console.log(oo.next())//{value: 2, done: false}
console.log(oo.next())//{value: undefined, done: true}

//-----------------------------------------------------------------------------------------

function* func(){
    console.log('one');
    yield 2;
    console.log('two');
    yield 3;
    console.log('end');
}
 let qq = func();
console.log(qq);//func {<suspended>}
console.log(qq.next())//one   {value: 2, done: false}
console.log(qq.next())//two   {value: 3, done: false}
console.log(qq.next())//end   {value: undefined, done: true}

总结：generator函数是分段执行的，yield是暂停执行,而next 恢复执行

function* add(){
    console.log('start');
    // x 不是yield '2'的返回值，是next方法调用，恢复当前yield()执行传入的实参
    let x = yield '2';
    console.log('one:'+x);
    let y = yield '3';
    console.log('two:'+y);
    return x+y;
}
const fn = add();//只是生成一个生成器函数
console.log(fn.next());//start  {value: "2", done: false}
console.log(fn.next(20));//one:20  {value: "3", done: false}
console.log(fn.next(10));//two:10  {value: 30, done: true}

使用场景1：为不具备Interator接口对象提供了遍历操作

function* objectEntries(obj){
    // 获取对象的所有的key保存到数组[age,name]
    const propKeys = Object.keys(obj);
    for(const propkey of propKeys){
        yield [propkey,obj[propkey]]
    }
}

const obj ={
    name:'小玉米',
    age: 8,
}
console.log(obj);
obj[Symbol.iterator] = objectEntries;
console.log(obj);//迭代器生成

for(let [key,value] of objectEntries(obj)){
    console.log(`${key},${value}`);//name,小玉米   age,8
}

使用场景2：数据异步请求

function* main(){
    yield request('https://www.sogou.com/reventondc/inner/vi?op=13&classid=70090206');
    console.log(res);
    //执行后面的操作
    console.log('数据请求完成，可以继续操作');

}

const ite = main();
ite.next();

function request(url){
    $.ajax({
        url,
        method:'get',
        success(res){
            ite.next(res);
            console.log(res)
        }
    })
}

要实现一个：
加載loading... 页面
数据加载完成...
loading关闭掉

function loadUI(){
    console.log('加载loading页面')
}


function showData(){
    setTimeout(()=>{
    console.log('数据加载完成')

    },1000)
}
function hideUI(){
    console.log('隐藏loading...页面')
}

loadUI();
showData();
hideUI();
//加载loading页面
// 隐藏loading...页面
// 数据加载完成
//---------------------------------------------------------------------------
使用Generator模拟异步操作
let itLoad = load();
itLoad.next();
function showData(){
    // 模拟异步操作
    setTimeout(()=>{
    console.log('数据加载完成')
    itLoad.next();//继续执行
    },1000)
}
function* load(){
    loadUI();
    yield showData();
    yield hideUI();
}

Generator作用：部署ajax操作，让异步代码同步化