javascript - 如果另一个请求正在进行中，则对 ajax 请求进行排队

Question

我有一个应用程序，它在每个服务调用的响应中获取身份验证 token ，并且应该将前一个 token 作为下一个调用的参数发送，否则用户将未经授权。一旦 token 不匹配，所有其他调用都会失败。

为了确保 token 不匹配，我在屏幕上添加了加载程序，并在启动 ajax 调用后立即显示它们，并将加载覆盖层保留在屏幕上，直到未收到响应，否则用户可以单击在任何其他会导致另一个 ajax 调用的链接上。

但是，我仍然认为加载器机制很容易出现漏洞。有没有办法检查是否有任何 ajax 调用正在进行，然后对新的 ajax 调用进行排队，并且排队的调用将等待发起的响应，因为它需要从其响应返回的 token 作为其新的请求参数。

Answer 1

我刚刚参与了一个项目，我就这样做了。假设您已经有了 AJAX 函数 foo.ajax( url, callback )。

您需要一种方法来打包 AJAX 请求中发出的所有详细信息。因此，您创建一个函数 foo.ajaxRequest(url) 和一个请求列表 foo.requestList = [] 并像这样使用它们:

foo.ajaxRequest = function( url ) {
    foo.requestList.push(this);
    var callback = function( data ) {
        if ( foo.requestList.length ) {
           foo.requestList.shift().run( data );
        }
    }
    this.run = function( dataFromPreviousAjax ) {
        foo.ajax( url + "?key=" + dataFromPreviousAjax, callback );
    }
    if ( !foo.requestList.length ) {
        foo.ajax( url, callback ); 
    }
}

任何时候你想提出一些请求，你都可以写

new foo.ajaxRequest("http://stackoverflow.com/pingback.php");
new foo.ajaxRequest("http://stackoverflow.com/pingback.php");

现在假设第一个请求返回 key 12345，第二个请求现在将运行并调用 URL "http://stackoverflow.com/pingback.php?key= 12345”。

显然，您希望对 foo.ajaxRequest 内的回调函数中的返回值执行更多操作，但这应该可以帮助您入门。