基于js方法XMLHttpRequest封装方法

XMLHttpRequest()对象介绍

XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。
官方文档 https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

• 基本使用方法

首先创建XMLHttpRequest实例对象
调用open和send方法
监听实例对象响应获取服务器响应数据

let xhr = new XMLHttpRequest()
let url = 'api/shoplist'
xhr.open = ("GET", url, true)
xhr.send(null)
xhr.onreadystatechange = function (){
    if(xhr.readyState === 4 && xhr.status === 200){
        return xhr.responseText
    }
}

XMLHttpRequest()封装流程

很多时候我们只需要开发一个简单地页面，不需要引入任何js库，这时接口请求用到 XMLHttpRequest 对象必不可少，那么封装一个好用的请求方法是理所应当的了。以下是我们比较习惯的请求方式，我们一起来封装一个吧！

• 解决浏览器兼容性问题

由于浏览器不同，一些老版本的浏览器可能存在兼容性问题所以我们需要解决一下兼容性问题

function newXhr() {
    let xhr
    if (XMLHttpRequest) {
        xhr = new XMLHttpRequest()
    } else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP")
    }
    return xhr
}

• 接收参数

url地址，method请求方式，type，返回结果格式，data，请求参数

function ajaxRequest(ajxaData){
    let {url, method, type, data} = ajxaData
    // 区分大小写，一律转成大写
    method = method.toUpperCase()
    // 解决浏览器兼容性
    let xhr = newXhr()
    return new Promise((resolve, reject) => {
        
    })
}

• 处理请求参数或数据格式

由于不同请求方式，请求参数或数据挂载方式不同，所以需要数据处理

// 解析query数据
function queryParse(query){
    let queryText = "";
    for(let key in query){
        queryText += `${key}=${query[key]}&`;
		}
    return queryText.slice(0,-1);
}

// 解析params数据
function paramsParse(params){
    let paramsText = ""
    for (let key in params) {
        paramsText += `${key}=${params[key]}&`
    }
    return paramsText.length > 0 ? "?" + paramsText : paramsText
}

• 根据不同请求方式实现代码不同

以下是实例的get和post请求
需要判断请求方式实现不同请求方法

    return new Promise((resolve, reject) => {
        // GET请求
        if (method === "GET") {
            url = url + paramsParse(data)
            xhr.open(method, url, true)
            xhr.send(null)
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    let data = JSON.parse(xhr.responseText)
                    resolve(data)
                } else {
                    reject({
                        status: xhr.status,
                        msg: '请求出错'
                    })
                }
            }
            return
        }
        // POST请求
        if(method === "POST"){
            xhr.open(method, url, true)
            xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
            xhr.send(queryParse(data))
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    let data = JSON.parse(xhr.responseText)
                    resolve(data)
                } else {
                    reject({
                        status: xhr.status,
                        msg: '请求出错'
                    })
                }
            }
            return
        }
    })

• 使用方法

使用方法类似于jquery中ajxa使用方法

ajaxRequest({
    url: "/api/shoplist",
    method: "get",
    data:{
        page: 1
    }
}).then(res => {
    console.log(res);
})

封装时需要注意method请求方式大小写，请求参数或数据处理，注意区分请求方式，请求数据分别处理，这样就完成了一个属于自己的axjx函数。