在浏览器开发工具中检查 ajax 调用是同步的还是异步的

Posted 2023-02-22

【中文标题】在浏览器开发工具中检查 ajax 调用是同步的还是异步的

【英文标题】：To check if ajax call is synchronous or asynchronous in Browser Dev Tools

【发布时间】：2015-08-19 02:05:30

【问题描述】：

有没有办法在 Chrome 开发者工具或 Firebug 等浏览器开发工具中确认特定的 ajax 请求是异步的还是同步的。

对于ajax请求的HTTP Request Header没有指明是同步还是异步。

X-Requested-With:XMLHttpRequest

【参考方案1】：

不，你不能这样做，但你可以在控制台中运行它或将它添加到你的代码中

XMLHttpRequest.prototype.open = (function(open)
    return function(method, url, async, user, password) 
        console.log("xhr call: "+url +"isAsync: "+async);
        open.apply(this, arguments);
    ;
)(XMLHttpRequest.prototype.open);

它记录了信息：D 希望它有帮助

【参考方案2】：

我不知道你是否还在寻找答案，但我希望这会对某人有所帮助！

在 chrome 浏览器中导航到 rightClick/inspect/networkTab/xhr?将光标移动到处理您的请求的时间，如下图所示：

这是我的异步代码（默认 ajax）

`$.ajax(
    type: "GET",
    contentType: "application/json",          // data type of request
    url: //url,
    data: //data,
    dataType: "json",                             // data type of response
    success: function (result)   
        
        // some code here

    

);`

我对 localhost 进行了一系列 ajax 调用，每个调用都链接到前一个调用的响应。但是我得到了错误的输出，因为几乎同时发送了所有 ajax 请求，并且本应连续接收的响应（蓝色）被打乱了。下面的时序图完美地显示了这个问题（查看瀑布选项卡）。

这是我的同步调用代码（异步：在 ajax 中为 false）

$.ajax(
async: false,
type: "GET",
contentType: "application/json",          // data type of request
url: //url,
data: //data,
dataType: "json",                             // data type of response
success: function (result)   

    // some code here

);

现在如何知道 async: false 是否有效？

您可以看到异步模式下 ajax 调用的时间相互重叠，并且同步模式下的调用时间(async: false) 是明显分开的，因此证明同步调用 [async: false] 工作正常。如果时间仍然重叠，那么同步调用可能无法正常工作，这与我的情况不同。

【参考方案3】：

如果指定为同步，则所有 ajax 请求都是异步的，因此他们将其称为 异步 JavaScript 和 XML (AJAX)。要使 ajax 请求同步，您必须在类似这样的 XMLHTTPRequest 对象的 open 方法中传入 false

var xhr = new XMLHttPRequest();
xhr.open("POST", "file to get.php", false);

第三个参数指定为同步，但默认为true

【讨论】：

重新阅读问题，我希望它显示在 chrome 工具中。不想通过代码检查调用是异步还是同步。