你真的了解XMLHttpRequest.open(method, url, async)中async么？

[jiefancis]

web前端想要使用原生js创建一个http请求，可以选择的方式有：sendBeacon(url, data)、XMLHttpRequest、fetch、WebSocket等，但是我们了解的最多的 还是XMLHttpRequest这个api，通过XMLHttpRequest创建一个http请求需要经过这几个步骤：

• 创建一个xhr对象
• 初始化请求（建立连接）
• 监听请求的状态变化
• 发送请求数据

在初始化请求时，文档中写到：同步请求，send()方法直到收到答复前不会返回。异步请求，send()方法请求后会立即返回；open(method, url, async)中的async的值true / false对程序的执行会产生什么影响呢？看下面的代码

• 异步

  
  var xhr = new XMLHttpRequest()
  xhr.open('get', 'https://www.baidu.com',true)
  xhr.onreadystatechange = function(){
  console.log('onreadystatechange', xhr.readyState)
  }
  xhr.send()
  console.log('end', xhr.readyState)

（在百度页面控制台中）执行结果为： end 1 onreadystatechange 2 onreadystatechange 3 onreadystatechange 4

- 同步

var xhr = new XMLHttpRequest() xhr.open('get', 'https://www.baidu.com',false) xhr.onreadystatechange = function(){ console.log('onreadystatechange', xhr.readyState) } xhr.send()

console.log('end', xhr.readyState)

（在百度页面控制台中）执行结果为： onreadystatechange 4 end 4

var xhr = new XMLHttpRequest() xhr.open('get', 'https://www.baidu.com',false) xhr.onreadystatechange = function(){ console.log('onreadystatechange', xhr.readyState) } console.log('end', xhr.readyState) xhr.send()

（在百度页面控制台中）执行结果为： end 4 onreadystatechange 4

通过同步的例子，发现同步请求，send方法后的逻辑将会阻塞，收到答复后程序才会继续往下执行；主线程上的同步请求很容易破坏用户体验