Generator和async的初步认识

本文主要参考链接https://es6.ruanyifeng.com/#docs/generator，阮一峰作者写的非常详细，我只是抽取了其中一小部分作为自己的笔记。

Generator

es6中用于异步编程的函数，英语中是生成器的意思。普通函数只能生成一个值，返回一个return，generator可以生成一系列的值，可以执行多个yield（表达式）。

function* add(){
    yield console.log(1+2);
    yield console.log("hello");
    console.log('done11');
    console.log('done22');
    yield console.log("333")
    yield console.log("444")
    return "ok"
}
var result = add();
result.next();   //3
result.next();   //hello
result.next();   //done11 done22 333

使用方法：与普通函数不同，他会在function后面加一个 * 在函数名之前，但是并没有规定function、*、函数名之间的空格位置是否必须存在；在函数内部使用yield可以理解为暂停执行，调用方式与普通函数相同，但是调用之后不会立即输出，需要使用next才能将暂停的函数开始执行。

如上面代码：第一个next执行第一个yield然后暂停，第二个yield执行第二个yield然后暂停，第三个next接着刚才的代码执行，直到遇到下一个yield执行之后再暂停。

调用next方法会返回一个对象：对象包含两个属性（value,done),value代表当前表达式的值，yield表达式代表yield的值，遇到return代表return的值，done表示函数是否执行结束（遍历结束或者遇到return）。

async

async是对generator的改进。将function*替换成async function；将yield替换成await就是async的写法。它的原理就是将generator和自动执行器封装成一个函数

与generator不同的是：

它不需要使用next执行，与普通函数一样直接调用就会自动执行；

async代表函数中有异步操作，await表示后面的表达式需要等待结果才能执行；

yield后面只能是thunk或promise函数，await后面可以是promise对象或基本类型值，但都会转换成promise对象‘

async返回值是promise对象，可以直接使用then等操作；yield返回一个对象数组

语法：

1.async函数中return后的值会成为then的参数。

async function f1() {
    return 3;
}
f1().then(result => console.log(result + 1 ))
//4

2.async函数中抛出错误会认为promise状态变为rejected，会被catch方法收到。

async function f2() {
    throw new Error();
}
f2().then(result => console.log("resolve" + result))
    .catch(error => console.log("rejected" + error))
    //rejectedError

3.async函数中只有await全都执行完或者抛出异常或者遇到return才会返回promise对象，才会执行then方法。如果await后面返回rejected，也会中断执行。

下面是一个休眠函数的写法，也就是指定多少时间之后再返回结果：

function sleep(time) {
  return new Promise(resolve => {
    setTimeout(resolve, time);
  })
}


async function f() {
  for(let i = 1; i <= 5; i++) {
    console.log(i);
    await sleep(1000);
  }
}

f();  //1 2 3 4 5
//会每隔一秒返回一个数字

如果await后面的异步操作出错，代表着async函数返回的是promise对象的reject状态，防止出错后影响后面的执行可以将代码块放在try-catch中。