亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

[ 造輪子 ] 手動(dòng)封裝 AJAX （二） —— ES6 版

jhhfft / 2192人閱讀

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

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

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

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

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

增加了參數(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)用效果圖

核心代碼沒有多少變化，因?yàn)橹挥羞@一種使用方法

//不支持低版本瀏覽器
const ajax = ({url,method="GET",data={}, async = true ,success,error,resType="",headers={}})=>{
    //錯(cuò)誤判斷 url為必填項(xiàng)
    if(!url || url === ""){
        throw new Error("請(qǐng)求地址不能為空");
    }
    
    //變量聲明
    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 對(duì)象的字段
            }
        break;
        case "GET":
            for(let key in data){
                dataArr.push(`${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`);
            }
            strData=dataArr.join("&");
        break;
    }
    
    
    //設(shè)置返回?cái)?shù)據(jù)格式            
    if(typeof async === "boolean" && async){//如果設(shè)置了同步就不能設(shè)置返回?cái)?shù)據(jù)格式
        if(typeof resType === "string"){
            xhr.responseType = resType; // 在不設(shè)置responseType的時(shí)候默認(rèn)為 text
        }else{
            throw new Error("設(shè)置返回?cái)?shù)據(jù)格式時(shí)，請(qǐng)使用字符串類型");
        }
    }
    
    //發(fā)起請(qǐng)求
    switch (method){
        case "POST":
            xhr.open(method , url , async);
        break;
        case "GET":
            xhr.open(method , `${url}?${strData}` , async);
        break;
    }
    //設(shè)置請(qǐng)求頭 必須在 xhr.open() 后才可以
    //判斷是否設(shè)置
    if(typeof headers === "object" && Object.keys(headers).length !== 0){
        //循環(huán) headers 設(shè)置請(qǐng)求頭
        for(let key in headers){
            xhr.setRequestHeader(`${key}`,`${headers[key]}`);
            // xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        }
        //console.log(Object.keys(headers));//返回一個(gè)數(shù)組，數(shù)組成員是對(duì)象中所有的鍵
        //console.log(Object.values(headers));//返回一個(gè)數(shù)組，數(shù)組成員是對(duì)象中所有的值
    }
    
    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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/100449.html

相關(guān)文章

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

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

    cc17 評(píng)論0 收藏0

  • JavaScript 異步

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

    tuniutech 評(píng)論0 收藏0

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

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

    roadtogeek 評(píng)論0 收藏0

  • js速記

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

    MageekChiu 評(píng)論0 收藏0

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

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

    cikenerd 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

jhhfft

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<