ES6学习系列——async 函数

async 函数总览：

async 函数就是 Generator 函数的语法糖。

1、async 函数语法：

async 函数的常见使用形式：

//函数声明式
async function () {}

//函数表达式
let test = async function () {];
//还可以写成箭头函数： let test = async () => {};

//对象方法
let obj = { foo: async function () {}};

//写进class里面
class Test {
    constructor () { }
    async getTxt (url) {
        return await getText(url);
    }
}
let test = new Test();
test.getTxt ('/wamp/www/aaa.php').then(val => console.log(val));
//this is a async function test!

async 函数返回的是一个Promise 对象，return 出去的返回值就是`then()` 中回调函数的参数；

let getText = function (url) {
    let promise = new Promise((resolve, reject)=>{
        let xhr = new XMLHttpRequest();
        xhr.open('get', url);
        xhr.send(null);
        xhr.onreadystatechange = function () {
            if (xhr.readystate == 4) {
                if (xhr.status == 200) {
                    resolve(xhr.responseText);                  
                    throw new Error('test');
                }else{
                    reject(xhr.status);
                }
            }
        }       
    });
    return promise;
};

async function fn () {
    let text = await getText('/wamp/www/aaa.php');
    console.log(text); //text 内容是：this is a async function test!
    return text;    
}

fn().then((val)=>{
    console.log(val);
});
//this is a async function test!

因为async 函数返回的是一个Promise 对象，所以就要看看这个对象的状态的变化情况：

async 函数返回的Promise 对象的状态，由 async 内部所有的 await 命令后面跟着的 Promise 对象共同决定；
要么await 后面的所有promise 对象的状态确定为“成功”，async 函数状态随之确定为“成功”；
要么有一个 await 函数后面的Promise 对象状态确定为“失败”，async 函数状态随之确定为“失败”，然后async 函数中断执行（遇到return ，async 函数也会中断执行）。
换句话说，只有返回的Promise 对象状态确定下来，它才会执行 then() 方法中的回调函数；

2、await 命令的用法：

正常情况下，await 命令后面跟一个 Promise 对象，如果不是，引擎也会先用 Promise.resolve() 来转换一下，所以就不用我们瞎操心了；
await 后面跟着的 Promise 对象如果状态为“失败”，reject(reason)出去的 reason 会被 async 返回的Promise 对象的catch()方法捕抓到（当然你也可以将这个错误给return 出去，如果不嫌多此一举的话）。

async function test () {
    await Promise.reject('Uncaught RangeError: Invalid array length');
    //也可以加上return
    //let err = await Promise.reject('Uncaught RangeError: Invalid array length');
    //return err;
} 
test().then(val => console.log(val))
      .catch(error => console.log(error));

上面已经提及，只要await 后面有一个Promise 对象的状态为“失败”，async 函数就会中断执行，如果想async 函数继续执行，应该怎么解决？
有两种方案：
第一种是利用try{ } catch(error){ }；
第二种是直接给await 后面的Promise 对象加上catch()方法，处理出现的错误；

let test = async function () {
    try{
        await Promise.reject('出错啦，老哥');
        //这里还可以放多个await

    } catch (error) {
        console.log(error);
    }
    //第二种方案：
    //await Promise.reject('出错啦，老哥').catch(err => console.log(err));
    await Promise.resolve('hello world');
};
test().then(val => console.log(val));
//出错啦，老哥
//hello world

多提一句：如果多个 await 后面的异步操作没有一定的继发依赖，大可以将他们写成并发的，同时执行效率更高：

//比如
let foo = await foo();
let bar = await bar();

//上面的两个异步操作没有继发关系，就可以让他们一起执行啦，这样写：
let [foo, bar] = await Promise.all([foo(), bar()]);

3、async 函数实现原理探究：

利用Generator 函数和自动执行器 spawn 就可以实现 async 函数：

async function () {}

//equal to 

function () {
    return spawn (function* () {} );
}

下面就来看看 spawn() 自行执行器的具体原理：

function spawn (genFn) {
    // spawn 最后返回出去的是个 Promise 对象
    return new Promise ( (resolve, reject) => {         
        let gen = genFn(); // Generator 函数genFn() 返回的一个遍历器对象

        function nextFn () {
            return gen.next();
        }

        function step (nextFn) {
            try {
                let next = nextFn(); 
            } catch (e) {
                return reject(e);
            }

            if (next.done) {
                resolve(next.value);
            }

            Promise.resolve(next.value).then( (val) =>{
                step( () => return gen.next(val) );
            }, (e) => {
                step( () => return gen.next(e) );
            });     
        }
        step( () => return gen.next(undefined) );
    });
}