javascript - 如何以及何时将 jQuery 回调重写为 Promise？

Question

我考虑将现有的基于回调的代码重写为使用 Promise 的代码。但是我不确定这是否有意义以及如何开始。以下代码片段是该代码的一个大部分独立的示例:

function addTooltip($element, serverEndpoint, data) {
'use strict';

const DELAY = 300;
const TOOLTIP_PARENT_CLASS = 'hasTooltip';
let timeOutReference;
$element.hover(function hoverStart() {
    if ($element.hasClass(TOOLTIP_PARENT_CLASS)) {
        return;
    }
    timeOutReference = setTimeout(function getToolTip() {
        const $span = jQuery('<span class="serverToolTip">');
        $span.html(jQuery('<span class="waiting">'));
        $element.append($span);
        $element.addClass(TOOLTIP_PARENT_CLASS);
        jQuery.get(serverEndpoint, data).done(function injectTooltip(response) {
            $span.html(response.data);
        }).fail(handleFailedAjax);
    }, DELAY);
}, function hoverEnd() {
    clearTimeout(timeOutReference);
});
};

预期功能:当用户将鼠标悬停在 $element 上 300 毫秒时，将从服务器请求工具提示内容并将其附加到 $element。

用 Promise 重写该代码是否有意义？我会如何做？

^{(jQuery是由框架(dokuwiki)提供的，所以我们不妨使用它。)}

先前的研究:

• https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html
• 关于这个主题的其他问题让我不确定这是否是一个明智的想法以及如何去做

Answer 1

首先，您需要将 setTimeout 包装到一个 Promise 中。只需创建一个接受超时并返回在超时后解决的 promise 的函数。

接下来，由于 jQuery.get 已经返回了一个 Promise，您只需将其放入 Promise 解析处理程序中并返回其 Promise。这样，下一个链接的 then 就会监听该 Promise，而不是计时器的 Promise。

它看起来像:

function timer(n){
  return Promise(function(resolve){
    setTimeout(resolve, n);
  });
}

timer(DELAY).then(function(){
  return jQuery.get(...)
}).then(function(response){
  // jQuery.get promise resolved
}).catch(function(error){
  // something failed somewhere
});

至于你的问题

Does it make sense to rewrite that code with promises and how would I do it?

这取决于你。我发现基于 promise 的代码更具可读性，但需要时间才能正确编写，特别是如果您打算编写纯回调并处理多个异步操作。我通常会首先编写代码回调(如果 API 更容易以这种方式编写)，然后进行重构以提高可读性。