针对原生JS、jQuery实现登录态而进行网络请求的封装

在这里我都使用了ES6新语法Class，这样会少很多代码（可以看作构造函数+原型链的语法糖）

运用Get、Set函数对XHR进行简单的封装
在每次请求前，添加Cookie相关属性，向Header中加入Token，然后对返回值先进行一边解析，因为我这里是服务端返回50001代表登录态失效
如果失效我会直接将页面跳转到login，这里我使用replace，因为我不想让用户带着未登陆的状态回到应用内
运用对obj对象的属性修改来封装jQuery-Ajax
将创建实例所传的obj拿到，然后和对XHR进行封装一样，对obj增加jQuery特有的Cookie相关属性，然后增加检测服务器登录态状态返回值的方法（50001就跳转到login页面）
这里因为jQuery有相关的回调函数complete和beforeSend，所以我就可以使用这两个函数传入的参数进行相关的Token的添加
这里要注意的是我使用了cookie和token两种方式进行登录态的检查，cookie为优先检查方式，token则在cookie失效后检查，这需要后端的配合
总的来说，主要思想代码里都体现了，这是我很久之前做原生项目所使用的封装方法，现在学完axios之后就可以用axios和axios拦截器了

class XMLHttp {
    #xmlhttp = new XMLHttpRequest();

    constructor() {
        this.#init();
    }

    #init = () => {
        this.#xmlhttp.withCredentials = true;
        this.#xmlhttp.onerror = function() {
            showToast('网络错误', 'false');
        }
    }

    open(method, url, async) {
        this.#xmlhttp.open(method, url, async);
        let t = window.localStorage.getItem('token');
        // console.log(t);
        if (t) {
            this.#xmlhttp.setRequestHeader('token', t);
        }
    }

    setRequestHeader(...args) {
        this.#xmlhttp.setRequestHeader(...args);
    }

    send(objStr = "") {
        this.#xmlhttp.send(objStr);
    }

    get readyState() {
        return this.#xmlhttp.readyState;
    }

    get status() {
        return this.#xmlhttp.status;
    }

    get response() {
        let res = JSON.parse(this.#xmlhttp.response);
        if (res.status == 50001) {
            window.localStorage.setItem('isOut', 'true');
            window.location.replace('login.html');
        }
        let t = this.#xmlhttp.getResponseHeader('token');
        // console.log(t);
        if (t) {
            window.localStorage.setItem('token', t);
        }
        return this.#xmlhttp.response;
    }

    /**
     * @param {{(): void;}} fun
     */
    set onreadystatechange(fun) {
        this.#xmlhttp.onreadystatechange = () => {
            if (this.#xmlhttp.readyState == 4 && this.#xmlhttp.status != 200) {
                showToast('网络错误', 'false');
            }
            fun();
        };
    }

    /**
     * @param {{(): void}} fun
     */
    set onerror(fun) {
        this.#xmlhttp.onerror = function() {
            showToast('网络错误', 'false');
            fun();
        };
    }
}

class Ajax {
    constructor(obj) {
        obj.xhrFields = {
            withCredentials: true
        };
        obj.crossDomain = true;
        this.#init(obj);
    }

    #init = (obj) => {
        obj.complete = function (XMLHttpRequest, textStatus) {
            var t = XMLHttpRequest.getResponseHeader('token');
            if (t) {
                window.localStorage.setItem('token', t);
            }
        };
        obj.beforeSend = function(XMLHttpRequest) {
            let t = window.localStorage.getItem('token');
            if (t) {
                XMLHttpRequest.setRequestHeader('token', t);
            }
        };
        // console.log(obj);
        let oSuccess = obj.success;
        obj.success = function(res) {
            if (res.status == 50001) {
                window.location.replace('login.html');
            }
            oSuccess(res);
        }
        $.ajax(obj);
    }
}