为什么我的承诺返回未定义？

Question

背景

我正在尝试创建一个将异步函数的执行延迟 X 毫秒的函数。

出于本演示的目的，以下是异步函数，它接受一个 URL：

/*
 *  This is a simulation of an async function. Be imaginative! 
 */
let asyncMock = function(url) {
    return new Promise(fulfil => {

        setTimeout(() => {
            fulfil({
                url,
                data: "banana"
            });
        }, 10000);

    });
};

目标

我的目标是有一个函数，它将接受 asyncMock 的 url 参数，然后每 X 毫秒调用一次，或者直到没有更多参数为止。

基本上，我希望asyncMock 的每次调用都用 X 毫秒分隔。

例如，假设我连续调用asyncMock 20 次。通常，这 20 个电话会立即完成。我想要的是确保 20 次通话之间有 Xms 的延迟。

暂定

我解决这个问题的想法是建立一个工厂，它将返回一个promise，它将在 X 毫秒后执行该函数。

let throttleFactory = function(args) {

    let {
        throttleMs
    } = args;

    let promise = Promise.resolve();

    let throttleAsync = function(url) {

        return promise.then(() => {

            setTimeout(anUrl => {
                return new Promise( fulfil => {
                    fulfil(asyncMock(anUrl));
                });
            }, throttleMs, url);
        });
    };

    return Object.freeze({
        throttleAsync
    });
};

理想情况下，我会像下面的示例一样使用这个工厂：

let throttleFuns = throttleFactory({
    throttleMs: 2000
});

console.log('running');

throttleFuns.throttleAsync('http://www.bananas.pt')
    .then(console.log)
    .catch(console.error);

throttleFuns.throttleAsync('http://www.fruits.es')
    .then(console.log)
    .catch(console.error);

throttleFuns.throttleAsync('http://www.veggies.com')
    .then(console.log)
    .catch(console.error);
// a ton of other calls in random places in code

问题

这里的问题是我的throttleAsync 函数立即输出了三遍undefined。我相信这可能是因为我没有正确定义promise。

问题

如何修复此代码以按预期工作？

Answer 1

因为throttleAsync 返回调用promise.then 的结果，而then 回调不返回任何内容。这使得then 创建的承诺解析为undefined。

您可能打算让它返回您正在创建的新承诺，但直到setTimeout 回调您才这样做。你想提前做（但还有更多，请继续阅读）：

let throttleAsync = function(url) {

    return promise.then(() => {
        return new Promise( fulfil => {
            setTimeout(anUrl => {
                fulfil(asyncMock(anUrl));
            }, throttleMs, url);
        });
    });
};

也没有理由像这样通过setTimeout 传递 URL，所以：

let throttleAsync = function(url) {

    return promise.then(() => {
        return new Promise( fulfil => {
            setTimeout(() => {
                fulfil(asyncMock(url));
            }, throttleMs);
        });
    });
};

最初我虽然promise 是不必要的，但你已经澄清你想确保重复调用被throttleMs“隔开”。为此，我们将使用上述方法，但更新promise：

let throttleAsync = function(url) {

    return promise = promise.then(() => {
    //     ^^^^^^^^^
        return new Promise( fulfil => {
            setTimeout(() => {
                fulfil(asyncMock(url));
            }, throttleMs);
        });
    });
};

这样，对asyncThrottle 的下一次调用将等到上一次调用触发后再开始下一次调用。

现场示例：

const throttleMs = 1000;

const asyncMock = url => url;

let promise = Promise.resolve();

let throttleAsync = function(url) {

    return promise = promise.then(() => {
    //     ^^^^^^^^^
        return new Promise( fulfil => {
            setTimeout(() => {
                fulfil(asyncMock(url));
            }, throttleMs);
        });
    });
};

console.log('running');

throttleAsync('http://www.bananas.pt')
    .then(console.log)
    .catch(console.error);

throttleAsync('http://www.fruits.es')
    .then(console.log)
    .catch(console.error);

throttleAsync('http://www.veggies.com')
    .then(console.log)
    .catch(console.error);

Answer 2

这是你的问题：

        setTimeout(anUrl => {
            return new Promise( fulfil => {
                fulfil(asyncMock(anUrl));
            });
        }, throttleMs, url);

您在这里所做的是从 setTimeout 回调返回一个承诺。 setTimeout 运行的函数的返回值被忽略，因此没有人会得到该值。