js XMLHttpRequest 对象

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

前言

与后台进行接口请求时从最开始使用的xhr 到 ajax ，到现在封装好的第三方的组件。基本都是通过 XMLHttpRequest 对象。所有的浏览器基本都通过 XMLHttpRequest 构造函数原生支持 XHR 对象。

使用 XHR 对象

• 请求准备：首先调用 open(“method”，“url”，“isAsync”) 方法。可以看到该方法接收 3个参数，请求类型，请求 URL和请求是否异步。调用 open 方法只是在发送请求钱做准备，当调用 send() 方法时才会真正发送请求。
• 发送请求：send(data) 方法接收一个参数，是作为请求体发送的数据，若无需发送请求体则必须传 null 值。这样请求就会发送到服务器上。
• 接收响应：根据响应的内容类型使用响应的响应体接收比如 responseText 对应文本， responseXML 接收的XML文档
• 响应状态 status ，请求成功 200，或其他失败错误码如 400，500 等等。当然还有响应状态描述 statusText，即可能携带返回的信息。

完整的 xhr 请求代码：

let xhr = new XMLHttpRequest();
xhr.open("get","/api/user/list", false);
xhr.send(null)
//首先必须先判断状态码
if((xhr.status>=200 && xhr.status <300) || xhr.status ==304) {
  result = xhr.responseText;
}else {
  // 请求失败
}

一般请求成功的状态码是 2XX 。而状态码 304 是从浏览器缓存中直接获取的，资源未修改，所以也是表示请求成功。

在上面的例子中可以看到使用的是同步请求。但是一般如果没有类似多层请求的场景最好使用异步请求，这样就可以不堵塞 js 代码的执行。

readystate 属性

xhr 对象有一个 readystate 属性，表示当前请求的所处的阶段：

• 0：未初始化阶段，即还未调用 open 方法
• 1：已打开阶段，即已调用 open方法但未调用 send 方法
• 2：已发送，已调用 send 方法但未接收到响应
• 3：接收中，
• 4：完成所有响应的接收

所以一般只需关心 readyState=4 的值表示整个请求已结束。

let xhr = new XMLHttpRequest();
xhr.onreadystatechange =()=>{
  if(xhr.status==4) {
    if((xhr.status>=200 && xhr.status <300) || xhr.status ==304) {
  result = xhr.responseText;
}else {
  // 请求失败
}
  }
}

超时设置

在 IE8中 XHR 多了 timeout 属性，表示发送请求后等待多少毫秒如果无响应就中断请求。这样就会在请求超出这个时间就会出发 timeout 事件，并且调用 ontimeout 事件处理程序。

xhr.timeout=3000;
xhr.ontimeout = (){
  console.log('request timeout')
}