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事件中。怎么会有人能够从事件中返回这样的具体内容？

解决方案是以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

我希望能够从函数外部获取$ .ajax的承诺

然后你需要像反应性Observable这样的东西，而不是承诺，因为承诺代表一次性事件并解析一次，你需要多次这样做。对于一件事情来说，承诺是非常棒的。我将在这里使用RxJS，但这对于像培根这样的库来说同样适用：

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，但我总是喜欢说 - 承诺很好地解决了一个非常具体的问题 - 没有银一般的并发子弹 - 每个问题都有解决它的工具。

从函数包装事件返回数据

1 个答案: