function doXHR() {
var xhr = new XMLHttpRequest();
xhr.open('GET','https://jsonplaceholder.typicode.com/posts');
xhr.send();
xhr.onreadystatechange = () => {
console.log('ready state change');
};
}
doXHR();
console.log('done');
这段代码会导致浏览器启动一个AJAX请求,但在该函数的什么位置请求实际上开始？根据这篇文章：https://blog.raananweber.com/2015/06/17/no-there-are-no-race-conditions-in-javascript/
[Calling
xhr.onreadystate()aftersend()] is possible,because the HTTP request is only executed after the current scope has ended its tasks. This enables the programmer to set the callbacks at any position he wishes. As JavaScript is single-threaded,the request can only be sent when this one single thread is free to run new tasks. The HTTP request is added to the list of tasks to be executed,that is managed by the engine.
但是当我在发送调用之后,在devtools中添加一个断点：
我得到一个网络请求,虽然处于挂起状态：
在断点处,XHR的readystate是1,它是XMLHttpRequest.OPENED.根据MDN的文档,XMLHttpRequest.OPENED意味着xhr.open()已被调用：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState
但是,如果我注释掉xhr.send(),以便只调用.open()：
然后我没有待处理的网络请求：
想到我可能需要结束的函数范围才能将请求实际发送出去,我将断点移至函数调用之后(并修改了该代码以查看XHR readyState)：
但是我仍然得到待处理的网络请求：
看起来调试器不仅可以冻结代码执行,还可以任何网络请求.这是有道理的,因为您不想在断点时完成网络请求,但这也使得无法确定网络请求何时实际启动.
我的问题是,请求何时实际发送出去？调用xhr.send()只是设置请求,但要求函数范围在请求启动之前结束？ xhr.send()在函数范围结束之前立即启动请求吗？还是还有什么事情在这里？
解决方法
send.
您链接到的博客的作者是正确的,没有任何竞争条件,但这不会阻止你的事情发生无序.一个例子是如果您加载多个< script>标签中的async = true设置在它们上.在这种情况下,如果一个脚本依赖于另一个脚本,则可能会遇到一个不可预测的事件序列(与竞争条件非常相似)的情况,因为两个异步事件在不同的时间完成.
确实可以在调用send之后设置onreadystatechange,因为即使请求请求立即失败,事件也不会在函数范围完成之前被调度.这里的延迟不是在调度网络请求,而是在调度事件时说网络请求完成.
重要的是要注意,网络本身不是在JavaScript中处理的,而是由本机代码的浏览器实现,而且可以是多线程的(尽管我不知道是否是).这意味着浏览器完全有能力在JavaScript运行时处理网络任务.