成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

jhhfft / 2152人閱讀

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

相比前一版本除了使用 ES6 與法外還有以下改動

現(xiàn)在不需要按順序輸入?yún)?shù)

會針對 GET 和 POST 做不同的數(shù)據(jù)處理

可以自定義設(shè)置請求頭

增加了參數(shù)數(shù)據(jù)類型的判斷

調(diào)用代碼示例

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")
    }
})

調(diào)用效果圖

核心代碼沒有多少變化，因為只有這一種使用方法

//不支持低版本瀏覽器
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();
    //將小寫轉(zhuǎn)換成大寫
    method = method.toUpperCase();
    
    //初始化data
    switch (method){
        case "POST":
            for(let key in data){
                formData.append(`${key}`,`${headers[key]}`);//將data轉(zhuǎn)換成 FormData 對象的字段
            }
        break;
        case "GET":
            for(let key in data){
                dataArr.push(`${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`);
            }
            strData=dataArr.join("&");
        break;
    }
    
    
    //設(shè)置返回數(shù)據(jù)格式            
    if(typeof async === "boolean" && async){//如果設(shè)置了同步就不能設(shè)置返回數(shù)據(jù)格式
        if(typeof resType === "string"){
            xhr.responseType = resType; // 在不設(shè)置responseType的時候默認(rèn)為 text
        }else{
            throw new Error("設(shè)置返回數(shù)據(jù)格式時，請使用字符串類型");
        }
    }
    
    //發(fā)起請求
    switch (method){
        case "POST":
            xhr.open(method , url , async);
        break;
        case "GET":
            xhr.open(method , `${url}?${strData}` , async);
        break;
    }
    //設(shè)置請求頭 必須在 xhr.open() 后才可以
    //判斷是否設(shè)置
    if(typeof headers === "object" && Object.keys(headers).length !== 0){
        //循環(huán) headers 設(shè)置請求頭
        for(let key in headers){
            xhr.setRequestHeader(`${key}`,`${headers[key]}`);
            // xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        }
        //console.log(Object.keys(headers));//返回一個數(shù)組，數(shù)組成員是對象中所有的鍵
        //console.log(Object.values(headers));//返回一個數(shù)組，數(shù)組成員是對象中所有的值
    }
    
    xhr.send(formData);//發(fā)送數(shù)據(jù)
    
    //監(jiān)聽狀態(tài)
    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")
    }
})

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100449.html

相關(guān)文章

  • [ 造輪子 ] 手動封裝 AJAX （一） —— 基礎(chǔ)版

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

    cc17 評論0 收藏0

  • JavaScript 異步

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

    tuniutech 評論0 收藏0

  • [譯] 前端攻略-從路人甲到英雄無敵二：JavaScript 與不斷演化的框架

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

    roadtogeek 評論0 收藏0

  • js速記

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

    MageekChiu 評論0 收藏0

  • 初試面向?qū)ο缶幊?/b>

    摘要：面向?qū)ο缶幊堂嫦蜻^程是一門面向過程的語言，也就是側(cè)重點是實現(xiàn)一件事的步驟。面向?qū)ο笠允挛餅橹行模瑐?cè)重于完成某件事所需要的事物的特征和行為的設(shè)計。 面向?qū)ο缶幊?面向過程 javascript是一門面向過程的語言，也就是側(cè)重點是實現(xiàn)一件事的步驟。 特點：有良好的可擴(kuò)展性和重用性，降低了代碼間的耦合度，接近日常思維。 面向?qū)ο? 以事物為中心，側(cè)重于完成某件事所需要的事物的特征和行為的...

    cikenerd 評論0 收藏0

發(fā)表評論

0條評論

jhhfft

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<