求解 你不知道的JavaScript中 Generator+Promise的一段示例代码

Question

function foo(x,y) {
    return request(
        //request是一个Promise对象
        "http://some.url.1/?x=" + x + "&y=" + y
    );
}

function *main() {
    try{
        var text = yield foo( 11, 31 );
        //在yield处暂停后 yield需要等待第二次next()传值 text应该没有被赋值
        console.log( text );
    }
    catch (err) {
        console.error( err );
    }
}

var it = main();

var p = it.next().value;
//等待promise p决议
p.then(
    function (text) {
        it.next( text );
        //这里拿到的 text 应该没有赋到值呀
    },
    
    function (err) {
        it.throw( err );
    }
);

这是你不知道的JavaScript 生成器+Promise 小节中的一段示例代码
**其中 text 应该拿到的是yield 的值 而yield 应该需要第二个next()去赋值 那么 text应该是undefined 这里我就看不懂了 求解！**

Answer 1

迭代器调用一次next后，就会在yield语句行处停止执行，等到下一次next方法被调用，才会继续向下走

    return request(
        //request是一个Promise对象
        "http://some.url.1/?x=" + x + "&y=" + y
    );
}

function *main() {
    try{
        var text = yield foo( 11, 31 );//[1]
        console.log( text );
    }
    catch (err) {
        console.error( err );
    }
}

var it = main();//利用Generator函数，生成一个迭代器对象
var p = it.next().value;//迭代器执行第1次next，返回结果，其中value值为foo( 11, 31 )的执行结果-一个Promise对象
//Promise对象的函数接受Promise的结果，成功调用第1个函数参数，失败调用第2个函数参数
p.then(
    function (text) {//text值为Promise成功完成的结果值
        it.next( text );//将text作为迭代器next方法的参数，返回作为yield表达式的返回值 [1],并且迭代器继续向下执行，执行[2]，输出结果
    },
    
    function (err) {
        it.throw( err );
    }
);

代码简化下

function foo(x,y) {
    return new Promise(function(resolve,reject){
        
        setTimeout(function(){
           resolve("~~~foo完成了~~"+(x+y));
        },5000);
    });
}

function *main() {
    try{
        var text = yield foo( 11, 31 );
        console.log( text );
    }
    catch (err) {
        console.error( err );
    }
}

var it = main();

var p = it.next().value;
p.then(
    function (text) {
        //输出执行结果
        console.log("我知道了>>"+text);
        //将结果返回给迭代器
        it.next( text );
    },
    
    function (err) {
        it.throw( err );
    }
);

Answer 2

第一个迭代器的next调用后会执行到第一个yield这里,这时候并未赋值,而是返回了一个基于promise的ajax函数
这个promise决议后会将ajax请求的返回值作为参数的形式赋值给then中第一个函数作为参数
像这样

(() => new Promise((resolve => { resolve("我是参数"); })))().then(data => console.log(data), err => { throw err; })    //"我是参数"

接下来会把这个参数赋值与第一个yield的位置并执行完这个函数

Answer 3

//这里拿到的 text 应该没有赋到值呀

理解错误了，text 就是 request 成功的结果，建议你把 Promise 再理解一遍