ECMAScript6 Generator & async

Generator

Generator函数是一个状态机，执行后返回一个遍历器对象。调用遍历器对象的.next()函数获取下一个状态.

Generator是一个普通的函数，函数内部使用yield关键字定义内部的不同状态.每次调用到yield表达式函数暂停执行

语法

function * name(){
    for(let i=0;i<10;i++){
        yield i*i;
    }
    return null;
}

var gn = name();
gn.next();//1
gn.next();//4

Generator函数的数据交换和错误处理

数据交互

function * gen(x){
    var y = yield x + 2;
    return y;
}

var g = gen(1);
g.next();//3
g.next(1);//2

Generator 函数传入参数与普通函数的作用相同。调用next时传入的参数会作为上次一yield的返回值传入，所以第二次调用next返回值为2.

错误处理

function * gen(x){
    try{
        var y = yield x + 1;
    }catch(e){
        console.log(e);
    }
    return y;
}
var g = gen(1);
g.next();//3
g.throw('error throw!');
//error throw!

异步任务的封装

例子：

function * gen(url){
    var result = yield fetch(url);
    console.log(result);
}

var g = gen('http://xxxx/api');
var result =  g.next();
result.value.then(d=>d.json()).then(d => g.next(d));

上面的例子有两步,第一步是调用API获取数据，第二部是打印获取的数据到控制台.

async 函数

async是Generator函数的语法糖

改进点：

• 内置执行器，不需要调用next方法。
• 语义改进，async标识函数里面包括异步操作，await标识后面的表达式需要等待
• async函数返回的是Promise对象

async 命令把多个异步操作包装成一个Promise对象

基本用法

async function getStockPriceByName(name) {
  const symbol = await getStockSymbol(name);
  const stockPrice = await getStockPrice(symbol);
  return stockPrice;
}

getStockPriceByName('goog').then(function (result) {
  console.log(result);
});

获取股票的报价,包括多个异步调用,最后返回股票报价,包装成promise对象.