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