jQuery:如何使ajaxSend在继续之前等待另一个Ajax响应? [英] jQuery: how to make ajaxSend wait for another Ajax response before proceeding?

问题描述

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

I'm using jQuery (v.3.0.0) and I need ajaxSend() to check if a value is present in localStorage, to add it in the outgoing request headers.

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

If the value is not present in localStorage, ajaxSend() should get this value with another Ajax request and then send the original request with the correct value in the headers.

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

让我们做一个代码示例.

Let's make a code example.

$(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的值之前发出的.

When foo is not available, the problem with the code above is that obviously the original request is sent out before the value of foo is retrieved.

有什么办法可以解决此问题并使它正常工作?

Is there any way to fix this and get it to work properly?

谢谢！

推荐答案

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

So far, this is the best solution that I could find. It's not perfect, and it does not exactly answer the original question, but it's a good workaround and gets very close to what I was trying to achieve.

主要区别在于，它无需取消原始请求，而是取消了它，而是获得了所需的值，然后创建了一个具有与原始请求相同设置的新请求.

The main difference is that instead of making the original request wait, it cancels it, it gets the desired value, and then it creates a new request with the same settings as the original one.

$(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);
      });
  }
});

它完美地工作.如果有人找到了一种更好的解决方案，可以直接使用原始请求，那么我将很乐意编辑此答案并加以改进.

It works perfectly. If someone finds out a better solution that allows to directly use the original request I'll be happy to edit this answer and improve it.

谢谢！

这篇关于jQuery:如何使ajaxSend在继续之前等待另一个Ajax响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！