掌握 XMLHttpRequest ，了解请求库的实现机制

先做个尝试

为了确保没有跨域的错误，使用浏览器打开百度首页，然后打开控制台，将如下代码输入控制台并执行

var type = "GET" 
var isAsync = true 
var url = "https://www.baidu.com/" 

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = stateChange 
xhr.open(type, url, isAsync)  
xhr.send()  

function stateChange() {
  // 如果你想打个断点了解的更清楚一点，解开下一行的注释
  // debugger
  var state = xhr.readyState
  if(state === 1) {  
    xhr.setRequestHeader("myProperty", "How XMLHttpRequest works?")
  } else if (state == 4) {  
    var status = xhr.status
    if (status == 200){
      var response = xhr.response
      console.log(response)
    }
  }
}

这样就使用 XMLHttpRequest 实现了一个简单的GET请求

参数、方法与状态码说明

var type = "GET"  // 请求方式
var isAsync = true  // 是否为异步，不传参时默认异步
var url = "https://www.baidu.com/"  // 请求路径

var xhr = new XMLHttpRequest()  // 新建请求实例
xhr.onreadystatechange = stateChange  // 请求过程中的状态改变回调
xhr.open(type, url, isAsync)  // 初始化请求参数
xhr.send()  // 发送请求，如果是 POST、PUT 请求需传入请求体

// 状态改变回调与状态码所对应的行为
function stateChange() {
  var state = xhr.readyState

    // 注意：状态码为 0 时，不会触发本回调方法
    // 初始化状态。XMLHttpRequest 对象已创建
    // 或已被 abort() 方法重置。

  if(state === 1) {  
    // open() 方法已调用，但是 send() 方法未调用。
    // 请求还没有被发送。

  } else if(state === 2) {  
    // Send() 方法已调用，HTTP 请求已发送到 Web 服务器。
    // 未接收到响应。

  } else if(state === 3) {  
    // 所有响应头部都已经接收到。
    // 响应体开始接收但未完成。

  } else if (state==4) {  
    // HTTP 响应已经完全接收。
  }
}

超时处理（取消请求同理）

var timeout = 20 * 1000  // 20秒后超时
var isTimeout = false

var timeoutHandler = setTimeout(()=> {
  isTimeout = true
  xhr.abort()  
  // 把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，
  // 并且取消所有未决的网络活动。
}, timeout)

function stateChange() {
  var state = xhr.readyState
  if (isTimeout) {  
    // 请求超时
  } else if(state == 4) {
    clearTimeout(timeoutHandler)
  }
}

设置请求头

function stateChange() {
  var state = xhr.readyState
  if(state === 1) {  
    // open() 方法已调用，但是 send() 方法未调用。

    xhr.setRequestHeader("Pragma", "no-cache")
    xhr.setRequestHeader("content-type", "application/json")
  }
}