从函数包装事件返回数据

Question

function form_submit(){
  $('form[action="/specific"]').on("submit", function(e){
    e.preventDefault();
    var $this = $(this)
    var data = $this.serialize()
    return $.ajax({
      "method": "get",
      "url": "https://endpoint.com",
      "data": {
        "data": data
      }
    })
  })
}

我希望能够从函数外部捕获来自 $.ajax 的承诺。 form_submit().then() 之类的东西不起作用，因为它全部包含在 .on 事件中。某人如何能够从活动中 return 像这样的特定内容？

以request为参数触发自定义事件的解决方案？

function form_submit(){
  return $('form[action="/specific"]').on("submit", function(e){
    e.preventDefault();
    var $this = $(this)
    var data = $this.serialize()
    var request = $.ajax({
      "method": "get",
      "url": "https://endpoint.com",
      "data": {
        "data": data
      }
    })
    $this.trigger("submitted", [request]);
  })
}

form_submit().on("submitted", function(e, request){
  request.then(function(response){
    console.log("logging")
    console.log(response)
  });
});

Answer 1

I would like to be able to capture the promise from $.ajax from outside the function

那么你需要像反应式 Observable 这样的东西而不是承诺，因为承诺代表一次性事件并解决一次，你需要它发生多次。 Promises 对于一件事来说很棒。我将在这里使用 RxJS，但这同样适用于像 Bacon 这样的库：

var el = $('form[action="/specific"]');
function form_submit(){
   return  Rx.Observable.fromEvent(el, 'submit').flatMap(function(ev){
       ev.preventDefault();
       var $this = e.target;
       return $.ajax(...); // flatMap on observable will wait for results like a `then`
   });
}

哪个会让你做

form_submit().subscribe(function(result){
    console.log(result); // log all results from submits
    // can also .flatMap or .map to chain like a promise `then`
});

请注意，如果表单提交仅在您可以从事件中做出承诺然后 .then 发生，但正如我一直想说的那样 - 承诺可以很好地解决一个非常具体的问题 - 有一般并发没有灵丹妙药 - 每个问题都有解决它的工具。

从函数包装事件返回数据

Returning data from a function wrapped event

ajax

jquery

events

promise