[ 造輪子 ] 手動封裝 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')
    }
})