ajax和promise以及async await的實踐分析

1. 使用ajax請求一個文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1 id="content">.........</h1>
    <button id="btn">點我讀取文件</button>
    <script>
        var content = document.getElementById('content');
        var btn = document.getElementById('btn');
        function ajax(method, url, data, successFn, failFn) {
            let xhr = new XMLHttpRequest();
            xhr.open(method, url);
            xhr.send();
            xhr.onreadystatechange = function() {
                console.log(xhr,'==========')
                if (xhr.readyState == '4') {
                    if (xhr.status == '200') {
                        //成功回調(diào)
                        successFn(xhr.responseText);
                    } else {
                        failFn(xhr.status);
                    }
                }
            };
        }
        
        function successFn(responTest) {
            console.log(responTest, '成功');
            content.innerText = responTest;
        }
        function failFn(status) {
            console.log(status, '失敗');
        }
       btn.onclick = function(){
        ajax('get', './1.txt', {}, successFn, failFn);
       }
    </script>  
    
</body>
</html>

對應(yīng)的文件1.txt

hello world

2.使用promise 和 async await 來分別處理一個請求和兩個請求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1 id="content">文件1內(nèi)容</h1>
    <h1 id="content_one">文件2內(nèi)容</h1>
    <button id="btn">點我讀取文件1</button>
    <button id="btn_two">點我讀取文件2</button>
    <button id="btn_three">點擊讀取文件1和文件2(先一后二)</button>
    <button id="btn_four">讀取文件1和文件2(都讀取完畢再做處理)</button>
    <button id="btn_five">讀取文件1和文件2(那個請求快處理哪個)</button>
    <button id="btn_six">先后讀取文件1和文件2(async await)</button>
    <script src="http://code.jquery.com/jquery-2.1.1-rc2.min.js"></script>
    <script>
        let content = document.getElementById('content');
        let content_one = document.getElementById('content_one');
        let btn = document.getElementById('btn');
        let btn_two =  document.getElementById('btn_two');
        let btn_three = document.getElementById('btn_three');
        let btn_four = document.getElementById('btn_four');
        let btn_five = document.getElementById('btn_five');
        let btn_six = document.getElementById('btn_six');
        //包裝的ajax 用于請求數(shù)據(jù)
        function ajaxPromise(url,method,data) {
            var pro = new Promise(function(resolve, reject) {
                var ajax = new XMLHttpRequest();
                var method=method||"GET"
                    var data=data ||null
                ajax.open(method, url);
                ajax.send(data);
                ajax.onreadystatechange = function() {
                    if (ajax.readyState == 4) {
                        if(ajax.status == '200'){
                            console.log(resolve,'======')
                            resolve(ajax.responseText);
                        }else{
                            reject(ajax.status);
                        }
                    }
                }
                
            })
            return pro;
        }

        //1.使用promise then的鏈?zhǔn)秸{(diào)用的方式 傳入請求成功和失敗的回調(diào) 來執(zhí)行成功的邏輯和捕獲異常

        btn.addEventListener('click',()=>{
            ajaxPromise("./1.txt").then(function(msg) {
                console.log(msg,'請求成功');
                content.innerText = msg;
            }, function(msg) {
                console.log(msg,'請求失敗');
                content.innerText = msg;
            })
        })

        //2.使用async await方式來處理該請求 使用try catch來處理請求成功的邏輯和捕獲異常

        btn_two.addEventListener('click',async ()=>{
            try{
                let res = await ajaxPromise("./1.json");
                console.log(res,'哈哈哈哈哈哈');
                let {success,data} = JSON.parse(res);
                if(success){
                    console.log(data,'請求成功');
                    let {showColumnsMap} = data;
                    let listArr = [];
                    Object.keys(showColumnsMap).forEach((key)=>{
                        listArr.push(showColumnsMap[key])
                    })
                    console.log(listArr,'=====')
                    let contentDom = listArr.map((item)=>{
                        return `<div>${item}<div/>`
                    })
                    console.log(contentDom,'=====')
                    content_one.innerHTML = contentDom.join('');
                    
                }
            }catch(error){
                console.log(error,'請求失敗')
            }
        })

        //3.使用promise的then的鏈?zhǔn)秸{(diào)用方式 先后發(fā)兩個請求 請求成功第一個文件后，再請求第二個文件 但凡第一個請求失敗了，第二個請求也就不會去觸發(fā) 被阻斷了

        btn_three.addEventListener('click',()=>{
            ajaxPromise("./1.txt").then(function(msg) {
                console.log(msg,'第一個文件請求成功');
                content.innerText = msg;
                ajaxPromise('./1.json').then((res)=>{
                    let {success,data} = JSON.parse(res);
                    if(success){
                        console.log(data,'第二個文件請求成功');
                        let {showColumnsMap} = data;
                        let listArr = [];
                        Object.keys(showColumnsMap).forEach((key)=>{
                            listArr.push(showColumnsMap[key])
                        })
                        console.log(listArr,'=====')
                        let contentDom = listArr.map((item)=>{
                            return `<div>${item}<div/>`
                        })
                        console.log(contentDom,'=====')
                        content_one.innerHTML = contentDom.join('');
                    }
                },(err)=>{
                    console.log(err,'第二個文件請求失敗')
                })
            }, function(msg) {
                console.log(msg,'第一個文件請求失敗');
                content.innerText = msg;
            })
        });

        //4. 使用promise all的方式 請求兩個接口，都成功后對于請求到的數(shù)據(jù)進(jìn)行統(tǒng)一處理
        btn_four.addEventListener('click',()=>{
            Promise.all([ajaxPromise("./1.txt"),ajaxPromise('./1.json')]).then((res)=>{
                console.log(res,'請求成功')
                //處理第一個請求回來的數(shù)據(jù)
                let msg1 = res[0];
                content.innerText = msg1;
                //處理第二個請求回來的數(shù)據(jù)
                let dataObj = JSON.parse(res[1]);
                console.log(dataObj,'=======');
                let {data} = dataObj;
                console.log(data,'第二個文件請求成功');
                let {showColumnsMap} = data;
                let listArr = [];
                Object.keys(showColumnsMap).forEach((key)=>{
                    listArr.push(showColumnsMap[key])
                })
                console.log(listArr,'=====')
                let contentDom = listArr.map((item)=>{
                    return `<div>${item}<div/>`
                })
                console.log(contentDom,'=====')
                content_one.innerHTML = contentDom.join('');
            },(err)=>{
                console.log(err,'請求出錯')
            })
        });

        //5. 使用promise race的方式 請求兩個接口，于先完成的請求到的數(shù)據(jù)進(jìn)行處理 如果某一個請求出錯了，不會影響另外一個請求
        btn_five.addEventListener('click',()=>{
            Promise.race([ajaxPromise("./11.txt"),ajaxPromise('./1.json')]).then((res)=>{
                console.log(res,'請求成功');
                let resArr = res.split(' ');
                console.log(resArr,'===========')
                console.log(resArr,'===========')
                if(resArr.length<=2){
                    //處理第一個請求回來的數(shù)據(jù)
                    content.innerText = res;
                }else{
                    let {success,data} = JSON.parse(res);
                    if(success){
                        //處理第二個請求回來的數(shù)據(jù)
                        console.log(data,'第二個文件請求成功');
                        let {showColumnsMap} = data;
                        let listArr = [];
                        Object.keys(showColumnsMap).forEach((key)=>{
                            listArr.push(showColumnsMap[key])
                        })
                        console.log(listArr,'=====')
                        let contentDom = listArr.map((item)=>{
                            return `<div>${item}<div/>`
                        })
                        console.log(contentDom,'=====')
                        content_one.innerHTML = contentDom.join('');
                    }
                }
                
            },(err)=>{
                console.log(err,'請求出錯')
            })
        });

        //6. 使用async await 的方式 哪個寫在前面哪個先請求，一個請求失敗，另一個也會被阻斷。 使用這樣的方式好處是在有異步回調(diào)嵌套的情況下比單純的使用promise看起來代碼邏輯和結(jié)構(gòu)更清晰，
        //避免了回調(diào)嵌套回調(diào)的回調(diào)地獄問題,async await 的使用try catch來處理成功和捕獲異常
        btn_six.addEventListener('click',async ()=>{
            try{
                let res2 = await ajaxPromise("./1.json");
                console.log(res2,'=========');
                if(res2){
                    let {success,data} = JSON.parse(res2);
                    if(success){
                        //處理第二個請求回來的數(shù)據(jù)
                        console.log(data,'第二個文件請求成功');
                        let {showColumnsMap} = data;
                        let listArr = [];
                        Object.keys(showColumnsMap).forEach((key)=>{
                            listArr.push(showColumnsMap[key])
                        })
                        console.log(listArr,'=====')
                        let contentDom = listArr.map((item)=>{
                            return `<div>${item}<div/>`
                        })
                        console.log(contentDom,'=====')
                        content_one.innerHTML = contentDom.join('');
                    }

                }
                let res1 = await ajaxPromise("./1.txt");
                console.log(res1,'========');
                if(res1){
                     //處理第一個請求回來的數(shù)據(jù)
                     content.innerText = res1;
                }
            }catch(error){
                console.log(error,'請求出錯')
            }
            
        })



        
       
    </script>
    
    
</body>
</html>

對應(yīng)的文件1.json

{
    "data": {
        "showColumnsMap": {
            "keyval2": "幣種",
            "keyval3": "會計月",
            "inputstate": "錄入標(biāo)志",
            "pk_task": "所屬任務(wù)",
            "finalfilecount": "管理報告數(shù)量",
            "pk_org": "報表主組織",
            "pk_report": "報表",
            "taskcheckstate": "任務(wù)審核狀態(tài)",
            "inputperson": "錄入人",
            "repcheckstate": "報表審核狀態(tài)",
            "repcommitstate": "報表上報狀態(tài)",
            "inputtime": "錄入時間",
            "taskcommitstate": "任務(wù)上報狀態(tài)"
        }
    },
    "success": true
}

以上實例即是ajax ，promise， async和await來處理異步的一些對比和分析。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容