XMLHttpRequest 对象发送请求的步骤

布满荆棘的人生 2023-06-30 06:57 43阅读 0赞

关于原生 XMLHttpRequest 发送请求可以做的一些事情。

>     目前 XMLHttpRequest 实列是被所有浏览器支持的。

首先创建一个 XHR 对象实例。

const request = new XMLHttpRequest()

之后可以配置一些 返回值类型、超时时间、跨域请求携带COOKIE之类的。

request.responseType = responseType
     request.timeout = timeOut
     request.withCredentials = withCredentials

调用 XHR 对象的 open() 方法， 传入请求类型‘GET'/'POST' 之类的， 请求地址、 async 的值为 boolean 类型的。

request.open(method, url, true)

之后可以为 XHR 对象 添加时间处理器  **onreadystatechange ，** 可以针对请求的一些状态来做一些处理。

request.onreadystatechange = function handleLoad() {
          if (request.readyState !== 4) {
            return
          }
          if (request.status === 0) {
            return
          }
          // 更多的一些骚操作
        }

还有一些 错误处理、超时处理之类的

// 错误处理
        request.onerror = function handleError() {
          reject(createError('Network Error', config, null, request))
        }
    
        // 超时处理
        request.ontimeout = function handleTimeout() {
          reject(createError(`Timeout of ${timeOut} ms exceeded`, config, 'ECONNABORTED', request))
        }

然后会做一点简单的 xsrf 防御之类的，关于xsrf 防御，通常是服务端在客户端种下一个 cookie ，cookie 的值是后端出的，然后客户端在发请求的时候， 在请求头里面添加上与后端协定好的字段，把 cookie 的值填充进去，这样后端收到请求的时候会看看请求头里面有没有协定好的字段，然后值是不是对的上，就可以防御到跨站攻击拉。

// 这里先读到 cookie 然后把 cookie 添加到 headers 的配置里面，后面配置头部的时候会一起加进去 
    if ((withCredentials || isURLSameOrigin(url!)) && xsrfCookieName) {
          const xsrfValue = cookie.read(xsrfCookieName)
          if (xsrfValue && xsrfHeaderName) {
            headers[xsrfHeaderName] = xsrfValue
          }
        }

配置头部， 因为之前有一个存放 Header 配置的  headers 对象，所以在 xsrf 防御的时候会先把配置的 header 名字和值加到 headers 对象里面，现在直接循环出来统一配置就好拉。

Object.keys(headers).forEach(name => {
          // 判断一下 如果 data = null 就没必要配置 headers 的 content-type 了
          if (data === null && name.toLowerCase() === 'content-type') {
            delete headers[name]
          } else {
            request.setRequestHeader(name, headers[name])
          }
        })

最后发送这个请求

request.send(data)

这个请求自己封装了一下，返回一个 **Promise** 对象，所以会出现 **reject** 方法， **resolve** 的调用在 **onreadystatechange** 里面做处理，请求状态成功了之后会去调 **resolve** 的，示例代码里面只是没贴出来，**这里只是记录一下 XHR 对象发送请求大概要做的步骤。**

那之后可以根据 Promise 链式调用的特性去做请求拦截和响应拦截，在加上取消请求的方法，还有上传下载的监控之类的，最后能够得到一个 小Axios........

其实上面的代码也是参考了 Axios 做的一个封装。