axios篇（一） - xhr

2023-11-15 13:59:04

用XMLHttpRequest 封装请求：

需求/功能：

1、同axios一样，返回的是promise

2、请求参数：url, method方法默认为get(可传大小写)，param(挂在url上的参数)，data

Content-Type: 'application/x-www-formurlencoded;chartset=utf-8'，
用于键值对参数，参数的键只用=链接，参数之间用&链接
例如：name=%E5%B0%8F&age=12

Content-Type: 'application/json;chartset=utf-8'，
用于json字符串参数

Content-type:multipart/form-data
文件上传请求

3、处理传参param（?userName=‘xj’&id=‘1’）

4、发送请求（创建xhr，打开链接，初始化，发送请求）

5、监听请求，根据readyStatus判断是否请求结束，状态码去判断是否请求成功

1）status 响应状态码，如200，404
2）statusText 响应状态文本
3）readyStatus 标识请求状态的只读属性
0: 初始化 1 ：open之前 2 send之后 3 请求中 4 完成
4）onreadystatechange 绑定readyStatus改变的监听
5）responseType:响应数据类型，如json,得到响应后自动解析响应体数据
6）response: 响应结果体，类型取决于responseType
7）timeout: 指定超时时间，默认0，代表没有限制

function axios({
    url,
    method = 'GET',
    param = {},
    data = {}
}) {
    // 返回一个promise对象
    return new Promise((resolve, reject) => {
        // 处理method的大小写
        method = method.toUpperCase()

        // 如果是get，需要处理url
        let queryString = ''
        Object.keys(param).forEach(key => {
            queryString += `${key}=${param[key]}&`
        })
        if (queryString) {
            queryString = queryString.substring(0, queryString.length - 1)
        }
        url = `?${queryString}`

        // 1、执行异步ajax
        // 创建xhr
        let request = new XMLHttpRequest()
        // 打开链接，初始化，还没请求
        request.open(method, url, true)
        // 发送请求
        if (['GET', 'DELETE'].includes(method)) {
            request.send()
        } else if (['POST', 'PUT'].includes(method)){
            request.setRequestHeader('Content-Type', 'application/json;charset=utf8')
            request.send(JSON.stringify(data))
        }

        request.onreadystatechange = function() {
            // 如果请求没有完成，直接结束
            if (request.readyState !== 4) return

            const { status, statusText } = request
             // 2 请求成功调用resolve , 成功请求在[200, 300),
            if (status >= 200 && status < 300) {
                // 结果数据
                const response = {
                    status,
                    statusText,
                    data: JSON.parse(request.response)
                }
                resolve(response)
            } else {
                // 3 请求失败调用reject
                reject(new Error(`request error status is ${status}`))
            }
        }
    })
}

区分一般http请求和ajax请求：（F12可以看到，一般请求包括资源请求）

1、ajax也是一种http请求；
2、对服务器来讲，没有任何区别，区分在客户端
3、浏览器端发送请求：只有xhr和fetch才是http请求，其他的都是非ajax请求
4、浏览器收到接收到请求后：
一般请求：直接响应请求体，刷新后者跳转页面
ajax请求：不会对页面有任何的操作，只是调用监视的回调函数，并传入响应相关数据

码农公寓