Generator异步方案

Generator 异步方案

回顾 Generator 函数

• 相比于传统回调函数的方式，promise 去处理异步调用最大的优势就是可以通过链式调用来解决回调嵌套过深的问题
• 使用 promise 去处理异步任务的串联执行，他的表现就是一个 then 处理一个异步调用，最终整体会形成一个任务的链条，从而实现所有任务的串联执行
• 但这样写仍然会有大量的回调函数，虽然他们之间并没有相互的嵌套，但是他们还是没有办法达到我们传统的同步代码的可读性，如果说我们是传统的同步代码的方式，我们的代码可能是下边的示例这种样子，很明显这种方式去写我们的异步代码，是最简洁也是最容易阅读和理解的

// Promise chain
ajax('/api/url1')
    .then(value => {
        return ajax('ajax/url2')
    })
    .then(value => {
        return ajax('ajax/url3')
    })
    .then(value => {
        return ajax('ajax/url4')
    })
    .catch(error => {
        console.error(error)
    })

// like sync mode
try {
    const value1 = ajax('/api/url1')
    console.log(value1)

    const value1 = ajax('/api/url1')
    console.log(value2)

    const value1 = ajax('/api/url1')
    console.log(value3)

    const value1 = ajax('/api/url1')
    console.log(value4)
} catch (e) {
    console.error(e)
}

• 接下来我们来看两种更优的异步编程写法
  • ES5 提供的 Generator
    • 生成器函数，在此之前我们已经简单了解过生成器函数的语法和他的一些基本特点

