Generator与async详解

---

Generator

1.Generator的基本概念

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同
形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）yield只能在Generator函数里面使用

2.Generator的基本用法

代码如下（示例）：

function* fn() {
    yield 0;
    yield 1;
    return "end"
}
var gen=fn()

fn.next()//{value:'0',done:fales}

fn.next()//{value:'1',done:fales}

fn.next()//{value:'end',done:end}

Generator 函数可以不用yield表达式，这时就变成了一个单纯的暂缓执行函数。

function* fn() {
  console.log('执行了！')
}

var gen = fn();

setTimeout(function () {
  gen.next()
}, 2000);

因为是generator函数，所以就要调用next()方法的时候，fn()才会执行

---

async

async的基本概念

async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await。
async本质是Generator的语法糖

• async 的返回值是 Promise 实例对象。
• await 可以得到异步结果。

语法糖是一种方便程序员使用的语法，可以让程序更加简介，有更高的可读性，在编译阶段会被还原成简单的基础语法，这个过程就是解语法糖。（简单的说，语法糖就是一种便捷写法。）

async的基本用法

async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

async 后面可以跟一个 Promise 实例对象：

    const request = function() {
        const promise = new Promise(resolve => {
            request('/api/xxxx', function(response) {
                if (response.Code == 200) {
                    resolve('success'+ response);
                } else {
                    reject('接口请求失败');
                }
            });
        });

        return promise;
    };

    async function foo() {
        const response = await request();
        });
        return response;
    }
    foo().then(data => {
        console.log(data);
    });

async 处理多次 Ajax 请求

    const request1 = function() {
        const promise = new Promise(resolve => {
			setTimeout(() => {
      			request('/api/1', function(response) {
                	if (response.Code == 200) {
                    	resolve('request1 ');
                	} else {
                   		reject('接口请求失败');
               		}
            	});
    		}, 100      
        });
        return promise;
    };
    
	const request2 = function() {
        const promise = new Promise(resolve => {
			setTimeout(() => {
      			request('/api/2', function(response) {
                	if (response.Code == 200) {
                    	resolve('request1 ');
                	} else {
                   		reject('接口请求失败');
               		}
            	});
    		}, 100      
        });
        return promise;
    };


    async function foo() {
        await request1()
        await request2()
    }
    foo().then(data => {
        console.log(data);
    });