Generator和async是什么?

Generator

Generator 函数是 ES6 提供的一种异步编程解决方案。
Generator函数是一个状态机，它返回一个遍历器对象。

Generator函数的两个特点：
1>function关键字和函数名之间有个*
2>函数体内部用yield表达式，定义不同的状态

function* hello(){
    yield 'hello1';
    yield 'hello2';
    return 'end';
}
let h = hello();
console.log(h.next());  //{value:'hello1',done:false}
console.log(h.next());  //{value:'hello2',done:false}
console.log(h.next());  //{value:'end',done:true}

异步：

function* getString(time){
    let string = yield new Promise((resolve,reject)=>{
        setTimeout(() => {
            reslove('abc')
        },time)
    })
    return string 
} 
let str = getString(1000);
console.log(str.next()); 
console.log(str.next()); //yield后面的语句只执行它不会返回结果

async是ES7引入的函数,它是Generator的语法糖。 返回值：promise

定义async函数的方法:
第一种:
async function asyncReadFile(){}
第二种:
let asyncReadFile = async function(){}

注：await不能在async函数之外使用，会报错

//应用一：
async function getString(){
    let string = await new Promise((resolve,reject) => {  
        setTimeout(() => {
            reslove('abc');
        })
    }) //await后面的语句即执行又有返回值
    return string.split('').reverse().join('')
}

getString().then((res) => {
    console.log(res); 
})

getString函数有返回值，return ‘cba’,相当于Promise.reslove(‘cba’),没有显示声明时，会隐式调用Promise.resolve()

应用二：场景：第二个请求依赖第一个请求的结果，第三个请求依赖第二个请求的结果

async函数内部的await是依次执行有先后顺序的。

//应用三：场景：已进入页面loading出现，发送多个不相关的请求，所有的请求完毕之后loading消失。
function getList(){
    return new Promise((reslove) => {
        $.ajax({
            url:'/api/list',
            success:function(res){
                reslove(res);
            }
        })
    })
}

async function demo2(){
    await getList()
    await getList()
    await getList()
    console.log("clear loading")
}

注：问题是：ajax是依次发送，同步执行的

async function demo3(){
    let s1 = sleep(1000);
    let s2 = sleep(1000);
    let s3 = sleep(1000);
    await Promise.all([s1,s2,s3]); 
    console.log('clear loading');
}

注：三个请求同时发送，三个请求完成后，再执行loading消失

//async的错误处理
async function errorFun(){
    try{
        let result = await sleep(1000);
        console.log(result)
    }catch(err){
        console.warn(err)
    }
    console.log("======");
    return await Promise.resolve('hello')
}
errorFun().then((result) => {
    console.log(result);
}).catch((error) => {
    console.warn(error);
})

注：try…catch…报错后会接着往下走，会有返回值，而直接报错的，不会有返回值

//async对比Generator函数的优点:
1>内置执行器

2>更语义化

3>返回值是promise

async可以看作是多个异步操作合并成一个promise对象，而await可以看成是then的语法糖