JavaScript中Generator函数的详理解

function CreateIterator(iterator) {

    // 定义一个初始下标用来判断

    let nextIndex = 0;

    // 返回对象: 包含的next方法,

    return {

        next: function () {

            // 返回一个对象: value是当前对象下标对应的值, done是是否遍历完成

            return nextIndex < iterator.length ?

                // i++ 先参数运算在 自增1

                {value: iterator[nextIndex++], done: false} :

                {value: undefined, done: true};

        }

    }

}

// 实例化一个遍历器

let iter1 = CreateIterator([1,2,3,4,5]);

console.log(iter1); // 一个具有next方法的对象

console.log(iter1.next().value); // 1

console.log(iter1.next().value); // 2

console.log(iter1.next().value); // 3

console.log(iter1.next().value); // 4

console.log(iter1.next().value); // 5

console.log(iter1.next().value); // undefined

generator生成器函数的使用:

function *fn() {

    代码1;

    yield;

    代码2;

}

普通函数: 执行到底

生成器函数: 遇到yield会暂停,交出执行权,下次执行从上次的停止的位置继续

生成器函数返回值为: 生成器对象

生成器对象.next()方法才能执行 函数体中的代码

// 可以解决函数回调嵌套的问题; 解决耗时操作

function *func() {

    // 请求数据.

    // yield ajax()

    // 处理数据

}

// generator函数本质上 分割成多个小函数来执行... yield关键字前后

// 遇到yield就暂停; 没有就往下执行...

// yield 起到了 暂停函数执行的作用

     function *g2(x, y) {       

    let sum = x+y;

    yield sum; // sum是第一个输出结果

    let agv = sum / 2;

    yield agv; // agv 是第二个输出的结果

    return {"和": sum, "平均数": agv}; // 最后一个结果

}

let gg2 = g2(100, 20);       

console.log(gg2.next().value);  // 120

console.log(gg2.next().value);  // 60

console.log(gg2.next().value);  // { '和': 120, '平均数': 60 }

const fs = require('fs');

const readFile = function (fileName) {

  return new Promise(function (resolve, reject) {

    fs.readFile(fileName, function(error, data) {

      if (error) return reject(error);

      resolve(data);

    });

  });

};

// 1.使用生成器函数 读取文件

const gen = function* () {

  const f1 = yield readFile(__dirname + '/first.json');

  const f2 = yield readFile(__dirname + '/second.json');

  console.log(f1.toString());  // 没有输出; 因为 f1 拿到是一个 Iterator 对象

  console.log(f2.toString());

};

// 使用 async + await 读取; 注意两种需配合使用

const asyncReadFile = async function () {

    const f1 = await readFile(__dirname + '/first.json');

    const f2 = await readFile(__dirname + '/second.json');

    console.log(f1.toString());  //async函数的返回值是 Promise 对象

    console.log(f2.toString());

};

gen(); // 没有值, 需要用 next()方法去取值

asyncReadFile() // 返回值 {"hello": "first"} {"hello": "second"}

methods: {

    async getApi() {

        let res = await axios.get('url')

        // 这里的执行顺序是同步的...

        console.log(res)

    }

}