ES6之生成器应用-异步任务控制

ES6之生成器应用-异步任务控制

//创建生成器函数
function* task() {
    const d = yield 1;
    console.log(d)
    yield 2;
}
run(task)
//实现类似Promise函数的功能
//当使用yield时，相当于await，返回成功的结果
function run(generatorFunc) {
    //创建生成器对象
    const generator = generatorFunc();
    //拿到第一个返回的对象，yield后面的结果
    let result = generator.next();
    handleResult();
    //处理拿到的yield后面的结果
    function handleResult() {
        //如果迭代结束，不处理
        if (result.done) {
            return;
        }
        //没有迭代结束，一种是promise，一种是普通数据
        if (typeof result.value.then === "function") {
            //迭代的数据是一个Promise
            //拿到data值，将data值传到前面
            result.value.then(data => {
                result = generator.next(data);
                handleResult();
            })
        } else {
            //迭代的数据是一个普通数据
            result = generator.next(result.value);
            handleResult();
        }
    }
}

我们想通过生成器来实现异步的功能。当使用 yield 关键字时，类似于 await 关键字，会等待 Promise 完成。完成之后拿到成功的结果参与下一次 yield 操作。
当我们创建一个生成器函数之后，先要创建一个生成器，进行第一次 next 调用，会拿到一个结果。首先需要看是否已经迭代结束，这也是设置一个结束条件。
这个结果里的 value 值可能是一个 Promise ，也可能不是一个 Promise ，需要分情况判断。如果 then 方法是一个函数，那么肯定是一个 Promise 。等待 Promise 完成，拿到成功之后的数据，放到等号左边，方便之后的过程中使用。继续递归。如果不是一个 Promise ，那么将等号右边的数据放到左边，方便下一次使用。当迭代到结束位置，next 结果中的 done 为 true ，可以结束递归。