jQuery：如何让 ajaxSend 在继续之前等待另一个 Ajax 响应？

Question

我正在使用 jQuery (v.3.0.0)，我需要 ajaxSend() 来检查 localStorage 中是否存在值，并将其添加到传出请求标头中。

如果localStorage 中不存在该值，ajaxSend() 应通过另一个 Ajax 请求获取该值，然后在标头中发送具有正确值的原始请求。

这必须是一个全局处理程序，适用于所有发出的 jQuery Ajax 请求。

让我们做一个代码示例。

$(document).ajaxSend(function (ev, req, opts) {
  // Before sending any jQuery Ajax request
  var original = req;
  if (localStorage.foo) {
    // If value "foo" is available, add it to the headers
    req.setRequestHeader('foo', localStorage.foo);
  } else {
    // Otherwise get it first, and add it to the headers
    $.get({url: '/foo', global: false})
      .done(function (data, textStatus, req) {
        // "foo" is received and added to the original request headers
        localStorage.foo = data;
        original.setRequestHeader('foo', data);
        // Now the original request is ready to be sent
      });
  }
});

当foo不可用时，上面代码的问题是，很明显原始请求是在foo的值被检索之前发出的。

有没有办法解决这个问题并让它正常工作？

谢谢！！

Answer 1

到目前为止，这是我能找到的最佳解决方案。它并不完美，也没有完全回答最初的问题，但它是一个很好的解决方法，并且非常接近我想要实现的目标。

主要区别在于它不是让原始请求等待，而是取消它，获取所需的值，然后创建一个与原始请求具有相同设置的新请求。

$(document).ajaxSend(function (ev, req, opts) {
  if (localStorage.foo) {
    // If value "foo" is available, add it to the headers
    req.setRequestHeader('foo', localStorage.foo);
  } else {
    // Otherwise cancel the original request, then get "foo",
    // and create a new request with the same settings as the original one
    req.abort();
    $.get({url: '/foo', global: false})
      .done(function (data, textStatus, req) {
        // "foo" is received
        localStorage.foo = data;
      })
      .then(function () {
        $.ajax(opts);
      });
  }
});

完美运行。如果有人找到了一个更好的解决方案，可以直接使用原始请求，我很乐意编辑这个答案并改进它。

谢谢！

Answer 2

我认为您需要使用$.ajax 的beforeSend 选项，如果该值存在于localStorage 中，您可以从那里返回false 以停止请求。

这意味着您必须始终使用低级别的$.ajax 方法，也许您可​​以为$.get、$.post、$.getJSON 等制作自己的一组包装器。

Answer 3

我找到了一个不需要像 Pensierinmusica 的回答那样中止原始请求的解决方案。相反，原始 AJAX 调用的 xhr 对象的 send 方法被覆盖，然后可以稍后调用带有参数的原始发送，例如另一个 AJAX 请求完成。看到这个答案：https://stackoverflow.com/a/30263533