JavaScript中ES6新特性-Generator异步方案

Posted 2021-09-22 萌萌的DDD

Es2015提供的Generator --- 生成器函数

语法：在普通的函数基础之上多了一个*号

当调用这个函数并不会立即执行，而是生成一个生成器对象。

function* foo() {
    console.log('strat');

    // 通过 yield 关键词返回一个值
    yield 'foo'
}

const generator = foo()

// 并不会直接执行  而是生成一个生成器对象
console.log(generator); // Object [Generator] {}

// 直到调用next方法才会执行
// generator.next()

const result = generator.next()   // 注意：next不能重复调用

console.log(result);

 done关键词用来表示 生成器是否执行完毕

yield 并不会像return一样直接执行生成结果，而是暂停生成器的执行，直到外界在此调用next方法才会在yield处再次往下执行。

Object [Generator] {}
strat
{ value: 'foo', done: false }

---

function* main() {
    const res = yield ajax('url')
    console.log(res);
}

const g = main() // 生成生成器对象

const result = g.next() // yield执行ajax请求

result.value.then(data => {  // {value  ， done}
    g.next(data) // 执行yield返回值
})

console.log(result); //得到请求返回值

通过Generator修饰promise请求，得到了近乎于同步执行的异步编程方式。

直到done为true，才会结束yield执行。

可以通过递归的形式判断done属性是否为true结束执行

if(result.done) return

---

 递归执行Genrator

function* main() {
    try {
        const res = yield ajax('url')
        const res1 = yield ajax('url1')
        const res2 = yield ajax('url2')
        const res3 = yield ajax('url3')
    } catch (error) {
        console.log(error);
    }
}

function handleResult(result) {
    if (result.done) return
    result.value.then(data => {
        handleResult(g.next(data))
    }, error => {
        g.throw(error)
    })
}

handleResult(g.next())

 Co库