javascript - 合并异步操作、promise.then() 和递归 setTimeout,同时避免 "deferred antipattern"

标签 javascript ecmascript-6 promise es6-promise

我一直在阅读实现轮询功能的方法,并在 https://davidwalsh.name/javascript-polling 上找到了一篇很棒的文章.现在使用 setTimeout 而不是 setInterval 来轮询日志是有意义的,尤其是对于我无法控制的 API 并且已显示具有不同的响应时间。

所以我尝试在自己的代码中实现这样的解决方案,以挑战我对回调、 promise 和事件循环的理解。我遵循帖子中概述的指导以避免任何反模式 Is this a "Deferred Antipattern"?并确保在 .then() promise resolve before inner promise resolved 之前解决 promise 问题这就是我陷入困境的地方。我已经将一些代码放在一起来模拟场景,这样我就可以突出问题。

我假设的场景是这样的: 我有一个对服务器的 API 调用,它以用户 ID 响应。然后,我使用该用户 ID 向另一个数据库服务器发出请求,该服务器返回一组数据,执行一些可能需要几分钟的机器学习处理。

由于延迟,任务被放入任务队列,一旦完成,它就会更新 NoSql 数据库条目,从 isComplete: falseisComplete: true .这意味着我们需要每隔 n 秒轮询一次数据库,直到我们收到指示 isComplete: true 的响应,然后我们停止轮询。我知道有许多轮询 api 的解决方案,但我还没有看到涉及 promise 、条件轮询和不遵循先前链接的帖子中提到的一些反模式的解决方案。如果我遗漏了任何内容,并且这是重复的,我会提前道歉。

到目前为止,该过程由以下代码概述:

let state = false;
const userIdApi = ()  => {
    return new Promise((res, rej) => {
  console.log("userIdApi");
  const userId = "uid123";
      setTimeout(()=> res(userId), 2000)
    })
}

const startProcessingTaskApi = userIdApi().then(result => {
    return new Promise((res, rej) => {
    console.log("startProcessingTaskApi");
        const msg = "Task submitted";
      setTimeout(()=> res(msg), 2000)
    })
})

const pollDatabase = (userId) => {
    return new Promise((res, rej) => {
  console.log("Polling databse with " + userId)
      setTimeout(()=> res(true), 2000)
    })
}


Promise.all([userIdApi(), startProcessingTaskApi])
    .then(([resultsuserIdApi, resultsStartProcessingTaskApi]) => {
      const id = setTimeout(function poll(resultsuserIdApi){
        console.log(resultsuserIdApi)
        return pollDatabase(resultsuserIdApi)
        .then(res=> {
            state = res
            if (state === true){
              clearTimeout(id);
              return;
              }
            setTimeout(poll, 2000, resultsuserIdApi);
            })
            },2000)
        })

我有一个与此代码相关的问题,因为它无法按我的需要执行轮询:

我在帖子的接受答案中看到How do I access previous promise results in a .then() chain?那一个应该“打破链条”以避免巨大的 .then() 语句链。我遵循了指导,它似乎可以解决问题(在添加轮询之前),但是,当我在控制台注销每一行时,似乎 userIdApi 被执行了两次;一旦它在 startProcessingTaskApi 定义中使用,然后在 Promise.all 行中使用。

这是已知事件吗?它发生的原因是有道理的我只是想知道为什么发送两个请求来执行相同的 promise 是好的,或者是否有办法可能阻止第一个请求发生并将函数执行限制到 Promise。所有声明?

我是 Javascript 的新手,是从 Python 转过来的,所以如果能指出我可能遗漏了一些知识来让这个看似简单的任务正常工作,我将不胜感激。

最佳答案

我认为您快到了,看来您只是在与 javascript 的异步特性作斗争。使用 promises 绝对是到达这里的方式,理解如何将它们链接在一起是实现您的用例的关键。

我将从实现一个包装 setTimeout 的单一方法开始,以简化事情。

function delay(millis) {
    return new Promise((resolve) => setTimeout(resolve, millis));
}

然后您可以使用 delay 函数重新实现“API”方法。

const userIdApi = () => {
    return delay(2000).then(() => "uid123");
};

// Make userId an argument to this method (like pollDatabase) so we don't need to get it twice.
const startProcessingTaskApi = (userId) => {
    return delay(2000).then(() => "Task submitted");
};

const pollDatabase = (userId) => {
    return delay(2000).then(() => true);
};

当您的条件不满足时,您可以通过简单地在链中链接另一个 promise 来继续轮询数据库。

function pollUntilComplete(userId) {
    return pollDatabase(userId).then((result) => {
        if (!result) {
            // Result is not ready yet, chain another database polling promise.
            return pollUntilComplete(userId);
        }
    });
}

然后您可以将所有内容放在一起来实现您的用例。

userIdApi().then((userId) => {
    // Add task processing to the promise chain.
    return startProcessingTaskApi(userId).then(() => {
        // Add database polling to the promise chain.
        return pollUntilComplete(userId);
    });
}).then(() => {
    // Everything is done at this point.
    console.log('done');
}).catch((err) => {
    // An error occurred at some point in the promise chain.
    console.error(err);
});

关于javascript - 合并异步操作、promise.then() 和递归 setTimeout,同时避免 "deferred antipattern",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58594210/

相关文章:

javascript - 无法在 webpack 配置中使用 ES6 导入

javascript - 使用 every 时如何跳过一个元素

javascript - 为什么 Yield 不能与请求模块一起使用?

javascript - $promise 在 'then' 函数上保持 promise

javascript - JS Promises - 当只有单个路径是异步时的 if-else 流程

javascript - Promise.all() 未按预期顺序解决 promise

javascript - 消除渲染阻塞 javascript - 谷歌开发者建议总结

javascript - 使用 jQuery 修改 html 属性会产生意外结果

javascript - 防止 window.location.href 编码 url

javascript - 如何在 jQuery 中切换部分 href?