[ 造轮子 ] 手动封装 AJAX （二） —— ES6 版

• 相比前一版本除了使用 ES6 与法外还有以下改动
• 现在不需要按顺序输入参数
• 会针对 GET 和 POST 做不同的数据处理
• 可以自定义设置请求头
• 增加了参数数据类型的判断

调用代码示例

ajax({
    url:'1.json',
    method:'post',
    resType:'json',
    headers:{
        id:465,
        name:123,
        key:798
    },
    data:{
        name: "yhtx",
        id: "1997"
    },
    success(res){
        console.log(res);
    },
    error(){
        console.log('error')
    }
})

调用效果图

核心代码没有多少变化，因为只有这一种使用方法

//不支持低版本浏览器
const ajax = ({url,method="GET",data={}, async = true ,success,error,resType="",headers={}})=>{
    //错误判断 url为必填项
    if(!url || url === ''){
        throw new Error('请求地址不能为空');
    }
    
    //变量声明
    let dataArr = [];
    let dataStr = "";
    let xhr = new XMLHttpRequest();//不兼容低版本浏览器
    let formData = new FormData();
    //将小写转换成大写
    method = method.toUpperCase();
    
    //初始化data
    switch (method){
        case 'POST':
            for(let key in data){
                formData.append(`${key}`,`${headers[key]}`);//将data转换成 FormData 对象的字段
            }
        break;
        case 'GET':
            for(let key in data){
                dataArr.push(`${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`);
            }
            strData=dataArr.join('&');
        break;
    }
    
    
    //设置返回数据格式            
    if(typeof async === 'boolean' && async){//如果设置了同步就不能设置返回数据格式
        if(typeof resType === 'string'){
            xhr.responseType = resType; // 在不设置responseType的时候默认为 text
        }else{
            throw new Error('设置返回数据格式时，请使用字符串类型');
        }
    }
    
    //发起请求
    switch (method){
        case 'POST':
            xhr.open(method , url , async);
        break;
        case 'GET':
            xhr.open(method , `${url}?${strData}` , async);
        break;
    }
    //设置请求头 必须在 xhr.open() 后才可以
    //判断是否设置
    if(typeof headers === 'object' && Object.keys(headers).length !== 0){
        //循环 headers 设置请求头
        for(let key in headers){
            xhr.setRequestHeader(`${key}`,`${headers[key]}`);
            // xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        }
        //console.log(Object.keys(headers));//返回一个数组，数组成员是对象中所有的键
        //console.log(Object.values(headers));//返回一个数组，数组成员是对象中所有的值
    }
    
    xhr.send(formData);//发送数据
    
    //监听状态
    xhr.onreadystatechange = ()=>{
        if(xhr.readyState === 4){
            let res = xhr.response;
            if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
                typeof success === 'function' && success(res);
            }else{
                typeof error === 'function' && error(res);
            }
        }
    }
}

ajax({
    url:'1.json',
    method:'post',
    resType:'json',
    headers:{
        id:465,
        name:123,
        key:798
    },
    data:{
        name: "yhtx",
        id: "1997"
    },
    success(res){
        console.log(res);
    },
    error(){
        console.log('error')
    }
})