[JavaScript知识库]重写post和get方法

一、重写jQuery的get请求

对ajax中的get方法进行重写

1.首先得知道get请求需要传递的参数

? url,

? data

? header

? success/error

2.其次知道在get方法中传递这些参数的作用

let xhr = new XMLHttpRequest()

? url表示请求的地址

? data：表示传递进去的数据，get请求的数据是放在url中，需要给url做一个与data的拼接

? url = url+'?'+Qs.stringify(data)

xhr.open('GET',url)

? header:表示请求的头部，包括获取的令牌,在open和send之间

for(var i in headers){
let v = header[i];
}

xhr.send()

success:表示请求成功之后的一个回调

success.call(this,resp)

3.然后再将全部代码写出

let jQuery = {};
(function() {
    $.get = function({
        url,
        data = {},
        headers = {},
        success
    }) {
        let xhr = new XMLHttpRequest();
        url = url + "?" + Qs.stringify(data);
        xhr.ope n('GET', url);
        //对头部信息进行一个遍历
        for (let i in headers) {
            let k = hearders[i];
            xhr.setRequestHeaders(i, k);
        }
        xhr.send();
        //请求成功后，成功的回调函数
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                //将返回的结果进行转换，将其转换成对象
                let reps = Json.parse(xhr.response);
                success.call(this, reps);
            }

        }
    }
})(jQuery);

测试的HTML页面如下

<script>
    let url = "当前测试的接口";
    let token =
        "xxxx";
    jQuery.get({
        url,
        headers: {
            "Authorization": token
        },
        success: function(res) {
            console.log('结果', res);
        }
    })
</script>

二、重写jQuery中post请求

对jQuery中的post请求进行重写

我们知道，在post请求中，数据是存放在请求体中，下面是我写的重写的post请求，但是感觉不太对，希望各位批评指正

// 重写post请求
let jQuery = {};
(function($) {
    $.post = function({
        url,
        // params = {},
        data = {},
        headers = {},

        success

    }) {
        // 初始化xhr
        let xhr = new XMLHttpRequest();
        // 初始化请求头

        xhr.open('POST', url);


        for (let k in headers) {
            let v = headers[k];
            xhr.setRequestHeader(k, v);
        }
        // 初始化请求体
        // xhr.setRequestHeader("Authorization",token);
        xhr.send(JSON.stringify(data));
        // 监听响应
        xhr.onreadystatechange = function() {
            if (this.readyState === 4 && this.status === 200) {
                let resp = JSON.parse(this.response);
                success.call(this, resp);
            }            
            }
        }


    }
})(jQuery);

html代码：

<script>
    let url = "测试接口";
    let data = {
        id: 100,
        name: 'zs',
        introduce: 'beautiful',
        url,
        status: 'sss'
    }
    let json = 'application/x-www-form-urlencoded';
    let token = "xxx"
    jQuery.post({
        url,
        data,
        headers: {
            "Authorization": token,
            'Content-Type': json
        },
        success: function(res) {
            console.log(data);
            console.log("结果", res);
        }

    })
</script>

?