最严谨的ajax请求封装

Posted 2021-09-13 蚂蚁

一、封装ajax
封装最严谨的ajax，可直接复制引用
ajax.js

function sendAjax(obj){

/ 先判断url是否传入
if(!obj.url){
    / 没有传
    throw new Error(\'地址必填\') / 抛出自定义错误
}
/ 传入了之后需要验证url是否是字符串
if(Object.prototype.toString.call(obj.url) !== \'[object String]\'){
    throw new Error(\'地址必须是字符串\')
}
/ 判断请求方式是否传入
if(!obj.method){
    obj.method = \'get\'
}
/ 传入了 - 验证是否是get或post
if(obj.method.toLowerCase()!==\'get\' && obj.method.toLowerCase()!==\'post\'){
    throw new Error(\'请求方式必须是get或post\')
}
/ 判断async是否传入
if(obj.async === undefined){
    obj.async = true
}
/ 判断类型
if(Object.prototype.toString.call(obj.async) !== \'[object Boolean]\'){
    throw new Error(\'async必须是布尔值\')
}
/ 判断是否传入success
if(!obj.success){
    obj.success = function(){}
}
/ 判断是否是函数
if(Object.prototype.toString.call(obj.success) !== \'[object Function]\'){
    throw new Error(\'success必须是函数\')
}   
if(!obj.error){
    obj.error = function(){}
}
if(Object.prototype.toString.call(obj.error) !== \'[object Function]\'){
    throw new Error(\'error必须是函数\')
}
/ 判断数据是否传入
var str = \'\';
if(obj.data){
    / 判断类型
    if(Object.prototype.toString.call(obj.data) === \'[object String]\'){
        str = obj.data
    }else if(Object.prototype.toString.call(obj.data) === \'[object Object]\'){
        / 对象要处理成字符串
        var f = \'\';
        for(var attr in obj.data){
            str += f + attr + \'=\' + obj.data[attr]
            f = \'&\'
        }
    }else{
        throw new Error(\'非法数据\')
    }
    / 如果是get请求，需要将数据拼接在地址后
    if(obj.method.toLowerCase() === \'get\'){
        obj.url += \'?\' + str
    }
}
/ 判断希望请求回来的数据格式
if(!obj.dataType){
    obj.dataType = \'json\'
}
/ 如果传了
if(obj.dataType.toLowerCase()!==\'json\' && obj.dataType.toLowerCase()!==\'text\' && obj.dataType.toLowerCase()!==\'xml\'){
    throw new Error(\'dataType非法\')
}
/*
{
    url:\'\',
    method:\'\',
    data:\'\',
    async:\'\',
    success:function(){},
    error:\'\',
    dataType:\'text/json/xml\'
}
*/
var xhr = new XMLHttpRequest;
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(parseInt(xhr.status/100) === 2){
            / 确定要不要转对象
            switch(obj.dataType.toLowerCase()){
                case \'json\':
                    var res = xhr.responseText;
                    res = JSON.parse(res)
                break;
                case \'xml\':
                    var res = xhr.responseXML;
                break;
                case \'text\':
                    var res = xhr.responseText;
                break;  
            }   
            obj.success(res)
        }else{
            obj.error()
        }
    }
}
xhr.open(obj.method,obj.url,obj.async)
if(obj.method.toLowerCase() === \'post\' && obj.data){
    / 设置请求头
    xhr.setRequestHeader(\'content-type\',\'application/x-www-form-urlencoded\')
    xhr.send(str)
    return
}
xhr.send()

}

function promiseAjax(obj){

return new Promise(function(resolve,reject){
    / 先判断url是否传入
    if(!obj.url){
        // 没有传
        throw new Error(\'地址必填\') /抛出自定义错误
    }
    /传入了之后需要验证url是否是字符串
    if(Object.prototype.toString.call(obj.url) !== \'[object String]\'){
        throw new Error(\'地址必须是字符串\')
    }
    / 判断请求方式是否传入
    if(!obj.method){
        obj.method = \'get\'
    }
    / 传入了 - 验证是否是get或post
    if(obj.method.toLowerCase()!==\'get\' && obj.method.toLowerCase()!==\'post\'){
        throw new Error(\'请求方式必须是get或post\')
    }
    / 判断async是否传入
    if(obj.async === undefined){
        obj.async = true
    }
    / 判断类型
    if(Object.prototype.toString.call(obj.async) !== \'[object Boolean]\'){
        throw new Error(\'async必须是布尔值\')
    }

    / 判断数据是否传入
    var str = \'\';
    if(obj.data){
        / 判断类型
        if(Object.prototype.toString.call(obj.data) === \'[object String]\'){
            str = obj.data
        }else if(Object.prototype.toString.call(obj.data) === \'[object Object]\'){
            / 对象要处理成字符串
            var f = \'\';
            for(var attr in obj.data){
                str += f + attr + \'=\' + obj.data[attr]
                f = \'&\'
            }
        }else{
            throw new Error(\'非法数据\')
        }
        / 如果是get请求，需要将数据拼接在地址后
        if(obj.method.toLowerCase() === \'get\'){
            obj.url += \'?\' + str
        }
    }
    / 判断希望请求回来的数据格式
    if(!obj.dataType){
        obj.dataType = \'json\'
    }
    / 如果传了
    if(obj.dataType.toLowerCase()!==\'json\' && obj.dataType.toLowerCase()!==\'text\' && obj.dataType.toLowerCase()!==\'xml\'){
        throw new Error(\'dataType非法\')
    }
    /*
    {
        url:\'\',
        method:\'\',
        data:\'\',
        async:\'\',
        success:function(){},
        error:\'\',
        dataType:\'text/json/xml\'
    }
    */
    var xhr = new XMLHttpRequest;
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            if(parseInt(xhr.status/100) === 2){
                / 确定要不要转对象
                switch(obj.dataType.toLowerCase()){
                    case \'json\':
                        var res = xhr.responseText;
                        res = JSON.parse(res)
                    break;
                    case \'xml\':
                        var res = xhr.responseXML;
                    break;
                    case \'text\':
                        var res = xhr.responseText;
                    break;  
                }   
                resolve(res)
            }else{
                reject()
            }
        }
    }
    xhr.open(obj.method,obj.url,obj.async)
    if(obj.method.toLowerCase() === \'post\' && obj.data){
        / 设置请求头
        xhr.setRequestHeader(\'content-type\',\'application/x-www-form-urlencoded\')
        xhr.send(str)
        return
    }
    xhr.send()
})

}

技术支持：微信刷步数