javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS Generator函数与async函数

JS中Generator函数与async函数用法介绍

作者：剪刀石头布啊

javascript中经常会用到异步编程，在ES6之后我们使用的 Generator函数、async函数、promise都是我们异步编程的一大助力，这里我们主要讲解Generator、async函数，并且简介他们之间的一些联系，本篇文章会带着一些简易案例，方便大家理解使用

Generator函数

Generator 函数看起来像指针函数，实际上跟我们的普通函数差不多，有两个特征

1、function关键字与函数名之间有一个星号

2、函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”），这里有暂停、等待执行的意思

Generator函数 运行后跟普通函数一样，只不过碰到 yield 关键字会暂停，需要等待调用next 之后才会继续往后执行，直到遇到下一个 yield 或 return

yield 作为表达式一项时，需要使用 () 括起来，否则会报错，例如: 2 * (yield x)

next 标识着 generator 函数开始往后执行语句，默认执行到 下一个 yield 语句，并返回 yield 后的内容 到 value 中，没有遇到 return或者函数结束，done参数为false，否则done参数为 true

return 标识着函数的结束，这里也不例外，只不过结束时返回的内容也可以被 next 返回; 另外，不写 return 则与return undefined类似

可以参考下面案例理解

function* generator() {
    yield 1
    yield 2
    yield 3
    yield 4
    return 5  // { value: 5, done: true }，再往后 next 就和不写一样了
    // 不写return，则与return undefined 一样 返回 { value: undefined, done: true }
}
//获取 generator 遍历器
let g = generator()
let next = null
do {
    next = g.next() //开始往后执行到下一个 yield 语句，并返回
    console.log(next)
}while(next?.done === false) //执行到 return 或 函数结束 则停止打印
next = g.next()
console.log(next)
// { value: 1, done: false }
// { value: 2, done: false }
// { value: 3, done: false }
// { value: 4, done: false }
// 有return 5 打印 { value: 5, done: true }， 没有则打印 { value: undefined, done: true }

如果在 class 中怎么表示呢，里面是构造函数的包装，写法不一样， 只需要在前面加上一个* 即可

class A {
    //前面加上 * 即可
    * generator() {
        yield 1
        yield 2
    }
}
let a = new A()
let g = a.generator()
let next = g.next()
console.log(next)
next = g.next()
console.log(next)

generator 与 Iterator遍历器

从上面打印就可以看出，generator函数，实际上返回的是一个 Iterator遍历器，因此我们亦可以通过遍历器的手段来执行 generator遍历器

下面使用 for ... of 来遍历一下我们上面的 generator遍历器

//从上面就可以看出，generator函数 返回了一个 Iterator遍历器对象
//我们遍历一次试试
let g = generator()
for (let item of g) {
    console.log(item)
}
//结果打印 1 2 3 4

看其结果发现没有打印最后的return，了解遍历器就会知道，遍历器遇到 done 为true时会直接结束（作为遍历器使用的话，不要在 return 语句 放遍历内容）

我们再对比一下看看我们的 generator遍历器是否真的是 Iteraotr遍历器，发现一模一样

//g[Symbol.iterator]() === g //遍历器属性一致，返回为 true，不信打印遍历器属性比较试试

next

前面介绍了，generator遍历器调用 next()，会继续执行到下一个 yield语句

此外，next 可以传参，我们传递的参数会作为 上一个 yield 返回的结果，没有传参，默认返回都是 undefined

注意： yield 返回的结果不是该表达式后面的内容，且 yield 作为表达式一项时，需要使用 () 括起来，否则会报错

下面看一下案例就知道结果了（过程已经标出）

//包含表达式时，yield 语句需要用括号括起来，否则会报错
function* generator() {
    let num1 = yield 1
    console.log('num1', num1)
    let num2 = num1 * (yield 2)
    console.log('num2', num2)
    yield 3
    yield 4
}
//next传入的值，作为上一个 yield 的返回值使用
let g = generator()
let next = g.next() //此时执行到 yield 1，并包装返回 yield 1 执行的结果
console.log(next)  //{ value: 1, done: false }
//传入 2， 当做上一个语句的 yield 1 的返回值（不传接收到的值均为undefined）
//即:返回 2 赋值给 num，然后执行到 (yield 2)，并包装返回 (yield 2) 的结果
next = g.next(2) //执行完毕后，打印：num1 2
console.log(next) //{ value: 2, done: false }
//传入 3. 当做上一个语句的 (yield 2) 的返回值（不传接收到的值均为undefined）
//即：num2 = num1 * 3， 然后执行到 yield 3，并包装返回 yield 3 的结果
next = g.next(3)  //执行完毕后，打印：num2 6
console.log(next) //{ value: 3, done: false }

