Generator（生成器函数）异步方案

ES2015提供的

生成器函数回顾

// 生成器函数回顾
function* foo() {
    console.log('start');
    // 内部可以随时使用yield向外返回一个值
    // yield 不会像return一样立即结束这个函数
    // 是暂停了生成器函数的执行
    // 直到下此调用next  才会继续往下执行
    // const res = yield 'foo'
    // console.log(res);
    try{
        const res = yield 'foo'
        console.log(res);
    } catch(e){
        console.log(e);
    }
}
// 调用这个生成器函数不会直接执行而是获得一个生成器对象
const generator = foo();
// 调用next方法函数体才会开始执行
const result = generator.next();
console.log(result);
// 如果next 传入一个参数  内部的yield 是可以接收到这个参数的
// generator.next('bar');
// 如果调用的 throw 那么会对生成器函数内部 抛出一个异常
generator.throw(new Error('error'))

总结：
调用这个生成器函数不会直接执行 而是获得一个生成器对象
调用next方法函数体才会开始执行
如果next 传入一个参数 内部的yield 是可以接收到这个参数的
yield 不会像return一样立即结束这个函数 是暂停了生成器函数的执行 直到下此调用next 才会继续往下执行
如果调用的 throw 那么会对生成器函数内部 抛出一个异常
done属性表示生成器是不是已经结束了
惰性执行 调一次next 往下执行一步

Generator 配合 promise 的异步方案

// Generator 配合 promise 的异步方案
function ajax(url) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest()
        xhr.open('GET', url)
        // HTML5中引入的新特性 请求完成后直接拿到 json对象
        xhr.responseType = 'json';
        // HTML5中引入的新特性 请求完成后执行
        xhr.onload = function () {
            if (this.status === 200) {
                resolve(this.response)
            } else {
                reject(new Error(this.statusText))
            }
        }
        xhr.send();
    })
}
function * main() {
    const users = yield ajax('./api/users.json')
    console.log(users);
    const posts = yield ajax('./api/posts.json')
    console.log(posts);
}
const g = main();
const result = g.next();
result.value.then(data => {
    const result2 = g.next(data);
    if(result2.done) return
    result2.value.then(data => {
        const result3 = g.next(data);
        if(result3.done) return
        result3.valuethen(data => {
            g.next(data);
        })
    })
})

利用生成器函数写出更容易阅读的代码

Generator 配合 promise 的异步方案 —-递归 实现生成器函数执行器

// Generator 配合 promise 的异步方案 利用递归实现更通用的申城其函数的执行器
function ajax(url) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest()
        xhr.open('GET', url)
        // HTML5中引入的新特性 请求完成后直接拿到 json对象
        xhr.responseType = 'json';
        // HTML5中引入的新特性 请求完成后执行
        xhr.onload = function () {
            if (this.status === 200) {
                resolve(this.response)
            } else {
                reject(new Error(this.statusText))
            }
        }
        xhr.send();
    })
}
function * main() {
    try {
        const users = yield ajax('./api/users.json')
        console.log(users);
        const posts = yield ajax('./api/posts.json')
        console.log(posts);
        const urls = yield ajax('./api/urls111.json')
        console.log(urls);
    } catch (err) {
        console.log(err);
    }
}
// 生成器函数执行器
function co(generator){
    const g = generator();
    function handleResult(result) {
        if (result.done) return // 生成器函数结束
        result.value.then(data => {
            handleResult(g.next(data))
        }, error => {
            g.throw(error)
        })
    }
    handleResult(g.next());
}
co(main)
// const g = main();
// function handleResult(result) {
//     if (result.done) return // 生成器函数结束
//     result.value.then(data => {
//         handleResult(g.next(data))
//     }, error => {
//         g.throw(error)
//     })
// }
// handleResult(g.next());