封装原生ajax

封装ajax

//通过url获取数据
_getData = ({
    url,
    para={},
    contentType,
    beforeSend,
    type="POST",
}) => {
    console.log(para, 'para')
    if (!url) throw Error('the url is required');
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                    var response = typeof xhr.response === 'string' ? JSON.parse(xhr.response) : xhr.response;
                    resolve(response);
                } else {
                    reject(xhr.response);
                }
            }
        }
        //拼接参数
        function formatParams(data){
            if(typeof data === 'string'){
                //如果传入的是个字符串就直接发送
                return data;
            }
            var arr=[];
            for(var name in data){
                arr.push(encodeURIComponent(name)+"="+encodeURIComponent(data[name]));
            }
            // arr.push(("v="+Math.random()).replace(".",""));
            return arr.join("&");
        }
        if(type.toUpperCase() === 'GET' || type.toUpperCase() === 'DELETE'){
            xhr.open(type, Object.keys(para).length > 0 ? (url+'?'+formatParams(para)) : url, true);
            //这里可以在发送请求之前设置请求头
            beforeSend && beforeSend(xhr);
            if (contentType) {
                xhr.setRequestHeader('Content-Type', contentType);
            }
            xhr.send(null);
        }else{
            if(type.includes('post')){
                type = 'POST';
            }
            xhr.open(type, url, true);

            //这里可以在发送请求之前设置请求头
            beforeSend && beforeSend(xhr);
            //处理请求数据时传入的参数
            let formData = null;
            if (contentType) {
                formData = JSON.stringify(para);
                xhr.setRequestHeader('Content-Type', contentType);
            } else {
                if(typeof para === 'string'){
                    //如果传入的是个字符串就直接发送
                    formData = para;
                }else{
                    formData = new FormData();
                    for (let [key, value] of Object.entries(para)) {
                        if (value) {
                            formData.append(key, value);
                        }
                    }
                }
            }

            xhr.send(formData);
        }

    });
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值