AJAX：为什么setTimeout多次记录xhr请求（回调）？

Question

我试图了解XMLHttpRequest和async的工作方式。在以下代码中，setTimeout在7s之后执行回调。我不确定为什么xhr.responsetype //true会记录3次？ （请参见屏幕截图）

var xhr = new XMLHttpRequest();

xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts')
xhr.send()

xhr.onreadystatechange = function(e) {
  setTimeout(function(){ 
   if(xhr.readyState == 4 && xhr.status == 200) {
    console.log('xhr.responseType')
    console.log(xhr.responseType == "")
   } else {
     console.log('YOUR XNJR Request failed')
   }
  }, 7000)
}
console.log('Logged after some time')

此外，如何将以上代码转换为async请求？

谢谢