如何在 TypeScript 中链接递归 Ajax 加载承诺

Question

我正在努力成为一个优秀的 jQuery 公民，并接受承诺，但一些基本的用法仍然让我无法理解。

下面的代码是一种面板加载方法，它可能会收到重定向到另一个页面的请求，而不是加载指定的原始页面。重定向受服务器控制（例如，基于以前的用户响应）。

private _loadNewPanel(url: string, data?: any): JQueryPromise<any>
{
    var THIS = this;
    var dfd = $.Deferred();
    var promise = dfd.promise();

    $.ajax({
        cache: false,
        url: url,
        type: data ? "POST" : "GET",
        data: data
    })
        .done((html: string, textStatus: string, jqXHR: JQueryXHR) =>
        {
            var location = jqXHR.getResponseHeader('redirect-url');
            // Server says to redirect
            if (location)
            {
                // Chain to the new load request
       // **** WHAT TO DO HERE WITH RETURNED PROMISE ***
                THIS._loadNewPanel(location, null);
            }
            else
            {
                dfd.resolve(html);
            }
        }).fail((jqXHR, textStatus: string, errorThrown: string) =>
        {
            dfd.reject(errorThrown + ": " + url);
        });

    return promise;
}

是不是像这样简单地将.done()添加到递归调用中并传回结果？

       // Chain to the new load request
       THIS._loadNewPanel(location, null).done(function(html){
             dfd.resolve(html);
       }).fail(function(error: string){
             dfd.reject(error);
       });

有没有更流畅的方式来编写整个内容？我在滥用 jQuery 承诺吗？

Answer 1

是的，有一种更巧妙的方式来编写整个内容。 $.ajax 已经使用了 Promise。

为了使用它返回的promise，只需返回它：

 THIS._loadNewPanel(location, null).done(function(html){
         dfd.resolve(html);
 }).fail(function(error: string){
         dfd.reject(error);
 });

可以是：

 return THIS._loadNewPanel(location, null); // why is THIS uppercase here :P? 

与上面的代码类似。您只需要在 API 的绝对最低级别进行延迟，并且前提是 API 首先不支持错误。实际上你所做的就是the deferred anti pattern。

如果要链接响应，可以使用.then：

var req = $.ajax({...}).then(function(resp){
      var location = req.getResponseHeader("redirect-url");
      if(location) return THIS._loadNewPanel(location, null); // NOTE THE RETURN
      return resp;
});
return req;