javascript - 链式 jQuery promises with abort

Question

我目前正在编写 API 代码，其中包含多层深度的 $.ajax() 调用。

一个要求是用户必须能够取消任何请求(例如，如果它花费的时间太长)。

通常这是通过一些简单的事情来完成的，比如:

var jqXHR = $.ajax(..);
$(mycancelitem).click(function () {
     jqXHR.abort();
});

但是我的代码看起来更像这样:

function myapicall() {

    var jqxhr = $.ajax(…);
    var prms = def.then(function (result) {
        // modify the result here
        return result + 5;
    });

    return prms;
}

这里的问题是调用 myapicall() 的人只得到一个 jQuery.Promise，没有办法中止它。虽然上面的示例非常简单，但在我的实际代码中，在很多地方都有多层链接。

有解决办法吗？

Answer 1

我的解决方案灵感来自所有

使用 jQuery promise

客户端.js

var self = this;
function search() {
  if (self.xhr && self.xhr.state() === 'pending') self.xhr.abort();
  var self.xhr = api.flights(params); // Store xhr request for possibility to abort it in next search() call
  self.xhr.then(function(res) {
    // Show results
  });
}
// repeatedly call search()

API.js

var deferred = new $.Deferred();
var xhr = $.ajax({ });
xhr.then(function (res) { // Important, do not assign and call .then on same line
  var processed = processResponse(res);
  deferred.resolve(processed);
});
var promise = deferred.promise();
promise.abort = function() {
  xhr.abort();
  deferred.reject();
};
return promise;

使用 Q + jQuery promise

客户端.js

var self = this;
function search() {
  if (self.xhr && self.xhr.isPending()) self.xhr.abort();
  var self.xhr = api.flights(params); // Store xhr request for possibility to abort it in next search() call
  self.xhr.then(function(res) {
    // Show results
  });
}
// repeatedly call search()

API.js

var deferred = Q.defer();
var xhr = $.ajax({ });
xhr.then(function (res) { // Important, do not assign and call .then on same line
  var processed = processResponse(res);
  deferred.resolve(processed);
});
deferred.promise.abort = function() {
  xhr.abort();
  deferred.reject();
};
return deferred.promise;