Generator异步方案

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异步编程中很重要的一步

    
#  最后

**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

![img](https://img-blog.csdnimg.cn/img_convert/1e70e4fbec86abee12be36bc529f6654.jpeg)

![](https://img-blog.csdnimg.cn/img_convert/5cbbfda7ea0b6d406bb0512b9e9eec2d.png)

![](https://img-blog.csdnimg.cn/img_convert/d89e257f135c71641ea3bcb689b5aa4f.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
[外链图片转存中...(img-DVa9hOLa-1714858472933)]

[外链图片转存中...(img-HX063npN-1714858472933)]

[外链图片转存中...(img-cy9KIGWg-1714858472934)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**