使用延迟强制在刷新之前完成一个调用[重复]

Question

我的 JavaScript 代码中有一个 ajax 调用，它在来自服务器端代码的响应中接收一个 GUID。在成功方法上，它使用该 GUID 调用 iframe，然后在调用完成后，它应该刷新页面。

我在提琴手看到的是 iframe 会话正在中止。我唯一的猜测是它在强制刷新时被浏览器中止：如果我删除刷新部分，iframe 会话会发送请求并成功接收响应。

如何在 iframe 完成工作后刷新页面？ 有人建议我使用 Promise，但我在 jQuery 中尝试了$.Deferred()，但仍然没有成功。我想我没有正确使用$.Deferred() 方法。

注意：如果我将 ajax 设置为同步调用，它会起作用，但我希望找到更好的解决方案。

这是我的代码：

foo() {
   this.$link.click((e) => {
        e.preventDefault();
        $.ajax({
          url: "/serverEndpoint",
          type: "POST",
          success: (id) => {
          this.iframeCall(id);
          window.location.href = window.location.origin;
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
          }
         });
    });
 }

iframeCall(id) {
   var iframe = document.createElement('IFRAME');
   iframe.setAttribute("src", someUrl+id);
   iframe.style.display = 'none';
   document.body.appendChild(iframe);
}

Answer 1

当iframe元素的load事件被调度时，你可以从iframeCall()返回一个jQuery延迟对象，然后执行任务

iframeCall(id) {
   return new $.Deferred(function(dfd) {
     var iframe = document.createElement('IFRAME');
     iframe.onload = dfd.resolve;
     iframe.setAttribute("src", someUrl+id);
     iframe.style.display = 'none';
     document.body.appendChild(iframe);
   })
}

this.iframeCall(id).then(function() {
  window.location.href = window.location.origin;
})