由上述可以可以看到 next 传参 挺好用的，除了上述，甚至可以使用传递的参数，用于跳出死循环......

throw

这里的throw为通过 generator遍历器抛出的异常，其异常会抛出到 generator 函数里面，因此需要注意抛出异常的位置，才能更好地配合try...catch使用

//throw()
// 相当于在 generator 里面抛出了一个异常
function* generator() {
    try {
        yield 1
    }catch(err) {
        console.log(err)
    }
    yield 2
    yield 3
    yield 4
}
let g = generator()
let next = g.next()
console.log(next)
//执行完毕 yield 1后，随后在 yield 1 ~ yield 2 之间抛出异常，因此，try...catch 包裹主 yield 1 才行
let t = g.throw('啦啦啦') // 抛出异常并执行到下一个 yield，如果没处理错误，程序异常
console.log(t)
next = g.next()
console.log(next)

return

指定 return 会理立即结束 generator 函数，并返回 { value: undefined, done: true }，上面有介绍

function* generator() {
    yield 1
    yield 2
    yield 3
    yield 4
}
let g = generator()
next = g.next()
next = g.return() //直接返回 { value: undefined, done: true }，如果传参则返回return传递的参数
console.log(next) //会直接结束

另外，当存在 try...finally 代码块时，并且执行到 try 里面时return ，会仍然执行finally 里面的语句，且会执行到finally里面的 yield语句，finally执行完毕，才是真正结束，并且return带入的参数，会应用到 finally语句的末尾

function* generator() {
    yield 1
    try {
        //执行到这里，外面 return 的话，也需要走完 finally 才会结束
        yield 2
        yield 3
    }finally {
        yield 7
        yield 8
    }
    yield 4
}
let g1 = generator()
next = g1.next() // { value: 1, done: false }
next = g1.next() // { value: 2, done: false }
next = g1.return(100) // { value: 7, done: false }，return 后返回下一个，为finally中的 yield 7，这里顺道返回一个值测试一下最后的返回值
next = g1.next() // { value: 8, done: false }
next = g1.next() // { value: 100, done: true }
next = g1.next() // { value: undefined, done: true }

yield*

yield*看着像个指针，其指向一个 generator遍历器，会自动展开，不多说

//yield* 会展开 generator 函数
function* gen1() {
    yield 1
    yield 2
}
function* gen2() {
    yield 0
    yield* gen1()
}
//相当于下面展开的语句，可以看出yield语句总是一个一个执行的，即使嵌套也不会一次执行一堆
function* gen3() {
    yield 0
    yield 1
    yield 2
}

generator应用

generator应用很多，这里简单介绍两种，算是小试牛刀

正常切换开关，需要状态，这里通过 generator 遍历器，避免了新增开关状态(不适用于多方控制，例如：需要与后台远程同步状态)

//切换状态
function* toggleSwitch() {
    while(true) {
        console.log('开灯')
        yield 1
        console.log('关灯')
        yield 0
    }
}
//是不是切换很简单了
let t = toggleSwitch()
let next = t.next() //开灯
console.log(next)
next = t.next() //关灯
console.log(next)

流程化管理，外部不用关心内部（例如：加工软件，不同工种对于自己的操作工序，完成后只需要点击一下 next 即可）

function* order() {
    yield '收到订单'
    yield '加工'
    yield '送检'
    yield '质检'
    yield '发货'
    yield '完成订单'
}
let o = order()
let next = o.next() //收到订单
next = o.next() //加工
next = o.next() //送检
next = o.next() //质检
next = o.next() //发货
next = o.next() //完成订单

async、await函数

async、await，我们平时用的比较多，这里简单介绍一下

async、await 就是根据 generator函数改造而成，其改进了 generator函数作为普通函数痛点，其加入了执行器，能像普通函数一样直接执行，更加方便，且语义更加清晰，结果返回一个 Promise(可以看出使用Promise包装而成)

简而言之：async 声明一个异步函数，await 等待执行，当await语句执行完毕后，才会执行后面语句(出现错误直接抛出错误结束，不往后执行)，并且如果没有 await 的存在，async函数，跟一个普通的同步函数执行顺序没有什么区别

ps： 关于 promise 前面有介绍，await执行的过程与其一样，实际上会马上执行任务队列下一个任务，前面的任务执行完毕后，才会执行到 await 后面的语句

简单做一个使用案例，

async function a() {
    await promise1...
    await promise2...
    // 如果不return自己内容，返回的则是 undefind
    return 1
}
function cc() {
    a().then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })
}

你可能会想，如果第一个 promise 出错了怎么办，第二个会执行么？

答案：不会，第一个出错后，会抛出一个异常，此时会结束解释器的执行，直接反馈错误到外部

下面改进上一个案例

function a1() {
    return Promise.reject('出错了 ')
}
function a2() {
    return Promise.resolve('成功了 ')
}
async function a() {
    await a1()
    console.log(11111111111)
    await a2()
    // 如果不return自己内容，返回的则是 undefind
    return 1
}
function cc() {
    a().then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })
}
//结果是没有执行打印 11111111111，且执行到了 .catch 中

下面我们模拟传递多个图片的案例，可以看出 async、await 应用多么方便

function uploadAImage(fileUrl) {
    return new Promise(function(resolve, reject) {
        setTimeout(() => {
            let res = fileUrl + '成功了'
            console.log(res)
            resolve(res)
        }, 500);
    })
}
async function uploadImages() {
    //准备多个图片url
    let fileUrl = ['url1', 'url2', 'url3']
    for (url of fileUrl) {
        try {
            await uploadAImage(url)
        }catch(err) {
            console.log(err)
            //实际上更复杂，成功的下次就不需要在上传了
            return Promise.reject('存在上传失败的内容') 
        }
    }
    return '都成功了'
}
uploadImages().then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

async、await 函数使用简单就先介绍到这里了，后面会对 generator 进行对比，是怎么改造了的

generator 模仿 async 自动执行

前面说了 async函数 是通过 generator函数 改造而来的，里面添加了执行器，我们自己尝试一下做一个简易的generator执行器

这里是一个async 的默认执行案例

//使用 generator + 执行器，简单翻译一下 async、await
async function asyncDefaultFunction() {
    let res = await new Promise((resolve) => {
        setTimeout(() => {
            resolve(1)
        }, 1000);
        // setTimeout(() => {
        //     reject('啦啦啦')
        // }, 1000);
    })
    return res
}
asyncDefaultFunction().then(res => {
    console.log(res)
})

我们使用 generator 改造成 async 自动执行的模式

//使用 async 之后，实际上我们将返回函数包装一下即可，并且将 yield 就是 await
function asyncFunction() {
    return co(function* () {
        //async 函数里面的内容，将 yield 与 await 替换即可
        let res = yield new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(1)
            }, 1000);
            // setTimeout(() => {
            //     reject('啦啦啦')
            // }, 1000);
        })
        return res
    })
}
//编写一个自动执行 generator 的 co 函数
function co(genFunc) {
    return new Promise(function (resolve, reject) {
        const g = genFunc() //获取generator，准备执行
        function nextFunc(value) {
            let next;
            try {
                next = g.next(value)
            }catch(err) {
                return reject(err)
            }
            if (next.done) {
                return resolve(next.value)
            }
            //为什么要promise包装，语句可能为同步函数，可能为异步函数，木事保证正确执行
            //如果为 promise 直接原封不动返回，如果为普通对象则包装，具体见promise
            Promise.resolve(next.value).then(function(res) {
                nextFunc(res)
            }, function(err) {
                reject(err)
            })
        }
        nextFunc(undefined)
    })
}
asyncFunction().then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

这样就实现了一个简易的 generator 自动执行器

同时我们也发现了，async 与我们普通函数相比，加剧了负担，为了优化性能，我们平时如果没有用到异步函数(或者连 await 都用不到的)，将多余的 async 去掉吧，这样某种程度上能够避免性能浪费，尤其是到了循环语句

最后

看到了这里，相信我们也能学习到不少东西，可以想一下，其他语言是不是也是类似这样呢，遇到了相似的情况我们是不是也豁然开朗了呢，很多语言是互通的，学习就是积累的过程，希望我们此次能有所收获!

以上就是JS中Generator函数与async函数用法介绍的详细内容，更多关于JS Generator函数与async函数的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文