// 语法上，生成器函数其实就是普通的函数基础上多了一个 * 号
function * foo () {
    console.log('start')

    /**
     * 我们可以在函数内部随时使用 yield 关键词，向外去返回一个值
     * 
     * 我们可以在 next 方法返回对象当中去拿到这个值
     * 
     * 返回的对象当中还有一个 done 属性表示这个生成器是否已经全部生成完了
     * 
     * yield 关键词并不会像 return 语句一样，立即去结束这个函数的执行，他只是暂停我们这个生成器的执行
     * 
     * 直到我们外界再一次调用我们生成器对象的 next 方法时，他就会继续从 yield 这个位置往下执行
     * */ 
    yield 'one' 

    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 语句的返回值，
 * 
 * 也就是说，我们在 yield 的左边实际上可以接收到这个值
 * */ 
// generator.next('bar')

/**
 * 如果在外部手动调用的是生成器对象的throw方法，这个方法就可以对生成器内部抛出一个异常
 * 
 * 内部再往下继续执行的时候就会得到这个异常，我们可以通过  try...catch... 捕获这里得到的异常 
 * */ 
generator.throw(new Error('Generator error'))

Generator异步方案

• 体验 Generator 函数异步方案
• 我们完全可以借助于 yield 可以暂停生成器函数执行的这样一个特点来去使用生成器函数实现一个更优的异步编程体验
• 示例

function ajax (url) {
    ... 之前的ajax ...
}

function * main () {
    /**
     * 使用 yield 返回一个 ajax函数，也就是一个Promise对象
     * 
     * 完成之后我们就可以在外界调用生成器函数，得到一个生成器对象
     * 
     * 调用这个对象的 next 方法
     * 
     * 这样我们的 main 函数就会执行到第一个yield的位置，也就是回去执行ajax调用
     * 
     * next 方法返回对象的 value 就会是这个 yield返回的Promise对象
     * 
     * 我们就可以在他后边通过 then 的方式，指定这个 Promise 的回调
     * 
     * 在这个回调当中就可以拿到这个 Promise 的执行结果
     * 
     * 然后可以在调用一次 next 把我们得到的结果传递进去
     * 
     * 然后我们的 main 就可以接着继续往下执行
     * 
     * 而且我们传递进去的data就会作为 yield 的返回值
     * */ 
    const users = yield ajax('/api/user.json')
    console.log(users)
}

const g = main()
const result = g.next()
result.value.then(data => {
    g.next(data)
})

• 这样对于 Promise 函数的内部，我们就彻底消灭了 Promise 的回调，有了一种近乎于同步代码的体验，我们可以到 main 函数中，继续添加下一个 yield 的操作

function ajax (url) {
    ... 之前的ajax ...
}

function * main () {
    const users = yield ajax('/api/user.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 => {
    /**
     * 此时在外部第二次调用的 next 的结果也会是一个 Promise 对象
     * 
     * 我们可以按照相同的方式继续去处理我们的 Promise
     * 
     * 以此类推，如果我们在 main函数当中，多次使用 yield 的方式去返回 Promise 对象
     * 
     * 而且每次返回的都是一个 Promise 对象，那我们这里完全就可以不断的在结果对象当中的 then 调用 next
     * 
     * 直到我们 next 所返回的对象中的 done 属性为 true 
     * 
     * 也就是说我们的 main 函数，完全执行结束过后在停止
     * 
     * 所以说，我们这应该在每次去调用then方法之前，先去判断一下结果的 done 属性是否为 true
     * 
     * 如果为 true 就代表生成器已经结束了，没必要再继续了
     * 
     * 这里我们完全可以使用递归的方式去不断迭代，直到返回结果的 done 属性为 true 
     * 
     * 也就是生成器的执行结束了过后，我们结束这样一个递归
     * */ 
    const result2 = g.next(data)

    result2.value.then(data => {
        g.next(data)
    })
})

Generator递归方案

• 递归执行 Generator 函数

var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;

function ajax(url) {
    return new Promise(function (resolve, reject) {
        let xhr = new XMLHttpRequest()
        xhr.open('GET', url)
        xhr.responseType = 'json'
        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/user.json')
        console.log(users)

        const posts = yield ajax('/api/posts.json')
        console.log(posts)

        const urls = yield ajax('/api/urls.json')
        console.log(urls)
    } catch (e) {
        console.log(e)
    }
}

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)

/**
 * 我们先定义一个 handleResult 的函数，这个函数我们让他接受一个 result 的参数
 * 
 * 这个 result 实际上就是 next 方法所返回的那样一个 result 
 * 
 * 在这个函数的内部我们先去判断 result 的 done 属性，是否为 true 
 * 
 * 也就是我们这个生成器是否已经结束
 * 
 * 如果说结束了 handleResult 就也没必要往下执行了， 直接 return 
 * 
 * 反之，那 result 的 value 就应该是一个 Promise 对象
 * 
 * 我们就可以使用 then 方法， 去处理请求结果
 * 
 * 在请求的回调当中我们继续使用 next 让我们这个函数继续往下执行，并且把得到的数据传递进去
 * 
 * 这个 next 返回的又会是下一个 result ，那我们应该将其再次交给 handleResult 函数 进行递归
 * 
 * 这样我们只需要在外界去调用一下我们这个 handleResult 然后传入第一次 next 的结果就可以了
 * 
 * 后边只要生成器不结束，这个递归就会一直执行
 * 
 * 这时我们还需要处理 Promise 失败时的处理逻辑
 * 
 * 我们直接在 Promise 对象的 then 方法当中去添加一个失败的回调
 * 
 * 在失败的回调当中我们可以直接去调用生成器对象的 throw 方法，让这个生成器函数在继续执行时得到一个异常就可以了
 * 
 * 这样我们就可以在 main 函数的内部使用 try...catch...  这时我们就可以捕获到异常了
 * 
 * 以上这个过程我们就已经完成了生成器函数的执行器
 * 
 * 其实对于这个执行器的逻辑完全可以复用的，所以我们可以把它封装成一个公共的函数
 * 
 * 像这样的生成器函数执行器，在社区当中早就有一个更完善的库 
 * 
 * 地址：https://github.com/tj/co
 * */ 

• 使用这个方案最明显的变化就是让我们的异步调用再次回归到扁平化，这也是我们js异步编程中很重要的一步

• 所以我们不应该仅限于了解它的用法，更要了解到他是怎样工作的

• 但是在日后的开发过程中我们可能还是会选择最新的 Async / Await