Skip to content

24 网络请求

实际开发中尽可能用fetch

XHR

  • xhr XMLHttpRequest

    javascript
    let xhr = new XMLHttpRequest()
    xhr.open('get','资源地址',false)//第三个参数 是否开启同步
    xhr.send(null)//发送请求数据 ,无需请求体则 传递null
    xhr.readyState //
    // 0:未初始化(Uninitialized)。尚未调用 open()方法。
    // 1:已打开(Open)。已调用 open()方法,尚未调用 send()方法。
    // 2:已发送(Sent)。已调用 send()方法,尚未收到响应。
    // 3:接收中(Receiving)。已经收到部分响应。
    // 4:完成(Complete)。已经收到所有响应,可以使用了。
  • abort() //取消异步请求 同时清除引用

  • setRequestHeader()//设置请求头 跨域返回空

  • getAllResponseHeaders()//获取所有请求头 跨域返回空

  • getResponseheaders('XX')//获取XX请求头

  • FormData类型 append方法添加数据

  • 超时timeout

  • 进度事件 Progress Events

    javascript

event事件 target其属性是 XHR 包含额外属性lengthCoputable:布尔值 进度信息是否可用 position:接收到的字节数 toalSize:响应头部字节总数 用户提供的数据字节数


#### 预检请求  

- 先向服务器发送一个‘预检’请求,这个请求使用的OPTIONS方法并带有:Origin,请求方法,请求头
- 预检请求会有缓存 过期后才会再次发送 预检请求

#### 凭据请求

- 默认情况 跨域请求 不提供凭证(cookies,HTTP认证,客户端 SSL证书);可以声明withCredentials 为true表明 请求会发送数据

#### 替代跨域技术 利用dom特性

- 图片探测
- 利用img标签最早实现跨域的一种技术
- 缺点:只能单向在服务器获取响应内容 单向通信;
- JSONP
- 包括回调 与 数据;借用script标签 实现;
- 缺点 安全性较差 ,无法界定请求失败 h5设定标准 onerror 但没有任何浏览器实现?(2022年)

#### Fetch

- 可以加载json
- 加载 blob
- 加载 text
- 中断请求 
```javascript
let abortController = new AbortController()
fetch('xx/xxx/',{method:'POST',signal:abortController,    {page:1}).then(res=>res.json()).then(res=>console.log(res))
setTimeout(()=>abortController.abort(),5000)

Header 对象

  • 方法 has get delete set keys values entires append(与set类似)