Generator函数与async、await

一，了解Generator函数

理解：

• Generator函数可以理解成一种状态机，他封装了多个内部状态。
• 他主要有两个用途：一个是promise对象的解释器，另一个是迭代器。
• 而在ES8引入了async 和await用法时，更方便的代替了promise的原生使用方法和Generator对promise对象处理解释器的功能。

特征：

• Generator函数返回一个遍历器对象，这个对象有个next()方法
• Generator函数内部多个yield关键字，不仅可以分段执行，同时返回后面的值
• Generator函数的声明比普通函数多个星号*
• 遍历器对象每次调用next()方法，返回有value和done两个属性的对象（value为yeild关键字的返回值，done为当前Generator函数是否已完成）

使用方式：

1，声明时函数名称前面使用星号*

2，函数内部使用yield关键字添加每个阶段的状态，并返回表达式后面的值

3，外部调用Generator函数返回的迭代器对象的next()方法继续执行到函数内部的下一个状态，同时返回一个由value和done组成的对象

4，Generator函数也支持在函数最后用return返回一个值，这样执行到最后一步next()的时候，会返回这个值

示例：

function * odd() {
    yield 1;
    yield 2;
    console.log(3);
}
let iterator = odd();
let first = iterator.next();     // { value: 1, done: false }
let second = iterator.next();    // { value: 1, done: false }
let third = iterator.next();     // { value: undefined, done: true }
console.log(first, second, third);

二，了解async和await

理解：

• async和await就是继promise对象和generator函数之后，一个更简洁的异步编程解决方案。
• async在本质上其实是Generator函数的语法糖，他是基于Generator函数和自动执行器

特征：

• Generator函数返回一个{value: xx, done: xx}的对象；而async声明的函数，无论内部return一个什么值，最终async返回的永远都是一个promise对象。
• await一次只能处理一个promise
• await必须要用在async声明的函数里
• 对于promise中的catch异常处理部分，async/await方式可以直接用js的try+catch方式

使用示例：

async function add() {
    return new Promise((resolve, reject) => {
        console.log('进入promise')
        resolve(12);
    });
}

console.log('start');
try {
    let a = await add();
    console.log(a);
    console.log('end');
} catch(e) {
    console.log('异常');
}

// 结果为：start    进入promise    12    end

三，二者对比

async用来处理异步promise的使用与回调比generator函数对promise对象的解释器功能更方便好用。而generator是一个特殊的迭代器，更适合做他更擅长的，而不是来做异步。