ES6：在异步调用中使用生成器

Question

我读了 David Walsh 关于在异步任务中使用生成器的文章 (https://davidwalsh.name/async-generators)，我想做同样的事情。这是我的代码：

function request(time) {
    let rand = Math.random()*10;
    console.log(`rand is ${rand}`);
    setTimeout(function(rand){
        it.next(rand)
    }, time);
}

function *main() {
    let result1 = yield request(5);
    result1 = parseInt(result1);
    let result2 = yield request(result1);

    console.log(`result1 is ${result1} and result2 is ${result2}`);
}

let it = main();
it.next();

但在控制台中我可以看到

rand is 6.367766260304355
rand is 0.3009188563265597
result1 is NaN and result2 is undefined

据我所知，当脚本第一次到达 let rand = Math.random()*10 时，值被保存在 rand 中，但随后它进入 setTimeout 但没有进入但到达 it.next() 在脚本的末尾，然后返回到 setTimeout 内部，但这次 rand 是未定义的。这是为什么？如何保留 rand 的值并将其传递给 result1？

编辑：好的，当我编辑

function request(time) {
    setTimeout(function(){
        let rand = Math.random()*10;
        console.log(`rand is ${rand}`);
        it.next(rand)
    }, time);
}

它工作正常。似乎我无法将值传递给 setTimeout... 为什么？

Answer 1

您可以将参数传递给计时器调用的函数，但不是您尝试过的方式。

您需要将这些参数传递给 setTimeout itself。

var timeoutID = window.setTimeout(func, [delay, param1, param2, ...]);


function request(time) {
    let rand = Math.random()*10;
    console.log(`rand is ${rand}`);
    setTimeout(function(rand){
        it.next(rand)
    }, time, rand);
}

但你的情况没有必要。您可以在内部函数范围内访问 rand。

function request(time) {
    let rand = Math.random()*10;
    console.log(`rand is ${rand}`);
    setTimeout(function(){
        it.next(rand); 
    }, time);
}

Answer 2

您的代码中有两个 rand 变量：

let rand = Math.random()*10;
//  ^^^^
…
setTimeout(function(rand) {
//                  ^^^^
    …
}, time);

该函数的参数声明了第二个变量，该变量隐藏了外部作用域中的变量。由于回调函数未传递任何参数，因此其值为 undefined - 这就是您传递给 next.

的值

只要不声明该参数，外部 rand 将通过闭包在回调中可用。

ES6：在异步调用中使用生成器

ES6: Using generator in asynchronous calls

javascript

asynchronous

generator

let

ecmascript-6