Generator异步方案(1)，React面试题总结

最新推荐文章于 2024-10-04 17:00:22 发布

Android失眠夜

最新推荐文章于 2024-10-04 17:00:22 发布

阅读量591

点赞数 20

分类专栏：前端程序员文章标签： react.js okhttp 前端

本文链接：https://blog.csdn.net/m0_61418075/article/details/136770371

版权

前端程序员专栏收录该内容

7 篇文章 0 订阅

订阅专栏

返回的对象当中还有一个 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()

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

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。