声明稍后执行的 jQuery AJAX 调用答案

【问题标题】：Declare jQuery AJAX call for execution later声明稍后执行的 jQuery AJAX 调用
【发布时间】：2015-05-25 14:12:39
【问题描述】：

我可以这样声明一个 jQuery AJAX 调用：

var foo = $.ajax({ ... });

但这实际上会执行请求，对吗？

如何声明 AJAX 调用而不先执行它，然后再调用它？比如：

var foo = $.ajax({ ... });
// some stuff in between
foo.execute();

谢谢。

编辑更多信息：我真正想做的是有一个基于参数构造 AJAX 请求的函数，将其返回给调用代码，并让调用代码管理其状态（即能够执行它、中止它等.)。因此，与其简单地声明 AJAX 调用的设置，我还想拥有 $.ajax 返回的实际 XHR 对象，只有能够执行它、中止它等等。

【问题讨论】：

标签： jquery ajax jquery-deferred

【解决方案1】：

您可以设置您的请求，然后在稍后执行它

 var ajaxSettings={};
 //....do other things
  $.ajax(ajaxSettings);//then call ajax

或者可以通过将ajax设置为this来同步运行

   jQuery.ajaxSetup({async:false});

【讨论】：

但是手头有实际的 XHR 对象呢？我真正想做的是有一个函数，它根据参数构造一个 AJAX 请求，将其返回给调用代码，并让调用代码管理它的状态（即能够执行它、中止它等）跨度>
看看@Mikalai 的回复

【解决方案2】：

$.ajax 返回 promise 对象，所以我们可以创建函数：

function prepareAjax(properties) {
  var defer = $.Deferred();

  var promise = defer.promise();

  return $.extend(promise, {
    execute: function () {
      return $.ajax(properties).then(defer.resolve.bind(defer), defer.reject.bind(defer));
    }
  });
}

调用这个函数，例如：

var xhr = prepareAjax({ method: 'get', url: 'https://localhost:8001' })

将结果写入控制台：

xhr.then(function (result) { console.log(result) });

并推迟执行：

xhr.execute()

【讨论】：

这里如何处理成功回调？

【解决方案3】：

如果我猜对了，你想要类似的东西

var foo = $.ajax({ ... });
// some stuff in between
result = foo.execute(); 
// do something based on result

但是，这不起作用，因为根据定义，ajax 调用是异步处理的。不过，您可以使用一个接受回调的函数并将其传递给 ajax 成功处理程序。

function myAjaxThingy(callback) {
    $.ajax({...},
    success: function(a){callback.call(a)} )
}

// some stuff

myAjaxThingy(function(a) {// do whatever based on a, or not...})

我不确定我是否真的了解您的需求。

编辑：好的，我想我现在明白了！您需要做的就是定义一个稍后调用的函数...

function myAjaxThingy() {$.ajax({...})}
// something, something, dark side...
myAjaxThingy() // will execute it

【讨论】：

感谢 Ninigi，但我想要从函数返回的 XHR 对象，能够执行和中止它（以及 XHR 对象上的其他函数）。 Mikalai 的上述回答与我所追求的一致。感谢您的回复！
我明白了，你应该接受他的回答，这真的很重要，我得承认我从来没有想过承诺 :)

【解决方案4】：

试试

var foo = function foo(settings) {
  // if settings passed , extend `$.ajaxSettings`
  this.settings = $.extend({}, $.ajaxSettings, settings);
  this.ajax = $.ajax;
  this.promise = void 0;
  this.execute = function execute() {
    // set `this.promise` to `this.ajax`
    this.promise = this.ajax.call($, this.settings);     
    // return `$.ajax` jQuery promise object
    return this.promise
  };
  // if `this.promise` is defined , call `.abort()`
  // on `this.promise`: `this.ajax` `$.ajax()`
  this.abort = this.promise ? this.promise.abort() : this.promise; 
};

var url = "https://gist.githubusercontent.com/"
          + "guest271314/6a76aa9d2921350c9d53/raw/"
          + "49fbc054731540fa68b565e398d3574fde7366e9/"
          + "abc.txt";

var request1 = new foo({"url":url});

request1.execute()
.then(function(data, textStatus, jqxhr) {
  console.log(data, textStatus, jqxhr)
}, function(jqxhr, textStatus, errorThrown) {
  console.log(textStatus, errorThrown)
});

var request2 = new foo({"url":url});

request2.execute().abort()
.then(function(data, textStatus, jqxhr) {
  console.log(data, textStatus, jqxhr)
}, function(jqxhr, textStatus, errorThrown) {
  console.log(textStatus, errorThrown)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

【讨论】：