[ 造輪子 ] 手動封裝 AJAX （二） —— ES6 版

jhhfft 發布于2019-08-23 14:20 / 2149人閱讀

摘要：相比前一版本除了使用與法外還有以下改動現在不需要按順序輸入參數會針對和做不同的數據處理可以自定義設置請求頭增加了參數數據類型的判斷調用代碼示例調用效果圖核心代碼沒有多少變化，因為只有這一種使用方法不支持低版本瀏覽器錯誤判斷為必填項請求地址不

相比前一版本除了使用 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")
    }
})

云服務器 GPU云服務器造輪子一個封裝的Ajax類原生js封裝ajax js ajax 請求數據封裝

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100449.html

[ 造輪子 ] 手動封裝 AJAX （一） —— 基礎版

關于 AJAX 相信都用過，自己動手封裝的也肯定有不少，但應該都只是簡單的可以請求，不能設置同步異步以及返回的數據格式兼容低版本 IE5、IE6 可以使用 get 和 post 請求數據可以設置請求頭需要的思路以及語法都有了，需要小伙伴自己拓展哦可以設置返回數據格式，不設置為默認 get 請求的數據拼接我沒寫，有需要的可以自己加之后會有 ES6 語法的封裝敬請期待注：代碼使用 ES5...

cc17 2019-08-26 13:27 評論0 收藏0
JavaScript 異步

摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。寫一個符合規范并可配合使用的寫一個符合規范并可配合使用的理解的工作原理采用回調函數來處理異步編程。 JavaScript怎么使用循環代替(異步)遞歸問題描述在開發過程中，遇到一個需求：在系統初始化時通過http獲取一個第三方服務器端的列表，第三方服務器提供了一個接口，可通過...

tuniutech 2019-08-21 18:34 評論0 收藏0
[譯] 前端攻略-從路人甲到英雄無敵二：JavaScript 與不斷演化的框架

摘要：一般來說，聲明式編程關注于發生了啥，而命令式則同時關注與咋發生的。聲明式編程可以較好地解決這個問題，剛才提到的比較麻煩的元素選擇這個動作可以交托給框架或者庫區處理，這樣就能讓開發者專注于發生了啥，這里推薦一波與。本文翻譯自FreeCodeCamp的from-zero-to-front-end-hero-part。繼續譯者的廢話，這篇文章是前端攻略-從路人甲到英雄無敵的下半部分，在...

roadtogeek 2019-08-19 18:25 評論0 收藏0
js速記

摘要：相關最大的特性就在于直接操縱網頁上的節點，從而實現網頁的局部刷新而非全局刷新。該回調函數會在送回響應的時候被調用。當然了，如果瀏覽器不支持對象，會返回，在這時需要進行額外的處理。前言馬上就要參加一個團隊項目進行React的前端開發了。最近正在著手熟練React語法，然后發現本質上還是建立在對javascript的深刻理解上。市面上在js基礎上封裝出了非常多優秀的車輪，其中最被新手廣...

MageekChiu 2019-08-21 16:52 評論0 收藏0
初試面向對象編程

摘要：面向對象編程面向過程是一門面向過程的語言，也就是側重點是實現一件事的步驟。面向對象以事物為中心，側重于完成某件事所需要的事物的特征和行為的設計。面向對象編程面向過程 javascript是一門面向過程的語言，也就是側重點是實現一件事的步驟。特點：有良好的可擴展性和重用性，降低了代碼間的耦合度，接近日常思維。面向對象以事物為中心，側重于完成某件事所需要的事物的特征和行為的...

cikenerd 2019-08-22 15:46 評論0 收藏0